CODEWITHSUNDEEP
javascriptjqueryajax
Daniel Tonon
Daniel Tonon

Reputation: 10442

How to replicate the jQuery .load() method using jQuery’s .ajax() method

I can’t just use .load() because I’m building a custom loading bar that’s actually truthful about the percentage that has currently been loaded (yes that’s actually possible): http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

I’ve got the loading bar working now but I need to replicate the following jQuery functionality inside the .ajax() function so I can append the #ajaxContent stuff to the .ajaxContainer div once it’s finished loading:

$('.ajaxContainer').load('/path/to/file.php #ajaxContent')

Upvotes: 0

Views: 156

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

The equivalent would be:

$.ajax('/path/to/file.php'/*,{extra: settings}*/).done(function (response) {
    $('.ajaxContainer').html($("<div>").append( $.parseHTML( response ) ).find( '#ajaxContent' ));
});

Upvotes: 2

Max
Max

Reputation: 7090

I think is quite simple to provide a simple answer, I prefer to illustrate you the procedure for retrieve yourself.

If you read the docs of .load() on jQuery site you read:

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success)

If you read the docs about .get() you read:

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Where dataType

dataType Type: String The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

So in your case you must fill the html element with data from success callback like this:

$('.ajaxContainer').html(response);

Upvotes: 1

Related Questions