Is selector applied on client or server, when jQuery .load() is called with selector?

**kender** · Dec 25th, 2014, 03:12 PM

jQuery has a .load() method, which is a convenient helper for retrieving HTML and loading it into an element. The load() method can also be configured to return only a portion of the source HTML. The sought porting is identified with a CSS selector.

Code:

$("#loadHere").load("HtmlPage3.html #fooBar");

Is the whole file downloaded and the desired portion is selected on the client side? Or, does selection happen on the server side?

Any suggestion, insight or reference is really appreciated!

Best,
- Nick

**Nightwalker83** · Jan 1st, 2015, 09:14 PM

It is server-side as stated on that page!

**kender** · Jan 3rd, 2015, 09:32 PM

Originally Posted by Nightwalker83

It is server-side as stated on that page!

Where is it stated on the page (like, which paragraph)? I've re-read it, and couldn't find it the indication that the #selector is applied in the server side. I'm not trying to say that you are incorrect, I just want to understand better.

**szlamany** · Jan 4th, 2015, 11:14 AM

.Load is just a shortcut to get an AJAX call and have the results of that call be placed into the HTML content of the element you specify.

And it decides on doing a GET or POST based on how you call it.

Don't you want more control?

This is a lot more code but it also exposes a lot more paths for your consideration

Code:

objWebParam.ObText = strUN;
objWebParam.username = window.username || "";
objWebParam.message = objReturn.message || "";
var strWebParam = $.toJSON(objWebParam);
$.ajax({
    type: "POST",
    url: "WebService.asmx/BootPage",
    dataType: "json",
    data: strWebParam,
    contentType: "application/json; charset=utf-8",
    success: function (msg) {
        ajaxFinished(msg, sender, "bootpage", objWebParam);
    },
    failure: function (msg) {
        ajaxFinished(msg, sender, "failure", objWebParam);
    },
    error: function (msg) {
        ajaxFinished(msg, sender, "error", objWebParam);
    }
});

**szlamany** · Jan 4th, 2015, 11:17 AM

Oh - you are talking about this part

We could modify the example above to use only part of the document that is fetched:

$( "#result" ).load( "ajax/test.html #container" );

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser

That tells me that if you put this #ID value into the call then the CLIENT SIDE will pre-process the data to be inserted so as to just have that small portion placed into the HTML of the destination element.

[edit]
I'm guessing on a simple page where you want to replace just a particular element in each call you would name the elements on the page the same as the "request" gives so that you could basically do ASP.Net UPDATE panels with ease.
[/edit]

**szlamany** · Jan 4th, 2015, 11:21 AM

I still go back to saying do it the real way - POST some AJAX to get some JSON back and loop it and place into the HTML.

[edit]or at least do it with a passed parameter so you can send less HTML if you only want some small piece of it

Example: Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {

alert( "The last 25 entries in the feed have been loaded" );

});

[/edit]

Thread: Is selector applied on client or server, when jQuery .load() is called with selector?

Thread Tools

Display

Is selector applied on client or server, when jQuery .load() is called with selector?

Re: Is selector applied on client or server, when jQuery .load() is called with selec

Re: Is selector applied on client or server, when jQuery .load() is called with selec

Re: Is selector applied on client or server, when jQuery .load() is called with selec

Re: Is selector applied on client or server, when jQuery .load() is called with selec

Re: Is selector applied on client or server, when jQuery .load() is called with selec

Tags for this Thread

Posting Permissions