Question

Ok, so basically I’m using ui.tabs and I want to have a link in the first tab trigger the adding of 2 new tabs, both of which will be populated by an ajax call which is dependent on the value of the link clicked. I have the following HTML:

<div id="a">
    <div class="wrapper">
        <input class="imageID" type="hidden" value="11">
        <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a>
    </div>
    <div class="wrapper">
        <input class="imageID" type="hidden" value="1">
        <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a>
    </div>
</div>

And then the jQuery so far looks like this:

$(function(){
    var tabs = $("#tabs").tabs();
    $('.tabButton').click(function(){
        tabs.tabs('add','test.htm','Summary');
        tabs.tabs('add','test.htm','Read Topic');
    });

    $(".tabButton").live("click", function(){
        var getImageID = $(this).parent();
        $.get("ajax.php?c=" + $(".imageID",getImageID).val(), function() {

        });
    });
});

Now the jQuery works so far, it’s picking up the value of the hidden input field properly and returning the correct response from ajax.php (visible in Firebug’s console), but what I have no idea how to achieve is how to have the tabs added with the correct information. Basically, ajax.php queries a database and pulls out the content of 2 fields (obviously the record varies depending on the value sent). The content of the first field would then be displayed in the new ‘Summary’ tab, and the content of the second field would be placed in the second new tab, ‘Read Topic’. However, I have no idea how to structure the jQuery to achieve this (I’m fairly new to the subject).

(Obviously I’m aware that lines 3-6 of the jQuery won’t be needed once this is coded correctly).

Answer 1

Ok, so I’ve used elements of the other answers, and ended up with this working code:

$(function(){   
    var tabs = $("#tabs").tabs();
    $(".tabButton").live("click", function(){
        var getImageID = $('.imageID',$(this).parent()).val();
            tabs.tabs('add', 'ajax.php?content=summary&id=' + getImageID, 'Summary');
            tabs.tabs('add', 'ajax.php?content=read&id=' + getImageID, 'Read Topic');
    });
});

with the link that causes it to fire being the same as in my original question. I think the reason I’ve done it differently is because I’ve fired it off a button click. Does this seem a correct and reasonable use of jquery?