Question

I’m working on an ASP.NET website (MVC3 but not really important for my question)

I have some links on my page when the user clicks a link I want to open a Jquery Modal Dialog:

http://jqueryui.com/demos/dialog/#modal-message

for each link I want a different dialog to show.

As i understood I have to specify the content of the dialog in a <div> on my page. For example:

<div id="dialog" title="Basic dialog">
    <p>Here we put the content of the dialog</p>
</div>

Links are generated dynamically and I do not want to create a div for each link.
also the content of the dialog depends on parameters send by the link

I will try to explain what I want.

What I want is to do the following if possible:

I have one div

<div id="dialog" title="Basic dialog">
</div>

when the user clicks on link1 a function is called ShowDialog(FirstName1, LastName1)

that function will add the parameters as string to the div “dialog” and open the dialog.

when the user clicks on link2 the ‘div’ “dialog” is cleared and new content are filled by the function ShowDialog(FirstName2, LastName2)and the dialog is opened.

all should be done is Jquery or Javascript.

I hope I was clear. if more info is needed please ask.

Answer 1

You haven’t specified where you will be retrieveing the firstname and surname values from, so I’ve assigned them to data-* attributes of the link, like this:

<a href="#" data-firstname="Foo" data-surname="Bar">Click me</a>

$("#dialog").dialog({ /* settings */ });

$("#link2").click(function() {
    var $el = $(this);
    var fn = $el.data("firstname");
    var sn = $el.data("surname");
    ShowDialog(fn, sn);
});

function ShowDialog(firstname, surname) {
    // Here you can do whatever is required to the dialog, create elements, change text, go nuts.
    $("p", "#dialog").text("Hello " + firstname + " " + surname); 

    // Show the dialog
    $("#dialog").dialog('open');
}