Как обновить несколько элементов в вызове MooTools Request.HTML - PullRequest
Новая
       18

Как обновить несколько элементов в вызове MooTools Request.HTML

1 голос
/ 20 апреля 2011

Используя MooTools Request.HTML, мой запрос Request работает отлично, обновляя элемент моей страницы, используя что-то вроде: 

onComplete: function() {
    var response = this.response.text;
    $('content').set("html", response); 
}

Однако я хотел бы иметь возможность иметь несколько ответовэлементы, которые обновляются по идентификатору, и я не могу на всю жизнь заставить это работать правильно.Например, если мой ответ: 

<response>
    <div id="header"><h1>My Title</h1></div>
    <div id="content"><h2>Content</h2><p>This is my content</p></div>
    <div id="footer"><p>Special footer for this page</p></div>
</response>

, я бы хотел, чтобы код перебирал дочерние элементы , захватывал идентификатор, сопоставлял этот идентификатор с элементом на странице и заменялэлемент innerHTML страницы с элементом innerHTML из ответа.Казалось, это не так сложно, но я просто не могу заставить это работать.Любая помощь приветствуется.Спасибо.

Ответы [ 2 ]

1 голос
/ 20 апреля 2011

вы можете пройтись по возвращенным элементам формы Request.HTML, например, так:

http://jsfiddle.net/dimitar/NF2jz/1139/

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: data,
        delay: 1
    },
    method: 'post',
    onComplete: function() {
        // first, only get elements that have an id and are divs
        // this may be slow as it looks for ALL els returned, depends on your
        // fragment 
        var filtered = this.response.elements.filter(function(el) {
            return el.get("id") && el.get("tag") == "div";
        });

        // This wil be even faster, working with your response fragment 
        // where your els are children of the first node:
        // get div els where id is set via Slick
        var filtered = this.response.tree[0].getElements("div[id]");

        filtered.each(function(el) {
            // get the id
            var id = el.get("id");
            // remove the id from the element so dom selector works correctly
            el.set("id", null);

            // look for dom element that matches
            var target = document.id(id);

            // if found, update html
            if (target)
                target.set("html", el.get("html"));

        });
    }
}).send();

, как любит отмечать Тим Вайнк из mootools-core, у меня есть неприятностьпривычка использовать недокументированные функции mootools, которые выходят за пределы общедоступного API, такие как прямой доступ к this.response, где вместо этого мне следует использовать именованные аргументы.Имейте это в виду и посмотрите документацию, для которой аргумент будет соответствовать this.response.elements или this.response.tree - в случае маловероятного , когда mootools изменяют свой API и делают его недоступным.

1 голос
/ 20 апреля 2011 
onSuccess:function(responseJSON, responseText)
{
    var data_length = responseJSON.data.length;
    for(var i=0;i<data_length;i++){
         $(responseJSON.data[i].id).set('html',responseJSON.data[i].html);
    }
}

JSON-репозиторий с сервера 

{data: [
        {id:"header",html:"<h1>My title</h1>"},
        {id:"content",html:"<h2>Content</h2><p>This is my content</p>"},
        ....  
       ]  
}

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

...