変数の内容をdiv/modalボックスにロードする

Question

変数に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機能を使用：あなたは、AJAX経由でそのマークアップをロードしているのであれば

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

を

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

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

...しかし、あなたが最初にそれで何かを行いたい場合は、ajaxを使用：はあなたが本当にそこにすべてのコンテンツをつかんでいるなら、それはあなたが使用load機能が何をするかです。

たとえば、JSON表記を使用してサーバーからデータを読み込んでいるとします。データと仮定すると、次のようになりますちょうどjQueryのUIのダイアログので

：

$.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

---

ダイアログの更新：

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

あなたはこれを行う可能性があります要素を基底とし、上記のapだけでなく、それらにプライ、ここでは（ゼロからダイアログを作成するための下記を参照）のダイアログ要素が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