Jquery Mobile: принудительное обновление контента

Question

У меня большая проблема: у меня есть listview, и каждый элемент ссылается на страницу #concorsi. Когда я нажимаю на ссылку, URL становится #concorsi?numero=1, потому что я получаю форму № 1 из JSON.

Когда я нажимаю в первый раз, все в порядке. Каждый ввод визуализируется с помощью классов jQuery Mobile, но если я вернусь и зайду по той же ссылке, код не обновится. Заголовок хорошо визуализирован, но содержания нет. Как я могу принудительно обновить содержимое div?

Это мои функции JavaScript:

<script type="text/javascript">
$(document).bind( "pagebeforechange", function( e, data ) {
    // We only want to handle changePage() calls where the caller is
    // asking us to load a page by URL.

    if ( typeof data.toPage === "string" ) {
        // We are being asked to load a page by URL, but we only
        // want to handle URLs that request the data for a specific

        var u = $.mobile.path.parseUrl( data.toPage ),
            re = /^#concorso/;
        if ( u.hash.search(re) !== -1 ) {
            // We're being asked to display the items for a specific category.
            // Call our internal method that builds the content for the category
            // on the fly based on our in-memory category data structure.
            showConcorso( u, data.options);
            // Make sure to tell changePage() we've handled this call so it doesn't
            // have to do anything.
            e.preventDefault(); 
        }
    }
});
</script>

А showConcorso() Л

function showConcorso( urlObj, options )
{
    document.getElementById('conccont').innerHTML="";
    var concorsoNum = urlObj.hash.replace( /.*numero=/, "" ),

        // Get the object that represents the category we
        // are interested in. Note, that at this point we could
        // instead fire off an ajax request to fetch the data, but
        // for the purposes of this sample, it's already in memory.
        concorso = obj.concorsi[ concorsoNum ],

        // The pages we use to display our content are already in
        // the DOM. The id of the page we are going to write our
        // content into is specified in the hash before the '?'.
        pageSelector = urlObj.hash.replace( /\?.*$/, "" );

    if ( concorso ) {
        // Get the page we are going to dump our content into.
        var $page = $( pageSelector ),

            // Get the header for the page.
            $header = $page.children( ":jqmData(role=header)" ),

            // Get the content area element for the page.
            $content = $page.children( ":jqmData(role=content)" ),
            $footer = $page.children( ":jqmData(role=footer)" );



        // Find the h1 element in our header and inject the name of
        // the category into it.
        $header.find( "h1" ).html(concorso['title']);

        markup=document.createElement('form');
        markup.setAttribute('action','#home');
        markup.setAttribute('method','POST');
        markup.id="concForm";
        markup.onchange="alert (test)";
        items=obj.concorsi[concorsoNum].elementi;

        for(field in items) {
            nest=items[field];
            nest=obj.campi[nest];
            switch(nest.type){
                case "free": markup.appendChild(createFree(nest));
                            break;
                case "text": markup.appendChild(createText(nest));
                            break;
                case "textarea": markup.appendChild(createTextArea(nest));
                            break;
                case "switch": markup.appendChild(createSwitch(nest));
                            break;
                case "switchcust": markup.appendChild(createSwitchCustom(nest));
                            break;
                case "slider": markup.appendChild(createSlider(nest));
                            break;
                case "select": markup.appendChild(createSelect(nest));
                            break;
                case "checkbox": markup.appendChild(createCheckbox(nest));
                            break;
                case "radio": markup.appendChild(createRadio(nest));
                            break;
                case "reset": markup.appendChild(createButton(nest));
                            break;
                case "submit": markup.appendChild(createButton(nest));
                            break;
            }
        }

        // Inject the category items markup into the content element.
        $content.html( markup );

        // Pages are lazily enhanced. We call page() on the page
        // element to make sure it is always enhanced before we
        // attempt to enhance the listview markup we just injected.
        // Subsequent calls to page() are ignored since a page/widget
        // can only be enhanced once.

        $page.page();


        // We don't want the data-url of the page we just modified
        // to be the url that shows up in the browser's location field,
        // so set the dataUrl option to the URL for the category
        // we just loaded.
        options.dataUrl = urlObj.href;

        // Now call changePage() and tell it to switch to
        // the page we just modified.
        $.mobile.changePage( $page, options );
    }
}

Answer 1

Для обновления страницы пользователь:

.trigger('create');

Подробнее здесь:

• http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

Создать противОбновление: важное различие Обратите внимание, что между созданием события и методом обновления есть важное различие, которое есть у некоторых виджетов.Событие create подходит для улучшения необработанной разметки, содержащей один или несколько виджетов.Метод обновления должен использоваться в существующих (уже улучшенных) виджетах, которыми манипулировали программно и которые необходимо обновить для соответствия пользовательскому интерфейсу.

Например, если у вас была страница, на которой вы динамически добавляли новый неупорядоченный список с помощьюАтрибут data-role = listview после создания страницы, инициирующий создание родительского элемента этого списка, превратил бы его в виджет в стиле listview.Если после этого программным способом было добавлено больше элементов списка, то при вызове метода обновления списка просмотра только эти новые элементы списка будут обновлены до расширенного состояния, а существующие элементы списка останутся нетронутыми.:

$('#mylist').listview('refresh');

Подробнее здесь:

• http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

Обновление списков Если вы добавляете элементы в просмотр списка, вам нужно вызвать метод refresh () для него, чтобы обновить стили и создать любые вложенные списки, которые будут добавлены.Например:

$('#mylist').listview('refresh');

Обратите внимание, что метод refresh () влияет только на новые узлы, добавленные в список.Это сделано из соображений производительности.Все элементы списка, которые уже были улучшены, будут игнорироваться процессом обновления.Это означает, что если вы измените содержимое или атрибуты уже расширенного элемента списка, они не будут отражены.Если вы хотите, чтобы элемент списка обновлялся, замените его на новую разметку перед вызовом функции refresh.

Обновление элементов формы:

• http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html

Обновление элементов формы В jQuery Mobile некоторые улучшенные элементы управления формой просто оформлены (входные данные), а другие являются пользовательскими элементами управления (выборками, ползунками), созданными и синхронизированными с собственным элементом управления.Чтобы программно обновить элемент управления формы с помощью JavaScript, сначала манипулируйте собственным элементом управления, а затем используйте метод refresh, чтобы сообщить расширенному элементу управления о необходимости обновить себя в соответствии с новым состоянием.Вот несколько примеров того, как обновить общие элементы управления формой, а затем вызвать метод обновления:

Флажки:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Радиоприемники:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

Выбирает:

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Ползунки:

$("input[type='range']").val(60).slider("refresh");

Переключатели (используются ползунки):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

Складные:

$('div[data-role=collapsible]').collapsible();