views:

1046

answers:

0

Hello. I have something like the following. A main page has jquery tabs on it. It loads content for the tabs from other pages. Using the hijack plugin, the content loads correctly for me. Now, on the loaded tab, I have a form (page2.html below). On here, when I hit the link, I would like the new page as directed by the action (edit.html) to load in this tab (where page2.html) was/is.

I've tried to distill the code below to what I'm doing. I see the divs in firebug, but instead, it reloads main.html within main.htlm (below the tabs), but without any new tabs (i.e. I have the tabs from the original load and then an unordered list of tab names and the static content).

This works if I ajaxSubmit to a div (target) on the same page (pae2.html).

Anything I'm obviously doing wrong here? I tried a variation where on the click event doing:

<script type="text/javascript">
$('#editSubmit').click(function() {
    $('#page2').load('edit.html');
    return false;

}); 
</script>

but to no avail.

Thanks!

Main.html:

<script type="text/javascript">
$(function() {
    $("#tabs").tabs({ // start jQuery UI tabs
        load: function(event, ui) { 
            $(ui.panel).hijack();
        }
    });
    });
</script>

    <div class="main">

    <div id="tabs">
        <ul>
         <li><a href="page1.html" title="page1">Page 1</a></li>
         <li><a href="page2.html" title="page2">Page 2</a></li>
         <li><a href="#tabs-3">Page 3</a></li>
         <li><a href="#tabs-4">Page 4</a></li>
        </ul>
        <div id="tabs-3">Hello</div>
        <div id="tabs-4">Goodbye</div>
     </div>
     </div>

page1.html:

<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>

page2.html:

<script type="text/javascript">
$('#editSubmit').click(function() {
    var options = { 
    target: '#page2'};
    $('#editSubmit').ajaxSubmit(options);
    return false;

}); 
</script>

<form id="details" name="details" action="edit.html" method="post">
   <a id="editSubmit" name="editSubmit" href="#">Edit</a>
</form>

edit.html

<p>Hello today!</p>