How to update a div contents if a specific link is clicked

Question

I want to know how to use "AJAX" to update a "div" contents if a specific link is clicked .. this what I trying to do :

enter image description here

I want to display the company description if the user clicked "Description" only, or display the reviews about the company if the user clicked "Reviews" .

How to use "Ajax" to perform this ?

Please, post what you have attempted. If not, attempt something and post a specific question about the issue you are facing. To start read http://api.jquery.com/jQuery.ajax and http://stackoverflow.com/questions/7139208/change-content-of-div-jquery — Sully, Nov 27 '13 at 09:27

score 1 · Answer 1 · answered Nov 27 '13 at 09:29

1

this code may help you:

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

put it in your click event.

answered Nov 27 '13 at 09:29

Ringo

3,795
3
22
37

score 1 · Accepted Answer · answered Nov 27 '13 at 09:29

1

Set the href of each link to the appropriate page, then do something like this:

$("#menuIDhere a").click(function(e) {
    e.preventDefault();
    $("#idOfDestinationDivHere").load(this.href);
});

That is, bind a click handler to each link inside your menu (give your menu element an appropriate id). Within the click handler cancel the default event behaviour (which would obviously be to replace the current page with the specified one), and then use jQuery's .load() method to load the specified content and put it into the div of your choice.

answered Nov 27 '13 at 09:29

nnnnnn

147,572
30
200
241

I think this is what I need and I'll try, but is there any requirements or pre-steps should I do before using ajax ? – Akari Nov 27 '13 at 09:38
1

Well ajax will only load pages from the same domain. The pages loaded via ajax don't need ``, `` or `` tags, just the actual content, though if you read the `.load()` doco I linked to you'll see the method can extra just a part of the loaded page if necessary. – nnnnnn Nov 27 '13 at 09:58
:Do u mean by (this.href) : the page that contains the div's new contents ? I'm not familiar with jquery so much ^^! – Akari Nov 27 '13 at 11:31
1

Within an event handler `this` will (usually) be the element that the event occurred on, in this case the anchor element. Anchor element's have an `href` attribute. So use `Description` and so forth and the code I've shown will pick up the url from the `href` and load the referenced page with Ajax. – nnnnnn Nov 27 '13 at 11:47

score 1 · Answer 3 · answered Nov 27 '13 at 09:32

You can use jQuery and its AJAX function: jQuery.AJAX

Or in your case, try the easyer load()-function:

jQuery.load();

You can load the content of a html file and put that into a div:

$( "#menulink" ).click(function() {
    $( "#result" ).load( "ajax/test.html" );
});

How to update a div contents if a specific link is clicked

3 Answers3