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函数：

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

Live example

对话框更新：

由于jQuery UI对话框只使用元素作为基础，上面也适用于它们，这里是一个假设对话框元素具有id值“模态对话框”并最初隐藏的示例（见下文）从头开始创建对话框：

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 example

如果要从头开始创建对话框，只需创建元素，然后确保在完成后删除它们：

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

  }
});

Live example

在div / modal框中加载变量的内容

1 个答案: