如何在顯示之前填充加載的內容？

我在index.html，我ajax query.php並得到結果。現在如何在將block.html加載到content之前填充block.html，以便在沒有顏色/大小信息的情況下不會顯示文本？如何在顯示之前填充加載的內容？

的index.html

<div id="content"><button id="button1" type="button">click</button></div>

block.html

You selected the color: <div id="color"></div>! 
You chose a size of: <div id="size"></div>!

query.php

$result = array('color' => 'blue', 'size' => '12'); 
echo json_encode($result);

來源

2013-10-25 Roger

爲什麼block.html自己的文件？ –

有多個步驟，當你點擊一個按鈕，它會加載block.html到內容中，當你點擊另一個它會加載block2.html。 – Roger

你有一些數據和y你有一些HTML，你需要以合理的方式將它們合併在一起。你基本上在做client-side templating。

這裏有一個基本的方法：

$.get需要，並轉換爲一個jQuery對象processBlock()
$.get你需要getDataFor($el)
更新＃1＃2 renderBlock($el, data)
將更新後的HTML插入到DOM中addToContent($el)

代碼：

$.get("block.html", processBlock); 

// create a documentFragment to fill in later 
function processBlock(html) { 
    var $block = $(html); 
    getDataFor($block); 
} 

// get any needed data by querying for JSON 
function getDataFor($el) { 
    $.getJSON("query.php", function(data) { 
     renderBlock($el, data); 
    }); 
} 

// take the data and the element and 
function renderBlock($el, data) { 
    $el.find("#color").text(data.color); 
    $el.find("#size").text(data.size); 
    addToContent($el); 
} 

function addToContent($el) { 
    $el.appendTo($("#content")); 
}

在非jQuery的土地要創建一種叫做DocumentFragment的，它可以讓你創建一個DOM你將其插入頁面之前操縱一點點。

簡單小提琴版本： http://jsfiddle.net/9kLzP/

來源

2013-10-25 20:45:01

如何在顯示之前填充加載的內容？

回答

相關問題