Изменить содержимое DIV с помощью (диалог Jquery с параметрами) Jquery

Question

Я работаю на веб-сайте ASP.NET (MVC3, но на самом деле не важно, на мой вопрос)

У меня есть несколько ссылок на моей странице, когда пользователь нажимает на ссылку, я хочу, чтобы открыть Jquery модальный диалог:

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

для каждой ссылки я хочу другое диалоговое окно, чтобы показать.

Как я понял, я должен указать содержимое диалога в <div> на моей странице. Например:

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

Ссылки генерируются динамически, и я не хочу создавать div для каждой ссылки. также содержание диалога зависит от параметров отправки по ссылке

Я постараюсь объяснить, что я хочу.

То, что я хочу сделать следующее, если это возможно:

У меня есть один ДИВ

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

, когда пользователь нажимает на link1 функция называется ShowDialog(FirstName1, LastName1)

что функция добавит параметры как строку в диалоговом окне «div» и откройте диалоговое окно.

Когда пользователь нажимает на ссылку2, диалог «div» «очищается», а новое содержимое заполняется функцией ShowDialog(FirstName2, LastName2) и открывается диалоговое окно.

все должно быть сделано JQuery или Javascript.

Надеюсь, я был чист. если вам нужна дополнительная информация, пожалуйста, спросите.

Answer 1

Вы не указали, где вы будете retrieveing ​​в firstname и surname значения из, так что я приписал их data-* атрибуты ссылки, например:

<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'); 
}