jQuery Mobile 1.3 Панель не работает после изменения страницы

Question

У меня, похоже, проблемы с программным открытием и закрытием панели JQM 1.3.

EDIT: Это для JQM 1.3.x не 1.4+

Это довольно трудно объяснить, так что я только что сделал скрипку :)

Там есть много происходит в скрипкой , но это всего лишь образец гораздо большего приложения и передает проблему.

Как повторить:

1. Перейти к скрипке
2. На Fiddle открыть панель и перейти на вторую страницу
3. На второй странице открытой панели и перейти на страницу One
4. Попробуйте открыть Теперь панель на первой странице ничего не делает.

Браузеры Затронутые:

EDIT: Это, кажется, должно быть зафиксировано в Chrome 30.0.1599.101 м

• Chrome 28.0.1500.95 м
• IE 10.0.9200.16635
• Safari // Latest Ver
• Android WebView (4.2.2)

Браузеры НЕ Затронутые:

• Firefox 23
• Opera 12,16

Ссылка на Fiddle:

http://jsfiddle.net/q2YH3/

Ссылка на другие сообщения

https://github.com/jquery/jquery-mobile/issues/6308

http://forum.jquery.com/topic/panel-not-responding-after-page-change

EDIT: Так Firefox дает мне ошибку, что ни Chrome или IE делать.

Когда я нажимаю, чтобы вернуться к первой странице, я получаю:

Type Error: elem is undefined

Ошибка брошенной JQ 1,9.1, я проследить его обратно к этому:

A method for determining if a DOM node can handle the data expando 
    acceptData: function(elem) { 
     // Do not set data on non-element because it will not be cleared (#8335). 
     if (elem.nodeType && elem.nodeType !== 1 && elem.nodeType !== 9) { 
      return false; 
     } 

     var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ]; 

     // nodes accept data unless otherwise specified; rejection can be conditional 
     return !noData || noData !== true && elem.getAttribute("classid") === noData; 
    } 
` 

Обратите внимание на:

Не устанавливать данные о неприменении элемента, поскольку он не будет очищен (# 8335).

Github Issue Ссылка: https://github.com/jquery/jquery/pull/1232

OG Код:

$('.showMenu').on('click', function(){ 
$.mobile.loading('hide'); 
$.mobile.activePage.find('#'+$.mobile.activePage.attr('id')+'P').panel("toggle"); 
}); 

$('.btnMenuItem').on('click', function(event){ 
myPgActions.nav(event, function(target){ 
    $.mobile.changePage(target); 
}, false); 
}); 

var myPgActions = {}; 

myPgActions = { 
nav: function(event, callback, manualHash){ 
    var PID = $.mobile.activePage.attr('id'), 
    target = (!!event) ? event.target.name : manualHash;  
    $("#"+PID+"P").panel("close"); 
    if(PID != 'loading') $("#"+PID+"Iframe").hide();   

    if(PID == target){ 
     $("#"+PID+"Iframe").hide('fast', function(){ 
      $("#"+PID+"Iframe").attr('src', ""); 

      myPgActions.update(PID, target, 'refresh', function(target){ 
       callback(target) 
      }); 
     }); 

    }else{ 

     this.update(PID, target, 'change', function(target){ 
      callback(target); 
     }); 

    } 

},// end get 

update: function(PID, target, type, updateCallback){ 

    var ifReady = $.Deferred(); 

    if(type == 'refresh'){ 

     this.buildUrl(PID, function(url){ 

      $('#'+PID+'Iframe').attr('src', url); 
      ifReady.resolve();   

      $.when(ifReady).then(function(){ 
       updateCallback('#'+PID+'Iframe')   
      }); 
     }); 

    }else if(type == 'change'){ 

     this.buildUrl(target, function(url){ 
      $('#'+target+'Iframe').attr('src', url); 
      ifReady.resolve(); 
     }); 

     $.when(ifReady).then(function(){ 
      updateCallback('#'+target); 
     }); 
    } 
}, // end set 
buildUrl: function(page, buildCallback){ 
    switch(page){ 
     case 'dash':   
      var mobileSiteUrl = 'URL with options for iframe' 
      setTimeout(function(){buildCallback(mobileSiteUrl);},25); 
     break; 
     case 'local': 
      var mobileSiteUrl = 'URL with options for iframe' 
      setTimeout(function(){buildCallback(mobileSiteUrl);},25); 
     break; 


    }// End Switch 
} 
}// End Obj 

Answer 1

была такая же проблема, панель не отображается после изменения страницы.

Две небольшие изменения могут исправить:

, что я сделал, чтобы изменить панель из ID = «MyPanel» в класс = «MyPanel», затем изменил вызов на панели, чтобы открыть: $ ('. MyPanel: visible'). Panel ('open'); - вот и все!

Проблема заключается в том, что панель должна находиться внутри страницы jQuery, и после перехода, если у вас есть панель, установленная на целевой странице, у вас на самом деле есть две (или более) панели с одинаковым идентификатором который неправильный или такой же класс который штраф. Таким образом, вы просто меняете идентификатор на класс и вызываете видимый.

Взял меня слишком долго, надеюсь, это сэкономит время кому-то еще.

Answer 2

Я играл с вашим кодом немного. Я заметил, что если я поставлю предупреждение внутри вашей функции обновления, это все исправит. Поэтому я исследовал, почему предупреждение будет делать работу программы, и нашел эту страницу. http://ubuntuforums.org/archive/index.php/t-930002.html

«Вы, вероятно, следует знать, что оценка JavaScript имеет тип„смотреть вперед“:. Сценарий уже работает, когда она еще не определена (и в то время как страницы сама по-прежнему оценивается) Теперь, когда почему рекомендуется отбрасывать все ссылки на скрипты в разделе вашей страницы, так как это приведет к полной оценке JavaScript до того, как вы (обычно) можете вызвать функцию (обработчики событий) и, следовательно, избегать глупых «неопределенных» ошибок.

Теперь сигнал alert(); имеет 2 эффекта: (1) он всплывает в окне сообщения (пока что так хорошо); но (2) он останавливает поток, используемый JavaScript! Однако браузер о ther потоки по-прежнему будут продолжаться (HTML-рендеринг ...). Таким образом, может быть одним из тех случаев, когда вам понадобится более элегантный метод остановки, который должен выполнять только этот (часть) сценарий, когда документ полностью загружен; »

Решение, которое они предлагают, ваш скрипт внутри из. Или с помощью «StateChanged() функции запроса AJAX HTTP».

Answer 3

Ну я upvoted @ поста A.sharif «s, как он получил передачи в моей голове крутится.

в проблема заключается в том, что обратный вызов функции «BuildUrl» выполнялся до того, как была создана переменная URL.

I you ght Я позволил достаточно времени с 25ms, но это не так. Я наткнулся на время до того, как обратный вызов будет выполнен до 600 мс, и теперь он отлично работает.

Я уверен, что есть более элегантное решение, но это то, что я получил;)

Новый Fiddle:

http://jsfiddle.net/t8zyQ/

Что изменилось было значение в setTimeout() до .

Изменен код:

buildUrl: function(page, buildCallback){ 
    switch(page){ 
     case 'dash':   
      var mobileSiteUrl = 'URL with options for iframe' 
      setTimeout(function(){buildCallback(mobileSiteUrl);},600); 
     break; 
     case 'local': 
      var mobileSiteUrl = 'URL with options for iframe' 
      setTimeout(function(){buildCallback(mobileSiteUrl);},600); 
     break; 


    }// End Switch