Skip to content Skip to sidebar Skip to footer
Home / Javascript / Javascript Events / Jquery

How To Update My Content Async With Javascript?

Post a Comment
Scenario I'm writing a web application, MVC in my case, and I need to update a specific container with the response from a get request, sometimes I want to filter the elements and

Solution 1:

I was building a web application when I needed to partially update my content asynchronously

So I came up with a function which might suits your needs too.

Basically it will perform a get request to the url provided, it has the standard jQuery callbacks: onSuccess, onError and onComplete, and you can filter() and find() on the result as well as specifying the container to place the response into.

Assume you have this on your page:

<divid="myContentWrapper"><divclass="myContent"><h1>This is the content I want to update.</h1></div></div>

And the response of the request returns this:

<html><!-- some html --><divid="filterId"><divclass="findClass"><h1>This is the content I want to inject!</h1></div></div><!-- some more html --></html>

Now you can update it wiring the function to myButton click event:

$("#myButton").click(function () {
    loadContent("/Controller/Action", //url"#filterId", ".findClass", //filter & find"div#myContentWrapper div.myContent", //container to updatefunction () { //success callbackalert('Success!');
    }, function () { //error callbackalert('Error :(');
    }, function () { //complete callbackalert('Complete');
    });
});

Easy enough, now the function will do the rest of the work for you:

functionloadContent(url, filter, find, container, 
                     onSuccess, onError, onComplete) {
    var htmlResult;
    $.ajax({
        url: url,
        type: "GET",
        success: function (data) {
            htmlResult = data;
            if (onSuccess && typeof onSuccess == "function") {
                onSuccess.call(this);
            }
        },
        error: function () {
            htmlResult = "<h1>An error occurred!</h1>";
            if (onError && typeof onError == "function") {
                onError.call(this);
            }
        },
        complete: function () {
            if (filter != null) {
                if (find != null) {
                    $(container).html(
                        $(htmlResult).filter(filter).find(find).html());
                } else {
                    $(container).html($(htmlResult).find(find).html());
                }
            } else {
                $(container).html(htmlResult);
            }
            if (onComplete && typeof onComplete == "function") {
                onComplete.call(this);
            }}});}

Maybe you don't want to filter or find something in the response, so you could do:

loadContent("/Controller/Action", null, null, 
"div#myContentWrapper div.myContent", 
function() {
    alert('Success!');
}, function () {
    alert('Error :(');
}, function () {
    alert('Complete');
    });

Or maybe you don't need any callbacks:

//This is the basic function call, these parameters are required
loadContent("/Controller/Action", null, null, 
    "div#myContentWrapper div.myContent", 
    null, null, null);

There you go, now you can easily update any content you want asynchronously, feel free to tweak this as needed, also you could use a request type parameter so you can GET or POST, or even adding a loading image container's id so you can display it when you enter the function and hiding it on the complete callback of the $.ajax.

You may like these posts

Post a Comment for "How To Update My Content Async With Javascript?"