Adding tabs with jQuery UI, then filling them with content via ajax

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 b开发者_StackOverflow社区e 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).

---

So from what I can see this is your problem: "what I have no idea how to achieve is how to have the tabs added with the correct information."

$.get("ajax.php", { name: $(getImageID).val()}, function(data) { 
//get the json array in data var     
     $(this).after("<span class='title'>Title"+obj["title"]+"</span><span class='summary'>"+obj["text"]+"</span>"); //append a couple of spans with the data after you retrieve the unique data

});

Firstly your ajax.php page needs to be returning a simple JSON_encode'ed array: http://php.net/manual/en/function.json-encode.php, see this for more details.

The next step is when you are appending the new content AFTER the button you pressed, use .after to the documet view: http://api.jquery.com/after/

Here is a quick jFiddle that shows what the JSON encoded array is doing: http://jsfiddle.net/DKuK9/1/ it is applying a couple of spans with the arrayed content into the div, not precisly what your script is doing however i do not have a ajax page to call to :)

edit your get function usage was wrong-

---

I think you are actually pretty close to what you want. Something like this?

<div>
    <ul>
        <li>
            <input class="imageID" type="hidden" value="11">
            <a href="#addTab" class="tabButton">asdfasdfasdfasfasf</a>
        </li>
    </ul>
</div>

var tabs = $("#tabs").tabs({
    select: function (event, ui) {
        if (!$(ui.tab).hasClass('tabButton')) {
            return; // exit because you did not select the first tab
        }

        var panel = $(ui.panel), summaryID, readID;
        summaryID = panel.find('#hidSummaryID').val();
        readID = panel.find('#hidReadID').val();
        tabs.tabs('add', 'summary.php?c=' + summaryID, 'Summary');
        tabs.tabs('add', 'read.php?c=' + readID, 'Read Topic');
    }
});

Where 'hidSummaryID' and 'hidReadID' store some value you need to get the correct info from the database.

---

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?