Question

I have a website with a left panel and a content div on the right. When I click on any link in the left panel I use a Javascript Ajax call to load the content into the div tag (named ‘content’).

In my case the view that is loaded into the div tag also has links so normally if I click on them they will just open a whole new page. I want them also to load into the same div tag that they were called from.

How can I achieve that?

Answer 1

Assuming you have a #left and a #content pane, you can do:

$(document).on('click', '#left a, #content a', function()
{
   var href = $(this).attr('href');
   if(!href || href[0] != '/') return; // relative URLs only

   // Do your AJAX call here
});

By using this jquery syntax, whereby you bind on document and filter to #left a and #content a even when new anchors are added to the #left or #content divs, they will still be wired to that click handler. At that point, you define the logic to tell it to load the new content as an AJAX call instead of going to a new page. I gave demo logic to get you started.