Dave Russell » Ajax

Showing the loading icon when jQuery is waiting for a response

Dave — Thu, 03 Dec 2009 14:39:04 +0000

Here’s a very simple method of putting an overlay on the page when you are making an asynchronous call using $.ajax. As the page does not refresh, you need to alert your user that work is actually been done and that they cannot interact with the page until you have finished

The css:

.lightbox_bg {

        background:#ffffff none repeat scroll 0 0;

        display:none;

        height:800px;

        left:0;

        filter:alpha(opacity=50);

        opacity: 0.5;

        top:0;

        width:100%;

        z-index:1110;

        display:none;

        position:fixed;

    }

    .modal{

        position:absolute;

        left:45%;

        top:45%;

        z-index:1111;

        width:32px;

        height:32px;

        background:url(/image/of/your/choice.gif) #fff 50% 50% no-repeat;}

The javascript:

$(‘body’).ajaxStart(function() {

        $(‘’).addClass(‘lightbox_bg’).appendTo(‘body’).show();

        $(‘’).addClass(‘modal’).appendTo(‘body’);

    });

    $(‘body’).ajaxStop(function() {

        $(‘.lightbox_bg’).remove();

        $(‘.modal’).remove();

    });
Thats it, now everytime you do your ajax magic the ajaxstart method will kick in and do its bit – then when its finished the ajaxstop method will remove the overlay.

Ajax using .Net and jQuery – Revised and improved with help from Json

Dave — Thu, 03 Dec 2009 14:26:25 +0000

I previously wrote a post outlining a simpler method of making asynchronous calls with jQuery. It turns out that in practice that method was exactly that – too simple. It works fine when you only need one value back, but if you need to work with something a little more complex then try out my new method that uses a JSON object. So the basic overview is as follows:

create an object server-side on page load and add it to the DOM
populate the object using javascript
pass it back to a webservice using jquery’s ajax method and json
use the new object serverside and pass it back

Ok, so lets get started by creating the object in your webservice:

public class Person

    {

        public string Name { get; set; }

        public string ContactNumber { get; set; }

        public string Description { get; set; }

    }

Then in your page load you can inject this object into the DOM:

var objPerson = new Webservice.Person();

var js = new JavaScriptSerializer();

Page.ClientScript.RegisterArrayDeclaration("_person", js.Serialize(objPerson));

Now you can use this object with javascript:

…
function AjaxMethodJSON(serviceFn, paramArray, successFn, errorFn) {

    $.ajax({

        type: "POST",

        url: serviceFn,

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

        data: "{‘clientobject’:" + JSON.stringify(paramArray) + "}",

        dataType: "json",

        success: successFn,

        error: errorFn

    })

;
…

$("#btnSubmit").click(function() {

        objPerson.Name = $(‘#txtName’).val();

        objPerson.ContactNumber = $(‘#txtContactNumber’).val();

        objPerson.Description = $(‘#txtDescription’).val();

        AjaxMethodJSON("/webservices/Webservice.asmx/UpdatePerson", objPerson, AjaxSuccessStep, AjaxFailed);

    });

If you have been paying attention you may be thinking – stringify? The official explanation from json.org: If the stringify method sees an object that contains a toJSON method, it calls that method, and stringifies the value returned. This allows an object to determine its own JSON representation. So remember to add a reference to json2.js upstream from this code.

function AjaxSuccessStep(result) {

        if (result != null) {

            var obj = result.d;

            objPerson = JSON.parse(obj);

//got the updated object back, now you can            

//do some more stuff with it

        }

    }

There you go. This works very well when you are stepping through a wizard and updating a few fields with each step.

Ajax using .Net and jQuery

Dave — Tue, 28 Jul 2009 11:50:10 +0000

I am not a fan of the classic method of implementing ajax in .net – scriptmanagers and updatepanels. The load on the front end is pretty big (100kb+), especially considering local bandwidth restrictions and challenges. So I set out to find a better way as one does when one feels that something is not quite right.

So it turns out that jQuery comes to the rescue – again.

<div id="clickme1">whats the time? (using code behind)</div>
<div id="clickme2">whats the time? (using a webservice)</div>
<div id="result" style="border:1px solid red;padding:5px;">nothing yet</div>
<script src="/js/v4/jquery.132.min.js" type="text/javascript"></script><script type="text/javascript">// [CDATA[
function AjaxSucceeded(result) {$(‘#result’).html("good " + result.d);}
function AjaxFailed(result) {$(‘#result’).html("bad " + result.d);}
function AjaxMethod(serviceFn, paramArray, successFn, errorFn) {

    var paramList = ”;

    if (paramArray.length > 0) {

        for (var i = 0; i < paramArray.length; i += 2) {             if (paramList.length > 0) paramList += ‘,’;

            paramList += ‘"’ + paramArray[i] + ‘":"’ + paramArray[i + 1] + ‘"’;

        }

    }

    paramList = ‘{‘ + paramList + ‘}’;
    $.ajax({

        type: "POST",

        url: serviceFn,

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

        data: paramList,

        dataType: "json",

        success: successFn,

        error: errorFn

    })

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

            $(‘#clickme2′).click(function() { AjaxMethod("/webservices/webservice.asmx/GetDate", [], AjaxSucceeded, AjaxFailed); });

            $(‘#clickme1′).click(function() { AjaxMethod(window.location.pathname + "/GetDate", [], AjaxSucceeded, AjaxFailed); });

        });

// ]]></script>

Using a webservice (clickme2 event):

[ScriptService]

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class WebService : System.Web.Services.WebService

{

[WebMethod()]

public string GetDate()

{

return DateTime.Now.ToLocalTime().ToString();

}

}

And the code behind (clickme1 event)::

[WebMethod()]

public static string GetDate()

{

return DateTime.Now.ToLocalTime().ToString();

}

And there you go – ajax functionality without the bloat. This code has yet to make it into the harsh light of a production environment, but I have successfully used it to return not just one value, but xml data too (see example below), which opens up huge possibilities for front end goodness. The method below makes use of caching which increases performance hugely, but that’s a topic for another day.

function ShowMyPosts(result){
var output ="";
$(result.d).find(‘item’).each(function() {

var title= $(this).attr(‘title’);

var link= $(this).find(‘link’).text();

output += "

" + title + " : " + title+ " : " + link + "


";
});
$(‘#result’).html(output);

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

$(‘#clickme3′).click(function() { AjaxMethod(window.location.pathname + "/GetXML", ["url", "http://davidrussellr.wordpress.com/feed/", "cachename", "test2"], ShowMyPosts, AjaxFailed); });
});

And the code behind:

[WebMethod()]

public static string GetXML(string url, string cachename)

{

XmlDocument xmlDoc = FetchXML.ReturnXmlDoc(url, cachename);

return xmlDoc.InnerXml;

}