Как заполнить загруженный контент перед его отображением?

Question

Как заполнить загруженный контент перед его отображением?

0

Я на index.html, я ajax query.php и получаю результат. Теперь, как я заполняю block.html перед загрузкой его в content чтобы текст не отображался без информации о цвете и размере?

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

Roger 25 окт. 2013, в 23:30

Источник

0

Почему block.html это собственный файл?
Jamund Ferguson 25 окт. 2013, в 20:47
0

Есть несколько шагов, когда вы нажимаете одну кнопку, он загружает block.html в контент, когда вы нажимаете другую, он загружает block2.html.
Roger 25 окт. 2013, в 20:49

Теги:

jquery

1 ответ

Ещё вопросы

Почему block.html это собственный файл?
Есть несколько шагов, когда вы нажимаете одну кнопку, он загружает block.html в контент, когда вы нажимаете другую, он загружает block2.html.

Jamund Ferguson · Accepted Answer · 2013-10-25T18-44-00.000Z

У вас есть некоторые данные, и у вас есть HTML, и вам нужно объединить их вместе разумным способом. Вы в основном делаете шаблоны на стороне клиента.

Здесь один базовый подход:

$.get HTML, который вам нужен, и конвертировать в объект 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 land вы создаете что-то, называемое documentFragment, которое позволяет вам создать немного DOM, с которым вы манипулируете, прежде чем вставлять его на страницу.

Упрощенная версия скрипта: http://jsfiddle.net/9kLzP/