jQuery Мобильная страница не загружается, если на странице вызывается виджет jQuery UI (datepicker)?

Я использую jQuery Mobile в основном для создания этого сайта, но я включил пользовательский интерфейс jQuery для некоторых функций, отсутствующих в Mobile, например, для выбора даты (для части сайта, в основном доступного для рабочего стола формы). Все работает нормально при загрузке страницы напрямую, но я не могу на самом деле перейти на страницу из другого места на сайте - простое вращение загрузки AJAX. Я вижу ошибку в консоли: TypeError: $(...).datepicker is not a function. I Предположим, что связано с загрузкой страницы JQuery Mobile на страницу AJAX и что исправление связано с информацией об pageinit в информации API, но мне не хватает понимания, чтобы применить это.jQuery Мобильная страница не загружается, если на странице вызывается виджет jQuery UI (datepicker)?

Другими словами, как мне превратить <script> $("#mydatepicker").datepicker(); </script> во что-то, что работает на pageinit?

Edit: головка Страница по запросу:

<head> 
    <meta charset="utf-8"> 
    <title>Test Site</title> 

    <meta name="HandheldFriendly" content="True"> 
    <meta name="MobileOptimized" content="320"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="cleartype" content="on"> 

    <link rel="stylesheet" href="_css/normalize.css" /> 
    <link rel="stylesheet" href="_css/red_ui_variant/jquery-ui-1.10.3.custom.min.css" /> 
    <link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" /> 
    <link rel="stylesheet" href="_css/red_mobile_variant.css" /> 
    <link rel="stylesheet" href="_libraries/foundation-4.1.5.custom/css/foundation.css" /> 
    <link rel="stylesheet" href="_css/main.css" /> 

    <script src="_scripts/vendor/custom.modernizr.js"></script> 
    <script src="ckeditor/ckeditor.js"></script> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="_scripts/jquery-migrate-1.1.1.min.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 

</head>

источник

2013-05-05 Chaz

Добавить HTML HEAD на ваш вопрос? Я думаю, что знаю, что может быть проблемой, но сначала мне нужно увидеть ваш HTML. – Gajotres

@Gajotres Обновлено. Может быть, это просто порядок связывания? – Chaz

При использовании JQuery UI с JQuery Mobile, важно, чтобы инициализировать его перед JQuery Mobile, он не будет работать в любом другом случае. В основном ваша голова должна выглядеть следующим образом:

<head> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />   
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head>

Одна другая вещь, как вы упомянули, datapicker должны быть инициализированы внутри события jQM страницы. В этом случае вы можете использовать любое событие страницы, но обычно полезно придерживаться pageinit.

ли это так, если это ваш HTML:

<div data-role="page" id="index"> 
    <div data-theme="a" data-role="header"> 
     <h3> 
      First Page 
     </h3> 
     <a href="#second" class="ui-btn-right">Next</a> 
    </div> 

    <div data-role="content"> 
     <p>Date: <input type="text" id="datepicker" /></p>     
    </div> 

    <div data-theme="a" data-role="footer" data-position="fixed"> 

    </div> 
</div>

Тогда вы бы инициализировать datapicker так:

$(document).on('pageinit', '#index', function(){  
    $("#datepicker").datepicker(); 
});

А вот рабочий пример: http://jsfiddle.net/Gajotres/sSqKz/

последнее Если вы хотите узнать больше о событиях на странице jQuery Mobile, взгляните на мой другой ответ: jQuery Mobile: document ready vs page events

источник

2013-05-05 22:17:47 Gajotres

jQuery Мобильная страница не загружается, если на странице вызывается виджет jQuery UI (datepicker)?

ответ

Смежные вопросы