Страница не отображается с помощью jQuery Mobile

У меня есть страница настроек, на которую пользователь перенаправляется после входа в систему. Эта страница, похоже, обычно появляется, когда нет jQuery Mobile, но с jQuery Mobile на странице отображаются только заголовки header.php и footer.php. Я просмотрел свой код несколько раз, и я все еще не могу найти ошибку. Пожалуйста, помогите мне найти ошибку и скажите, почему jQuery Mobile не отображает страницу.Страница не отображается с помощью jQuery Mobile

<html lang="en" class="ui-mobile ui-loading"><head><base href="http://www.example.com/user_menu.php"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"> 
     <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"> 
     <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script> 
      $(document).bind("mobileinit", function() { 
       // Navigation 
       // Page 
       $.mobile.page.prototype.options.headerTheme = "b"; 
       // Page header only 
       $.mobile.page.prototype.options.contentTheme = "c"; 
       $.mobile.page.prototype.options.footerTheme = "b"; 
       // Listviews 
       $.mobile.listview.prototype.options.headerTheme = "b"; 
       // Header for nested lists 
       $.mobile.listview.prototype.options.theme = "c"; 
       // List items/content 
       $.mobile.listview.prototype.options.dividerTheme = "d"; 
       // List divider 
       $.mobile.listview.prototype.options.splitTheme = "c"; 
       $.mobile.listview.prototype.options.countTheme = "c"; 
       $.mobile.listview.prototype.options.filterTheme = "c"; 
       $.mobile.listview.prototype.options.filterPlaceholder = "Filter data..."; 
       $.mobile.selectmenu.prototype.options.nativeMenu = false; 
      }); 

     </script> 
     <script> 
      //Disable url hash listening 
      $(document).bind("mobileinit", function() { 
       $.mobile.hashListeningEnabled = false; 
      }); 

     </script> 
     <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
     <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script> 
     <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script> 
     <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script> 
     <title>Luv Bid </title> 

     <meta name="description" content="example"> <meta name="keywords" content="example">   <link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script></head> 
    <body class="ui-mobile-viewport" screen_capture_injected="true"> 
     <div data-role="page" data-url="/user_menu.php" tabindex="0" class="ui-page ui-body-c"> 
      <div data-role="header" class="ui-header ui-bar-b" role="banner"> 
       <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Luv Bid</h1> 
       <a data-role="button" data-icon="home" href="index.php" class="ui-btn-left ui-btn ui-btn-up-b ui-btn-icon-left ui-btn-corner-all ui-shadow" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Auctions</span><span class="ui-icon ui-icon-home ui-icon-shadow"></span></span></a> 
       <div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation"> 
        <ul class="ui-grid-a"> 
         <li class="ui-block-a"> 
          <a href="index.php#about-help" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span" class="ui-btn ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Help</span></span></a> 
         </li> 
               <li class="ui-block-b"> 
          <a data-rel="external" href="logout.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span" class="ui-btn ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Logout</span></span></a> 
         </li> 
              </ul> 
       </div> 
       <a data-role="button" data-icon="gear" href="user_menu.php" class="ui-btn-right ui-btn ui-btn-up-b ui-btn-icon-left ui-btn-corner-all ui-shadow" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Settings</span><span class="ui-icon ui-icon-gear ui-icon-shadow"></span></span></a> 
          </div> 
      <div data-role="content" class="ui-content ui-body-c" role="main"> 
