reloading content via jquery load();

Question

i am trying to develop a site............ my problem is that how can i reload only php page according to the tab pressed........!!

please do note that i have a single div for out put content.........!! if i put a setInterval() jquery function than it reloads only the first page if any of other tabs are pressed........!! and the page goes very slow............!! how can i fix that.......!!

Answer 1

I'm going to go ahead and assume that I have some vague idea about what you're trying to ask.

Is this something like what you're trying to do?

$('#tab_console .tab').click(function () {
 $('#tab_pane #my_ajax_pane')
  .load('/path/to/page/'+$(this).attr('id')+'.php');
});

and

<div id="tab_console">
 <div class="tab" id="page_1">pane 1</div>
 <div class="tab" id="page_2">pane 2</div>
</div>
<div id="tab_pane">
 <div class="pane" id="my_ajax_pane">pane 1 content</div>
</div>

There's no reason that should be slow, but if you wanted to avoid having to ajax-load the page every time the user changes tabs, you could just do:

$('#tab_console .tab').click(function () {
 $('#tab_pane .pane').hide();
 $('#tab_pane #'+$(this).attr('id')).show();
});

and

<div id="tab_console">
 <div class="tab" id="pane_1">pane 1</div>
 <div class="tab" id="pane_2">pane 2</div>
</div>
<div id="tab_pane">
 <div class="pane" id="pane_1">pane 1 content</div>
 <div class="pane" id="pane_2">pane 2 content</div>
</div>

and you might provide a "refresh" button if necessary.