CODEWITHSUNDEEP
jquery
Randel Ramirez
Randel Ramirez

Reputation: 3761

How to get an element with selector after using jquery ajax? $.ajax()

I want to get a div element with an ID after calling $.ajax() Here is my code:

$.ajax({

  url: "PO_Header.php",
  data: "supplier="+selectedId,
  cache: false,
  success: function(html){
    $("#PO_Header").empty(); 

    $("#PO_Header").append(html);

  }
});

$("#PO_Header").append(html); will append the entire html page, what I want to have is get an element with a specific id. Let's say inPO_Header.phpa div element with an id='mydiv' would be injected in my current page.

Upvotes: 3

Views: 8961

Answers (5)

gtwalford
gtwalford

Reputation: 61

I found this example from CSS-Tricks to be very helpful -

http://css-tricks.com/ajax-load-container-contents/

Upvotes: 0

Simon
Simon

Reputation: 1869

Try this

$.ajax({

  url: "PO_Header.php",
  data: "supplier="+selectedId,
  cache: false,
  success: function(html){

    var new_html = $(html).find('#mydiv').html();

    $("#PO_Header").empty(); 

    $("#PO_Header").append(new_html);

  }
});

Upvotes: 1

Alexander
Alexander

Reputation: 23537

You can use .load() for this.

Loading Page Fragments

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

Source: http://api.jquery.com/load/

Basically you can use it like this:

$('#PO_Header').load('PO_Header.php #mydiv', { 'supplier': selectedId } );

To disable cache you can use at the start of your code:

$.ajaxSetup({
  cache: false
});

EDIT:

.load() is roughly the same as .get() except for a couple of reasons:

  1. .load() has an implicit callback function which set the returned HTML content into the supplied element when a successful response occurs.

  2. It has a special syntax for the url parameter for specifying just a determined portion of the returned document to be inserted.

  3. Default method is GET. Unless the data parameter is passed as an object then a POST method is used.

Upvotes: 3

hohner
hohner

Reputation: 11578

Use jQuery's load:

$('#PO_Header').load('PO_Header.php #mydiv', { 'supplier': selectedId } );

It allows you to load page fragments. As their documentation points out:

Loading Page Fragments The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

It will therefore only inject <div id="myDiv"></div> from PO_Header.php into your element.

Upvotes: 5

buck54321
buck54321

Reputation: 847

I prefer to bind to ajax loaded elements in an external function and call that in my success function. 

function binder(){
  $("#mydiv")....do something here
}

$.ajax({

  url: "PO_Header.php",
  data: "supplier="+selectedId,
  cache: false,
  success: function(html){
    $("#PO_Header").empty(); 

    $("#PO_Header").append(html);
    binder();

  }
});

Upvotes: 2

Related Questions