<div data-role="collapsible-set" class="ui-collapsible-set"> 
    <div data-role="collapsible" id="itemwatch" class="ui-collapsible ui-collapsible-collapsed"><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true"> 
       <div><h3>Auction</h3><h3>Delete</h3><ul><li>&nbsp;</li></ul> </div> 
    <div data-role="collapsible" id="paymenthistory" class="ui-collapsible ui-collapsible-collapsed"><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true"> 
       <div> 
      <h3></h3> 
      <ul data-role="listview" class="ui-listview"> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Payment information:    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Amount    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Type of payment    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Description    </li> 
      </ul> 
         <ul data-role="listview" class="ui-listview"> 
       <li class="ui-li ui-li-static ui-body-c"> 
        2011-08-18 11:40:25    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        1    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        paypal    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Adding funds to account    </li> 
      </ul> 
         <ul data-role="listview" class="ui-listview"> 
       <li class="ui-li ui-li-static ui-body-c"> 
        2011-08-19 12:13:03    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        1    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        paypal    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Adding funds to account    </li> 
      </ul> 
         <ul data-role="listview" class="ui-listview"> 
       <li class="ui-li ui-li-static ui-body-c"> 
        2011-08-19 12:47:04    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        1    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        paypal    </li> 
       <li class="ui-li ui-li-static ui-body-c"> 
        Adding funds to account    </li> 
      </ul> 
        </div> 
     <div> 
      <ul> 
       <li> 
        1 |     </li> 
      </ul> 
     </div> 
    </div></div> 
    <div data-role="collapsible" id="auctionwatch" class="ui-collapsible ui-collapsible-collapsed"><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true"> 
     <div><h3>Auction</h3><h3>Delete</h3><ul><li>&nbsp;</li></ul>  <ul><li> ipad 
<a data-role="button" data-icon="delete" href="auction_watch.php?delete=ipad" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all ui-shadow ui-corner-top ui-corner-bottom"><span class="ui-btn-inner ui-btn-corner-all ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Delete</span><span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span></a> 
</li></ul>  <ul data-role="listview" class="ui-listview"> 
      <li class="ui-li ui-li-static ui-body-c"> 
       <h4 class="ui-li-heading">Type in a keyword and we will e-mail you if a new auction matches the discription!</h4> 
      </li> 
      <li class="ui-li ui-li-static ui-body-c"> 
       <div> 
        Add a new item keyword    </div> 
      </li> 
     </ul> 
     <form action="user_menu.php?insert=true" method="post"> 
      <ul data-role="listview" class="ui-listview"> 
       <li data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#/user_menu.php&amp;ui-page=5-0" class="ui-link-inherit"><input type="text" size="60" name="add"><input type="submit" value="Insert" class="button"><p class="ui-li-desc"> 
         </p></a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li> 
      </ul> 
     </form> 
    </div> 
    <div data-role="collapsible" id="biddinghistory" class="ui-collapsible ui-collapsible-collapsed"><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true"> 
     Bids history <a name="history"></a> 
     <div> 
      <ul> 
       <li> 
        Bidder    </li> 
       <li> 
        Bid    </li> 
       <li> 
        Date and hour    </li> 
          </ul> 
        </div> 
    </div></div> 
    <!-- Edit Data --> 
    <div data-role="collapsible" id="editdata" class="ui-collapsible ui-collapsible-collapsed"><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true"> 
       <form id="form" name="signup" action="user_menu.php" method="post"> 
         <div> 
       Username   </div> 
      <div> 
       examplename    <input type="hidden" name="TPL_nick" value="examplename"> 
      </div> 
      <div> 
       <input type="text" id="name" name="TPL_name" value="Example Name"> 
      </div> 
      <div> 
       <input type="password" id="password" name="TPL_password" value=""> 
       (min 6 chars)   </div> 
      <div> 
       <input type="password" id="repeatpassword" name="TPL_repeat_password" value=""> 
       (min 6 chars)   </div> 
      <div> 
       <input type="text" id="email" name="TPL_email" value="[email protected]"> 
          </div> 
      <div> 
       <input type="text" name="TPL_address" id="address" value="123 Example Street"> 
      </div> 
      <div> 
       <input type="text" id="city" name="TPL_city" value="Exampletopia"> 
      </div> 
      <div> 
       <input id="prov" type="text" name="TPL_prov" value="StateOfExamples"> 
      </div> 
      <div> 
       <select name="TPL_country"> 
        <option value="">--Select here</option> 
        <option value=""></option> 
