CODEWITHSUNDEEP
jqueryajax
Shagun Sodhani
Shagun Sodhani

Reputation: 3747

How do I fetch a part of html page?

This is the output of alert boxI am trying to fetch a div element of class "mno" from abc.php into xyz.php

http://pastebin.com/MhAqhZpd has the code I'm using (not the entire code only ajax part)

The url points to the script but the second alert box does not display anything, not even "NULL" - also console.log gives nothing. I am new to ajax so may be missing sumthing trivial thanks in advance

Upvotes: 2

Views: 658

Answers (5)

Dejo Dekic
Dejo Dekic

Reputation: 2126

Another way to do it:) Just replace load.html with your document and div you want to load like : mypage.php .somediv

<script type="text/javascript">    

$(document).ready(function(){
//var ajax = function(url){
//var url = 'load.html';
//$('.content').load(url);
//}
// Than you call it like THIS: ajax();
//$('.button').click(function(){
//$('.content').load('load.html')
//});
//response contains the text content that was returned from the ajax request
$(".content").load('load.html', function(response, error, xhr) {
if (error == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);


}
});
});
});
</script>

Upvotes: 1

Sam Tyson
Sam Tyson

Reputation: 4626

You can use the jQuery load method. The .load() method, unlike $.get(), allows you 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.

$('div').load('abc.php div.mno');

Upvotes: 1

totallyNotLizards
totallyNotLizards

Reputation: 8569

$.load() is great if you don't mind it being quite inflexible, but if you want something a little more powerful you can actually use $.get or $.post.

Example:

var data = {'someParam':'someValue'};
$.post('abc.php', data, function(response){
    var myDiv = $('.mno', response); //get class .mno from response text
    alert(myDiv.html());
});

This can be pretty neat if for instance you are using it to get the next page of search results, so you would want to pass in parameters to the next page.

Upvotes: 1

unloco
unloco

Reputation: 7330

maybe you can go like this: (i'm sticking to what you question is saying !)

$.get('abc.php',function(data){
    var mnoDivHTML = $(data).find('div.mno').html(); //the html content of .mno div in abc.php
    $('div.yourclass').html(mnoDivHTML); //fill the desired div in the current page
});

Upvotes: 1

fliim
fliim

Reputation: 2199

use http://api.jquery.com/load/ if the file you want to acces is in the same server.

$("div").load("abc.php div.mno");

Upvotes: 4

Related Questions