CODEWITHSUNDEEP
javascriptjqueryjquery-events
Esteban
Esteban

Reputation: 3127

How to update my content async with javascript?

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 find an element from the response to place in the original container.

How can I do it?

Upvotes: 3

Views: 3914

Answers (1)

Esteban
Esteban

Reputation: 3127

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:

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

And the response of the request returns this:

<html>
    <!-- some html -->
    <div id="filterId">
        <div class="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 update
    function () { //success callback
        alert('Success!');
    }, function () { //error callback
        alert('Error :(');
    }, function () { //complete callback
        alert('Complete');
    });
});

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

function loadContent(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.

Upvotes: 5

Related Questions