<option value="United States" selected="">United States</option> 
       </select> 
      </div> 
      <div> 
       <input type="text" id="zip" value="12345" name="TPL_zip" size="8"> 
      </div> 
         <div> 
       Activate Newsletter?    <div class="ui-radio"><input type="radio" name="TPL_nletter" value="1"></div> 
       Yes    <input type="radio" name="TPL_nletter" value="2"> 
       No    Check NO to unsubscribe to our Newsletter   </div> 
         <div> 
       <input type="submit" name="Input" value="Save"> 
       <input type="reset" name="Input"> 
      </div> 
      <div> 
       <input type="hidden" name="action" value="update"> 
      </div> 
     </form> 
    </div></div> 
    <!-- /Edit Data --> 
    <!-- Add Credits --> 
    <div data-role="collapsible" id="addcredits" class="ui-collapsible ui-collapsible-collapsed"><h2 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-btn-icon-left" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span" data-icon="plus" data-iconpos="left"><span class="ui-btn-inner"><span class="ui-btn-text">your balance: $ 3.00<span class="ui-collapsible-heading-status"> click to expand contents</span></span><span class="ui-icon ui-icon-plus ui-icon-shadow"></span></span></a></h2><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true"> 

     <h3>Add Funds</h3> 
     <ul data-role="listview" class="ui-listview"> 
         <li class="ui-li ui-li-static ui-body-c"> 
       $5.00 
      </li> 
      <li class="ui-li ui-li-static ui-body-c"> 
       <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
        <input type="hidden" name="custom" value="add_funds====33=="> 
        <input type="hidden" name="cmd" value="_s-xclick"> 
        <input type="hidden" name="notify_url" value="http://www.example.com/payment_processing.php"> 
        <input type="hidden" name="currency_code" value="USD"> 
        <input type="hidden" name="lc" value="EN"> 
        <input type="hidden" name="bn" value="PP-BuyNowBF"> 
        <input type="hidden" name="business" value="[email protected]"> 
        <input type="hidden" name="hosted_button_id" value="324u54"> 
        <input type="hidden" name="a3" value="1.00"> 
        <input type="hidden" name="p3" value="1"> 
        <input type="hidden" name="t3" value="D"> 
        <input type="hidden" name="src" value="1"> 
        <input type="hidden" name="sra" value="1"> 
        <input type="hidden" name="srt" value="2"> 
        <input type="hidden" name="notify_url" value="http://www.example.com/affiliates/plugins/payments/paypal/plugin_paypal_payments.php"> 

        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
        <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
       </form> 
      </li><li class="ui-li ui-li-static ui-body-c"> 
       $10.00 
      </li> 
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
       <input type="hidden" name="custom" value="add_funds====33=="> 
       <input type="hidden" name="cmd" value="_s-xclick"> 
       <input type="hidden" name="notify_url" value="http://www.example.com/payment_processing.php"> 
       <input type="hidden" name="currency_code" value="USD"> 
       <input type="hidden" name="lc" value="EN"> 
       <input type="hidden" name="bn" value="PP-BuyNowBF"> 
       <input type="hidden" name="business" value="[email protected]"> 
       <input type="hidden" name="hosted_button_id" value="9GR2437983"> 
       <input type="hidden" name="no_shipping" value="1"> 
       <input type="hidden" name="no_note" value="1"> 
       <input type="hidden" name="a3" value="1.00"> 
       <input type="hidden" name="p3" value="1"> 
       <input type="hidden" name="t3" value="D"> 
       <input type="hidden" name="src" value="1"> 
       <input type="hidden" name="sra" value="1"> 
       <input type="hidden" name="srt" value="2"> 
       <input type="hidden" name="notify_url" value="http://www.example.com/affiliates/plugins/payments/paypal/plugin_paypal_payments.php"> 

       <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
       <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
      </form> 
      <li class="ui-li ui-li-static ui-body-c"> 
       $25.00 Bid Package 
      </li> 
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
       <input type="hidden" name="custom" value="add_funds====33=="> 
       <input type="hidden" name="notify_url" value="http://www.luvbid.com/payment_processing.php"> 
       <input type="hidden" name="currency_code" value="USD"> 
       <input type="hidden" name="lc" value="EN"> 
       <input type="hidden" name="bn" value="PP-BuyNowBF"> 
       <input type="hidden" name="business" value="[email protected]"> 
       <input type="hidden" name="hosted_button_id" value="G24AQJSQKYK7G"> 
       <input type="hidden" name="cmd" value="_s-xclick"> 
       <input type="hidden" name="no_shipping" value="1"> 
       <input type="hidden" name="no_note" value="1"> 
       <input type="hidden" name="currency_code" value="USD"> 
       <input type="hidden" name="a3" value="1.00"> 
       <input type="hidden" name="p3" value="1"> 
       <input type="hidden" name="t3" value="D"> 
       <input type="hidden" name="src" value="1"> 
       <input type="hidden" name="sra" value="1"> 
       <input type="hidden" name="srt" value="2"> 
       <input type="hidden" name="notify_url" value="http://www.example.com/affiliates/plugins/payments/paypal/plugin_paypal_payments.php"> 

       <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
       <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
      </form> 
     </ul> 
    </div></div> 
