Question

DataPull.php:

    CASE "CityList":
        echo "<select style='width:132px;height:243px;' size='17' id='CityListA' name='CityListA' onChange='SubCityList(this.value);'>";
        $result = $db-> query("SELECT region_id,region_name FROM dwrel_region ORDER BY region_name");
        while ($row = $db-> fetch_assoc($result)){
            echo "<option value='".$row["region_id"]."'>".$row["region_name"]."</option> \n";
        }
        echo "</select>";
        break;

JavaScript:

function CityList(){
    try{var xmlhttp=new XMLHttpRequest();}catch (e){try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}catch (e){return false;}}}
    xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){getEl("CityList").innerHTML=xmlhttp.responseText;}}
    eMsg = "DataPull.php?get=CityList";
    xmlhttp.open("GET",eMsg);
    xmlhttp.send();
}

It works just fine for me. Was reading around JQuery/AJAX and surprised you could do it via $(function(){}); part.. but I don’t or can’t begin to understand where and how to put it together “as is” with the code I have above. Hopefully someone out there is kind enough to guide me to the right direction using AJAX, pulling and output results.

Was trying to understand how to be able to use this, even reading mentioned the use of JSON? (I think) or data “as is”, something.. Oh I don’t know.. Anyways, hopefully someone could help me put this together and then I could understand it even better.

Thanks!

EDIT:
After weeks from this post, learned a new way to do this:
in CSS:

.LoaderIcon {width:100%;height:100%;background:url('./images/Loading.gif') no-repeat center center;}

in JQuery:

$.ajax({
    beforeSend: function(){ $('#SOMEID').addClass('LoaderIcon'); },
    url: "SOME PARAMETER",
    success:function(data){
        $('#SOMEID').removeClass('LoaderIcon');
        $('#SOMEID').html(data)
    }

This has been working like charm for me, hopefully it would benefit others 🙂
});

Answer 1

Try this

function CityList(){
 $("#YOUR_SPINNING_DIV_ID").html('<img src="PATH_TO_SPINNINGANIM_GIF"');
 $.ajax({
url: "DataPull.php?get=CityList",
success: function(data ){
  $("#CityList").html(data );
$("#YOUR_SPINNING_DIV_ID").html("");
 }
});
 }

and then call this function on any event that you are observing like button clicks or window onload. If you are doing it on windown onload then Jquery equivalient will be

 $(document).ready(function() {

 $.ajax({
url: "DataPull.php?get=CityList",
success: function(data ){
  $("#CityList").html(data );
 }
});
 )};