My Javascript is not working when having two function?

Question

I have 2 functions called on $(document).ready() in my Main.js file:

$(document).ready(function () {
    UpdateValue();
    LocationValue();
});

UpdateValue() works fine, but when i call LocationValue(), it breaks. It seems to be due to the getWards() function called in LocationValue().

Here are the two functions:

function UpdateValue() {
$(document.body).on("change", ".Quantity", function () {
    var ProID = $(this).attr("data");
    var Quatity = $(this).val();
        $.ajax({
            type: "GET", url: "/Cart/UpdateValue", data: { ProID: ProID, quantity: Quatity },
            success: function (data) {
                $(".cart_box").html(data);
            }
        }
            );
        $.ajaxSetup({
            cache: false
        });
    });
}
function LocationValue() {
    $("#City").change(function () {
        var cityID = $("#City").val();
        alert(cityID);
        getWards(cityID);
    });
}
function getWards(cityID) {
    alert("in show");
    $.ajax({
        url: "/Checkout/Wards",
        data: {CityID: cityID},
        dataType:"json",        
        type:"POST",
        error:function()
        {
            alert("An error occured");
        },
        success:function(data)
        {
            var items="";
            $.each(data, function(i,item))
            {
            items+="<option value=\"" + item.Value + "\">" + item.Text + "</option>";
            });
            $("#Ward").html(items);
        }
    });
}

alert(cityID) in LocationValue() only shows correctly if I comment out the call to getWards(). What's wrong with my code?

What does "not working" mean? What errors do you get? Provide a line number if you can. — Trojan
– Trojan, Commented Jul 31, 2013 at 10:33
This question appears to be off-topic because it is about a syntax error. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 31, 2013 at 10:35

obimod · Accepted Answer · 2013-07-31 10:34:32Z

2

function getWards(cityID) {
    alert("in show");
    $.ajax({
        url: "/Checkout/Wards",
        data: {CityID: cityID},
        dataType:"json",        
        type:"POST",
        error:function()
        {
            alert("An error occured");
        },
        success:function(data)
        {
            var items="";
            $.each(data, function(i,item))

^^ You have one too many ')'... delete the last ) and it might work.

            {
            items+="<option value=\"" + item.Value + "\">" + item.Text + "</option>";
            });
            $("#Ward").html(items);
        }
    });

answered Jul 31, 2013 at 10:34

obimod

79710 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luffy Over a year ago

Yes, it's my fault. I'm newbie in jquery, so i confused about {}().

obimod Over a year ago

We all have been there =) welcome aboard.. could you checkmark the answer as correct for historical sake?

Arun P Johny · Accepted Answer · 2013-07-31 10:34:44Z

0

You have an syntax error in the method

function getWards(cityID) {
    alert("in show");
    $.ajax({
        url : "/Checkout/Wards",
        data : {
            CityID : cityID
        },
        dataType : "json",
        type : "POST",
        error : function() {
            alert("An error occured");
        },
        success : function(data) {
            var items = "";
            $.each(data, function(i, item) { // an extra ) was here
                items += "<option value=\"" + item.Value
                + "\">" + item.Text + "</option>";
            });
            $("#Ward").html(items);
        }
    });
}

answered Jul 31, 2013 at 10:34

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

Luffy Over a year ago

It works. But i don't understand why has varible i in function(i, item). "i" is not used.

Arun P Johny Over a year ago

@Luffy that is the syntax specification for the callback method of $.each(), those parameters are passed by the caller of the method - as a user we don't have control of that

Luffy Over a year ago

$("#City").change(function () {         var cityID = $("#City").val();         if (cityID == null) {             $("Ward").prop("disabled", true);         }         else {             $("Ward").prop("disabled", false);             getWards(cityID);         }     });

I'm trying disable or return to Optional Label the second dropdown when the first dropdown has no value or in Optional Label. But this code doesn't work, i have set $("Ward").prop("disabled", true);

Collectives™ on Stack Overflow

My Javascript is not working when having two function?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related