</div></div></div></div></div></div></div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/user_menu.php&amp;ui-page=5-0" data-theme="c" data-count-theme="c" tabindex="0" class="ui-page ui-body-c"><div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner"><div class="ui-title"></div></div><div data-role="content" class="ui-content ui-body-c" role="main"><ul class="ui-listview"><li data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"> ipad 
<a data-role="button" data-icon="delete" href="auction_watch.php?delete=ipad" data-corners="true" data-shadow="true" data-iconshadow="true" data-inline="false" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all ui-shadow ui-link-inherit"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Delete</span><span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span></a> 
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li></ul></div></div></body></html>

UPDATE: Кажется, что user_menu.php имеет HTML выход как это должно иметь, но страница не будет загружаться. Я решил вместо этого разместить вывод HTML на странице user_menu.php. Некоторый код обрезается, поэтому я не перехожу к своему лимиту.

источник

2012-02-24 Cary

У вас есть теги 'data-' для соответствующих элементов для рендеринга в 'jQM'? – uday

можете ли вы опубликовать сгенерированный код? Вывод HTML? –

вместо того, чтобы показывать все, попробуйте отобразить только часть информации. Попробуйте использовать пустой шаблон, например, заголовок, контент и нижний колонтитул, а затем добавьте некоторый контент. Также вы можете опубликовать список файлов JavaScript и порядок файлов? Ядро jquery должно предшествовать jQuery mobile. – DG3

Вы используете хэш-навигацию за пределами JQM, случайно? Если это так, JQM может мешать.

Вот как вы можете отключить его на странице загрузки или готов:

//Disable url hash listening 
$(document).bind("mobileinit", function(){ 
    $.mobile.hashListeningEnabled = false; 
});

Может быть, что установка, или любое количество других параметров. Вы можете попробовать отключить все настройки по умолчанию и включить их один за другим, чтобы увидеть виновника. Не стоит тратить больше нескольких минут, чтобы проверить это. :)

источник

2012-02-24 21:06:20

Я считаю, что JQM по умолчанию использует свои возможности навигации по хешу. Например, если вы уже используете такой плагин, как jquery-hashchange, чтобы вы могли визуализировать страницы на основе расширения хэша URL (например, www.cool.com/#hash), JQM, вероятно, будет конфликтовать. Я отредактирую свой ответ, чтобы привести пример того, как отключить его. –

Это может быть ссылка на Ajax. Добавьте 'rel = external', чтобы отключить загрузку ajax-ссылки.

источник

2012-02-28 08:22:02 Richard

Страница не отображается с помощью jQuery Mobile

ответ

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