---

Search posts under jQuery:

---

.load() - Load web page content in jQuery

How to load a page content from the server into a particular element in jQuery?

To load a page data from server into a particular page element, load() method can be used. An optional callback method can also be specified to catch the returned data.

   <input type="button" id="btnLoad" value="Load Simple Page Content" />
   <textarea id="txtArea1" name="txtArea1" rows="10" cols="50"></textarea>

    <script>
        // without callback
        $("#btnLoad").click(function () {
            $("#txtArea1").load('jQueryAjaxData.aspx?format=json');
        });

        // with callback
        $("#btnLoad").click(function () {
            $("#txtArea1").load('jQueryAjaxData.aspx?format=json', function (e) {
                alert(e);
            });
        });
    </script>

In the above code snippet, the first function “without callback” will call the page jQueryAjaxData.aspx and set the response to the “txtArea1” textbox.

Similarly, in the second function “with callback” will also call the same page and set the response into "txtArea1" and apart from that it will also alert the response from server.