JQuery мобильное обновление без переписывания

Question

JQuery мобильное обновление без переписывания

0

У меня есть этот маленький код, который отлично работает, кроме одного: если у меня будет расширяемый набор setTimeout(loadPage,5000) он будет setTimeout(loadPage,5000) каждые 5 секунд, потому что я устанавливаю setTimeout(loadPage,5000). Мой вопрос: как построить этот маленький код без перезаписи, поэтому, даже если он будет расширен, он будет обновляться без сглаживания. , ,

$(document).bind('pageinit', function () {
    var globalVar = {};

    function loadData() {
        $.ajax({
            url: "http://jsbin.com/wulol/2.js",
            async: false,
            dataType: 'json',
            success: function (data) {
                globalVar = data;
            }
        });
    }

    function loadPage() {
        var items = '';
        $.each(globalVar, function (index, item) {
            items += "<div data-role='collapsible' id='" + item.id + "'>";
            items += "<h3>";
            items += "<div class='ui-grid-c'>";
            items += "<div class='ui-block-a'>" + item.airline + "</div>";
            items += "<div class='ui-block-b'>" + item.number + "</div>";
            items += "<div class='ui-block-c'>" + item.people + "</div>";
            items += "<div class='ui-block-d'>" + item.time + "</div>";
            items += "<div class='ui-block-a'></div>";
            items += "<div class='ui-block-b'></div>";
            items += "<div class='ui-block-c'></div>";
            items += "</div>";
            items += "</h3>";
            items += "<p><input type='button' value='Button'></p>";
            items += "</div>";
        });
        $("#result").html(items);
        $("#result").trigger('create');
        setTimeout(loadPage, 5000);

    }

    function ignite() {
        loadData();
        loadPage();
    }
    window.onload = ignite;
});

Вот работая ДЕМО, мне очень нужна ваша помощь, люди Земли! ! !

Besan Vadim 26 апр. 2014, в 00:06

Источник

0

Вам нужно сравнить div, если они существуют, игнорировать их, если не добавлять их в $ ("# result")
aimadnet 25 апр. 2014, в 23:35
0

Aimadnet, не могли бы вы, пожалуйста, как-то быть более конкретным. , , Я имею в виду, что пример мог бы спасти мою жизнь :) Спасибо. Я добавил рабочую демонстрацию, чтобы вы могли видеть, о чем я говорю.
Besan Vadim 27 апр. 2014, в 08:29
0

@user3115243 user3115243 ты пробовал мой ответ?
toesslab 27 апр. 2014, в 17:39

Показать ещё 1 комментарий

Теги:

javascript

jquery

jquery-mobile

2 ответа

Ещё вопросы

Вам нужно сравнить div, если они существуют, игнорировать их, если не добавлять их в $ ("# result")
Aimadnet, не могли бы вы, пожалуйста, как-то быть более конкретным. , , Я имею в виду, что пример мог бы спасти мою жизнь :) Спасибо. Я добавил рабочую демонстрацию, чтобы вы могли видеть, о чем я говорю.
@user3115243 user3115243 ты пробовал мой ответ?

toesslab.ch · Answer 1 · 2014-04-27T14-58-00.000Z

Попробуйте добавить атрибут data-collapsed="false" вашей оболочки.

Изменить:

items+= "<div data-role='collapsible' id='item"+item.id+"'>";

Для того, чтобы:

items+= "<div data-collapsed="false" data-role='collapsible' id='item"+item.id+"'>";

См. Документы

aimadnet · Answer 2 · 2014-04-27T12-39-00.000Z

Вы можете использовать append() вместо html(), но прежде чем вам нужно будет проверить, существует ли элемент в #result или нет.

ДЕМО: http://jsbin.com/yabopuzu/1/edit

$(document).bind('pageinit', function(){
    var globalVar = {};
    function loadData(){
        $.ajax({
            url: "http://jsbin.com/wulol/2.js",
            async: false,
            dataType: 'json',
            success: function(data){
            globalVar = data;
            }
        });
    }
    function loadPage(){
        var items='';
        $.each(globalVar,function(index,item)
        {
            if ($("#result #item"+item.id).size()==0)
            {
                items+= "<div data-role='collapsible' id='item"+item.id+"'>";
                items+= "<h3>";
                items+= "<div class='ui-grid-c'>";
                items+= "<div class='ui-block-a'>"+item.airline+"</div>";
                items+= "<div class='ui-block-b'>"+item.number+"</div>";
                items+= "<div class='ui-block-c'>"+item.people+"</div>";
                items+= "<div class='ui-block-d'>"+item.time+"</div>";
                items+= "<div class='ui-block-a'></div>";
                items+= "<div class='ui-block-b'></div>";
                items+= "<div class='ui-block-c'></div>";
                items+= "</div>";
                items+= "</h3>";
                items+= "<p><input type='button' value='Button'></p>";
                items+= "</div>";
            }
        });
        $("#result").append(items);
        $("#result").trigger('create');
        setTimeout(loadPage,5000);
    }
    function ignite(){
        loadData();
        loadPage();
    }
    window.onload = ignite;
});