загрузка содержимого переменной в поле div / modal

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

Я получил результат, используя ajax в переменной, и я хочу поместить содержимое этой переменной в модальное поле. Как загрузить содержимое переменной в модальное поле? попробовал несколько вещей, но не понял, как мне это сделать. По мне, следующий код добавляет HTML-содержимое в модальное поле. Мне нужно, чтобы он был изменен для загрузки переменного содержимого.

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

Оригинальный полный код доступен по адресу http://blog.nemikor.com/2009/08/07/creating-dialogs-on-demand/comment-page-1/#comment-10676

Заранее спасибо за любые предложения и помощь

Answer 1

Обновление : Извините, пропустил, что диалог был частью, которая вас больше всего беспокоит.См. Диалоговое дополнение в конце.

---

Оригинальный ответ :

Чтобы загрузить HTML-код из переменной в элемент, вы используете html function:

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

Так что, если вы загружаете эту разметку через ajax, это может быть:

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

Если вы действительно просто захватываете всесодержание там, вот что делает используемая вами функция load:

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

... но если вы хотите сначала сделать с ней что-то еще, используйте ajax.

ДляНапример, предположим, что вы загружаете некоторые данные с сервера с использованием нотации JSON.Предполагая, что данные выглядят следующим образом:

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

Вы можете сделать это:

$.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
    );
  }
});

Живой пример

---

Обновление для диалогового окна :

Поскольку в диалоговом окне пользовательского интерфейса jQuery элементы используются только как базовые, вышеприведенное применимо и к ним, вот пример, в котором предполагается, что у элемента диалога есть модальное диалоговое окно id value."и изначально скрыт (см. ниже для создания диалога с нуля):

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

Таким образом, используя это из нашего ajax вызова выше:

// 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

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

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

Использование:

// 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);

  }
});

Живой пример