Question

Here’s what I’m trying to do. I have several links:

<a href="#" title="Title 1">Link 1</a>
<a href="#" title="Title 2">Link 2</a>
<a href="#" title="Title 3">Link 3</a>

I then have a generic <div> to hold contents so that I can reuse it. It’s like this

<div id="contents">
    <div id="data"></div>
</div>

What I want to be able to do is when the user clicks on whatever link, the jQuery dialog opens up with the title of the link (which I have done and will show), but the contents of the dialog will show the text of another div on the page. So:

<div id="someID">Some special content here</div>

Here’s what I have for the jquery bit:

var link = $('#careers > ul > li > a');
link.click(function (e) {
$('#contents').dialog({
    title: e.target.title,
        text: need #specialcontent // <-- THIS IS THE PART I DON'T KNOW HOW TO CHANGE
     });
    return false;
});

Is that clear? I will have other “someID” divs on the page that i would like to switch out based on the click of the link. So it’s essentially loading a new div depending on which is clicked.

Thank you

Answer 1

does something like this do what you want?

var link = $('#careers > ul > li > a');
link.click(function (e) {
    if (link.id == "someID")
        var text_value = "someID's text";
    else if (link.id == "someID2")
        var text_value = "someID2's text";
    $('#contents').dialog({
        title: e.target.title,
        text: text_value #specialcontent // <-- THIS IS THE PART I DON'T KNOW HOW TO CHANGE
    });
    return false;
});