loading contents of variable in div/modal box

Question

$(document).ready(function() {
    var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

    $('#tire-specs th a').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).one('click', function() {
            $dialog
                .load($link.attr('href') + ' #content')
                .dialog({
                    title: $link.attr('title'),
                    width: 500,
                    height: 300
                });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });

            return false;
        });
    });
});

I have got result using ajax in a variable and i want to put that variable content in the modal box. How do i load content of a variable in the modal box? tried several things , but not getting how do i accomplish it. according to me the following code adds the html contents to the modal box. i need it to be modified for loading variable content.

$dialog.load($link.attr('href') + ' #content').dialog({
              title: $link.attr('title'),
                width: 500,
                height: 300
            });

The original full code is available at http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/comment-page-1/#comment-10676

Thanks in advance for any suggestions and help

Answer 1

Update: Sorry, missed that the dialog was the part you were most concerned with. See dialog-specific addition at the end.

---

Original answer:

To load the HTML from a variable into an element, you use the html function:

var markup = "This is <strong>HTML</strong>";
$("#targetElement").html(markup);

So if you're loading that markup via ajax, that might be:

$.ajax({
    url: "your.url",
    success: function(data) {
        $("#targetElement").html(data);
    },
    error: function() {
        // ... deal with error ...
    }
});

If you're really just grabbing all the content there, that's what the load function you used does:

$("#targetElement").load("your.url");

...but if you want to do something else with it first, use ajax.

For instance, let's suppose you're loading some data from the server using JSON notation. Assuming the data looks like this:

{
  "foo": "I'm the foo value",
  "bar": "I'm the bar value"
}​​​​​​​​

You might do this:

$.ajax({
  url: "http://jsbin.com/urebu5",
  dataType: "json",
  success: function(data) {
    // Use the de-serialized object's properties
    // to append HTML to the body
    $("<p>").html(data.foo).appendTo(document.body);
    $("<p>").html(data.bar).appendTo(document.body);
  },
  error: function(xhr, statusText, ex) {
    $("<p>Error running <tt>ajax</tt> call</p>").appendTo(
      document.body
    );
  }
});

Live example

---

Update for dialog:

Since the jQuery UI dialog just uses elements as the base, the above applies to them as well, here's an example assuming the dialog element has the id value "modal-dialog" and is initially hidden (see below for creating the dialog from scratch):

function showDialog(content) {
  // Get the dialog element
  var dlgElement = $("#modal-dialog");

  // Update the dialog with the content
  dlgElement.find('p:first').html(content);

  // Show it
  dlgElement.dialog({
    height: 140,
    modal: true
  });
}

So using that from our ajax call above:

// Load our content
$.ajax({
  url: "http://jsbin.com/urebu5",
  dataType: "json",
  success: function(data) {

    // Show the 'foo' part of the data
    showDialog(data.foo);

  },
  error: function(xhr, statusText, ex) {

    // Show the error
    showDialog("Error running <tt>ajax</tt> call");
  }
});

Live example

If you want to create the dialog from scratch, just create the elements, and then be sure to remove them when done:

function createDialog(title, content) {
  // Create our dialog structure
  return $("<div>")
    .css("display", "none")
    .attr("title", title)
    .html("<p>" + content + "</p>")
    .appendTo(document.body);
}

function showDialog(dlg, destroy) {
  var opts = {
    height: 140,
    modal: true
  };
  if (destroy) {
    opts.close = function(event, ui) {
      $(this).remove();
    };
  }
  dlg.dialog(opts);
}

Use:

// Load our content
$.ajax({
  url: "http://jsbin.com/urebu5",
  dataType: "json",
  success: function(data) {

    // Create a dialog using 'foo' part of the data
    var dlg = createDialog("Foo Data", data.foo);

    // Show it
    showDialog(dlg, true);

  },
  error: function(xhr, statusText, ex) {

    // Create a dialog using 'foo' part of the data
    var dlg = createDialog(
      "Foo Data - Error",
      "Error running <tt>ajax</tt> call"
    );

    // Show it
    showDialog(dlg, true);

  }
});

Live example