jQuery .load Method causing page refresh AJAX

Question

I have a functional JSP page that accepts URL parameters and updates a table on the page with info based on those parameters. I have a set of different tabs which pass said URL paraneters to the page they are on so it then re-loads and displays this new data. I have been trying to use jQuery .load and .ajax methods so that i can pass these URL parameters to the page on the server and then only serve up the table via AJAX rather than doing a whole page refresh. The problem i am having is that sometimes the page does refresh and i cannot work out why this is happening. Here is the jQuery: ``` $('ul#coverTabs > li').live('click', function() { // Removes default class applied in HTML and onClick adds 'currentTab' class $(".currentTab").removeClass("currentTab"); $(this).addClass("currentTab"); // Find href of current tab var $tabValue = $('ul#coverTabs > li.currentTab > a').attr('href'); // Load new table based on href URL variables $('#benefit').load($tabValue + ' #' + 'benefit'); /*$.aj…

Accepted Answer

You are returning false when the user clicks on the `li` element, which doesn't do anything to prevent the `a` element within the `li` element from firing. You need to override their default action to prevent them from firing:

```
$('ul#coverTabs > li > a').click(function(event) {   
    event.preventDefault(); 
}
```

jQuery .load Method causing page refresh AJAX

Solution

Problem

Related problems