mit JQuery (JQuery Dialog mit Parametern)

Question

Ich arbeite an einer ASP.NET-Website (MVC3 aber nicht wirklich wichtig für meine Frage)

Ich habe einige Links auf meiner Seite, wenn die Benutzer klickt auf einen Link, den ich einen jQuery Modal Dialog öffnen möge:

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

für jeden Link, den ich einen anderer Dialog will zu zeigen.

Wie ich verstanden habe, muss ich den Inhalt des Dialogs in einer <div> auf meiner Seite angeben. Zum Beispiel:

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

Links werden dynamisch generiert und ich möchte kein div für jeden Link erstellen. auch der Inhalt des Dialogs hängt von Parametern durch den Link

Ich werde versuchen zu erklären, was ich will.

Was ich will, ist folgendes zu tun, wenn möglich:

Ich habe ein div

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

, wenn der Benutzer klickt auf link1 eine Funktion aufgerufen wird ShowDialog(FirstName1, LastName1)

, dass die fügt funktionieren Parameter als String zum div "Dialog" und öffnen den Dialog.

Wenn der Benutzer auf Link2 klickt, wird der 'div' "Dialog" gelöscht und neue Inhalte werden durch die Funktion ShowDialog(FirstName2, LastName2) gefüllt und der Dialog wird geöffnet.

alles sollte getan werden, ist Jquery oder Javascript.

Ich hoffe, ich war klar. Wenn mehr Informationen benötigt werden, fragen Sie bitte.

Answer 1

Sie haben nicht angegeben, wo Sie die firstname und surname Werte von werden retrieveing, so habe ich sie data-* Attribute des Links zugewiesen, wie folgt aus:

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