CODEWITHSUNDEEP
phpjqueryhtmlajax
user1275456
user1275456

Reputation:

how to load content from another page using ajax

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.

Upvotes: 3

Views: 15773

Answers (5)

calebds
calebds

Reputation: 26228

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

Upvotes: 6

Ryan
Ryan

Reputation: 640

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...

Hope this helps.

Upvotes: 0

Taha Paksu
Taha Paksu

Reputation: 15616

the simplest way would be:

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

Upvotes: 1

jugnu
jugnu

Reputation: 139

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);

    }
});

}

Upvotes: 2

jugnu
jugnu

Reputation: 139

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

Upvotes: 0

Related Questions