CODEWITHSUNDEEP
jqueryjquery-uidialog
acedanger
acedanger

Reputation: 1206

Dynamically create text in dialog box

How can I dynamically set the text of the dialog box that I'm opening? I've tried a few different things but they all respond with an empty dialog box.

Here is my current try:

$('#dialog').text('Click on the link to download the file:
'.data);
$('#dialog').dialog("open");

Upvotes: 14

Views: 60863

Answers (5)

dano
dano

Reputation: 5630

For best practice, try putting a div inside your dialog div and appending text to that instead. 

<div id="myDialog"><div id="myDialogText"></div></div>

and then setting the text of the internal Div. This make for better separation, so you have

  • a div for dialog manipulation
  • and a div for text display

You can then set the text with

jQuery("#myDialogText").text("your text here");

Upvotes: 29

Scott C Wilson
Scott C Wilson

Reputation: 20016

Here's an example showing dynamic text in a jQueryui dialog box. The text is from an ajax response. The message is shown below (larger than it appears!).enter image description here

$(".info").click(function(event){
    event.preventDefault();
    $id = $(this).attr("id");
    $.ajax({
           type: "POST",
           url: 'my_code.php',
           data: {query:"info", rowid: $id},
           success: function(data) {
                try {
                   obj = JSON.parse(data);
                   var str = '';
                   for (var i in obj) {
                       str += i + ":" + obj[i] + "<br />";
                       if (i == "id") str += "<hr />";
                   }
                   $("#dialog-1").html(str).dialog();
                   $("#dialog-1").dialog('open');
                } catch (e) {}
           }
        });
});

Upvotes: 1

m00seDrip
m00seDrip

Reputation: 4021

Here is an alternative way of creating dialogs on the fly and setting their messages dynamically:

$('<div></div>').dialog({
    modal: true,
    title: "Confirmation",
    open: function() {
      var markup = 'Hello World';
      $(this).html(markup);
    },
    buttons: {
      Ok: function() {
        $( this ).dialog( "close" );
      }
    }   });  //end confirm dialog

See it in action: http://jsfiddle.net/DYbwb/

Upvotes: 12

idrumgood
idrumgood

Reputation: 4924

dialog("open"); isn't a valid jquery UI method. (And what Mike said about concatenating with + instead of .

Check the documentation.

Upvotes: 0

Karmic Coder
Karmic Coder

Reputation: 17949

Use the plus symbol to concatenate strings:

$('#dialog').text('Click on the link to download the file:
' + data);
$('#dialog').dialog("open");

Upvotes: 4

Related Questions