Multiple jquery ajax calls to be made from the same page --

Multiple jquery ajax calls to be made from the same page --

Hi All.

 

I need a little help with just a jquery implementation on a particular scenario. Actually I’m a little unsure/mixed up with the concept/what to do in the case I’m about to describe, that’s why asking.

 

Basically, I have a page, where I have a dropdown list. Also a span tag. Now, on the document ready event I’m executing some jquery, filling up the dropdown with items fetched from database; also setting the text of the span tag to the first item from the dropdown. The flow of my application requires that I execute another jquery call to a server side method once the page is steadily loaded, by taking the text value of that span tag. Appears pretty simple. But the thing is, no matter what I try to do, my jquery code always picks null/blank from the span tag text even though text is very much there. I’ve tried to put this 2nd block of jquery ajax call inside window.load, window.onload, document.onload and all kinds of other things hoping that one will work [trial and error basically]. But none have actually. That’s the catch. It’s a mystery. Why on earth it fails to pick up the text from that span tag, is the most weird mystery to me.

I’m posting the relevant code blocks for what I did. This is what I have so far.
1. 1. The page markup –

  1. <h2>Fast Forecast</h2>

    Your current location is: <label id="lbl_C"></label>

     

    Select City: 

    <select id="selCity" style="width:170px; border-radius:5px">

    <option value="Select">-----------   Select   -----------</option>

    </select>

     

    <h3>Showing Fast Forecast for:

    <span id="spnC"></span></h3>
2. The jquery:

  1. $(document).ready(function () {

           

            var ctr = $("#lbl_C").val();

            $.ajax({

                type: 'GET',

                url: '@Url.Action("GetCityList", "Home")',

                data: JSON.stringify({ country: ctr }),

                dataType:'json',

                contentType: 'application/json; charset=utf-8',

                success:function(response)

                {

                    $.each(response, function (i, obj) {

     

                        $("#selCity").append(

                            $('<option></option>').val(obj.city_nm).html(obj.city_nm)

     

                            );

     

                    });

                    var def_city = $('#selCity option:eq(1)').val();

                    selCity = def_city;

                    $("#spnC").text(def_city);

                    $("#hdnC").val(selCity);

     

                },

                error:function(err, xhr, msg)

                {

                    alert(err+"-------------------"+xhr);

                }

     

            });

     

            getAPIData();

           

        });
3.  The part that doesn’t work:

  1. function getAPIData()

    {

        var c_val = $("#spnC").val();  ß-- it’s picking up nothing from the span tag

        $.ajax({

     

            type: 'GET',

            url: '@Url.Action("MethodWeather", "Home")',

            data: JSON.stringify({ f_cty: c_val }),

            dataType: 'json',

            contentType: 'application/json; charset=utf-8',

            async: false,

            success: function (data) {

                if (data != null) {

                    alert("Fetching Weather Data!");

                }

            },

            error: function (err, xHR, msg) {

                alert(err + "---------------------" + msg);

            }

        })

    }
As you can see, ‘spnC’ is the span tag of which I was talking about. One point to mention is – the getAPIDATA() function I put in another separate js file. Don’t worry I previously tried putting it on the same page also, inside the same block, inside same page but separate block all kindsa perm/comb things. Nothing works. I’m perplexed what to do. Guide me please!
Thanks!