Michael Bremerkamp Michael Bremerkamp - 4 months ago 35
Ajax Question

JQuery Ajax call not working in If statement

Is there a reason why my Ajax call will not work inside of an if statement? I may be doing something fundamentally wrong here because I don't have a lot of experience with JS or Ajax. Thanks

The working js function is:

function filter(varType, varValue) {
var $products = $('#products');

$.getJSON($SCRIPT_ROOT + '/filterSize/' + varValue)

.success(function (data) {
$products.empty(); // clear html from container
var elt0 = '<div class="page-content"><h1 id="shoes">Shoes</h1></div>';
$products.append(elt0);

if (Object.keys(data.shoes).length === 0) {
none = '<span class="noresults">No results</span>';
$products.append(none);
}

else {
var numItems = (Object.keys(data.shoes).length);
for (index = 0; index < numItems ; ++index) {
var elt1 = Flask.url_for("static", {"filename": data.shoes[index].img1});
var elt2 = '<div id="item" class="col-md-4"><div class="products"><a href="shop/item/' + data.shoes[index].id + '"><h5>' + data.shoes[index].name + '</h5><img src="' + elt1 + '" alt="" width="200px" height="125px"></a></div>';
$products.append(elt2);
}
}
});
}


But if I were to do this, it suddenly stops working:

function filter(varType, varValue) {
var $products = $('#products');

var x = 5
var y = 6

if (y > x) {
$.getJSON($SCRIPT_ROOT + '/filterSize/' + varValue)
}

.success(function (data) {
$products.empty(); // clear html from container
var elt0 = '<div class="page-content"><h1 id="shoes">Shoes</h1></div>';
$products.append(elt0);

if (Object.keys(data.shoes).length === 0) {
none = '<span class="noresults">No results</span>';
$products.append(none);
}

else {
var numItems = (Object.keys(data.shoes).length);
for (index = 0; index < numItems ; ++index) {
var elt1 = Flask.url_for("static", {"filename": data.shoes[index].img1});
var elt2 = '<div id="item" class="col-md-4"><div class="products"><a href="shop/item/' + data.shoes[index].id + '"><h5>' + data.shoes[index].name + '</h5><img src="' + elt1 + '" alt="" width="200px" height="125px"></a></div>';
$products.append(elt2);
}
}
});
}

Answer
  if (y > x) {
            $.getJSON($SCRIPT_ROOT + '/filterSize/' + varValue)

        .success(function (data) {
            $products.empty(); // clear html from container
            var elt0 = '<div class="page-content"><h1 id="shoes">Shoes</h1></div>';
            $products.append(elt0);

            if (Object.keys(data.shoes).length === 0) {
                none = '<span class="noresults">No results</span>';
                $products.append(none);
            }

            else {
                var numItems = (Object.keys(data.shoes).length);
                for (index = 0; index < numItems ; ++index) {
                    var elt1 = Flask.url_for("static", {"filename": data.shoes[index].img1});
                    var elt2 = '<div id="item" class="col-md-4"><div class="products"><a href="shop/item/' + data.shoes[index].id + '"><h5>' + data.shoes[index].name + '</h5><img src="' + elt1 + '" alt="" width="200px" height="125px"></a></div>';
                    $products.append(elt2);
                }
            }
        });
}

This is valid syntax. You need to move the .success inside the parenthesis.