how to load content from another page using ajax

Question

hi i am a new programer i want to replace the content of current php page from another php page using ajax without refreshing page.

the content to be replaced is in div's .

both pages (current and another) has same div's

HTML Div's are:

  <div class="category-container">
    <div class="category-image"></div>
    <div class="category-desc"><a href="#">#</a><p>text</p></div>
    <div class="rating5" >Editors' rating: </div>
    <div class="category-download-btn"><a href="#">Download</a></div>
    <div class="category-buy-btn"><a href="#">Buy</a></div>
  </div>

can anyone tell me how i can do it. it will be a great help. also can you provide me ajax code not jquery.

thanks.

Answer 1

Have a look at jQuery's load , the section on loading page fragments:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted.

To get the div content on another page into an analogous div on the current page, use something like:

$('#content').load('other-page.php #content');
// ^ target div                    ^ same div on the other page

Answer 2

this is usual jquery.ajax call

function getVotes(id){
$.ajax({
    type: 'get',
    url: 'ay/templates/backend/_votes_partial.tpl.php',
    data: 'charity_id=' + id,
    success: function(data) {
        $('#shadow').fadeIn('slow');
        $('#popupContact').fadeIn('slow');
        $('#content').html(data);

    }
});

}

Answer 3

the simplest way would be:

$.get("pageurl",function(data){
    $("yourdiv").html(data);
});

Answer 4

use jquery.ajax its easy... old way of making ajax calls was too much complicated, jquery made it easy,

you need to install jquery library,include it in ur head tag and go thorough following link for clear understanding, its much easy

Jquery.ajax

Answer 5

You're correct in assuming jquery is the way to go. I'm far from an expert, but this should help. The docs are straightforward.

Generally, jQuery follows the find something then do something approach.

• Find something ---> watch for some action on some element (like changing a select box or clicking a link)
• Do something ---> make an ajax call to the php page you want replace the current div with the new div

The jQuery documentation is here with an example at the bottom that shows exactly what you're trying to do http://api.jquery.com/jQuery.post/

Some other helpful jQuery commands for this task could be...

• http://api.jquery.com/appendTo/
• http://api.jquery.com/remove/
• http://api.jquery.com/clone/

Hope this helps.