Использование PHP / MySQL для динамической загрузки списков <ul>в jQTouch - PullRequest
Новая
       289

Использование PHP / MySQL для динамической загрузки списков <ul>в jQTouch

0 голосов
/ 28 января 2011

Я пытаюсь создать веб-страницу, используя jQTouch, у которого список вариантов "home" ul будет статическим, но он будет динамически загружать списки по мере продвижения вниз по дереву.Я использую это для сайта инвентаризации автомобилей, где будет загружаться большая цепочка страниц.Я не хочу загружать все страницы при запуске (так как это для мобильных устройств), поэтому я пытаюсь динамически загружать свои страницы и их содержимое по мере продвижения.

У меня есть текущая страницакода работает, и протестировал его на Android 2.1 (работает в 100% случаев), iPad 4.2.1 (работает в 90% случаев) и iPod touch 4.2.1 (вообще не работает).Важные фрагменты кода перечислены ниже:

index.php: 

<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
  var jQT = $.jQTouch({
      icon: 'cht.png',
      statusBar: 'black',
      slideSelector: 'div#home a'
  });
</script>
<script type="text/javascript">
  function reloadUCD() {
          $('#ucd').load('usedcars.php', function() {
                  return false;
          });
  }
</script>
</head>
<body>
 <div id="home">
  <div class="toolbar">
    <h1>Welcome!</h1>
  </div>
  <ul class="edgetoedge">
   <li class="arrow"><a href="#ucd" onClick="reloadUCD();">Search Used Cars</a></li>
 </ul>
</div>
<div id="ucd">
  <div class="toolbar">
    <h1>Used Cars</h1>
    <a class="button back" href="#">Back</a>
  </div>
  <ul class="edgetoedge">
  </ul>
</div>
</body>

usedcars.php - это скрипт PHP, который возвращает данные MySQL в правильной форме, как показано ниже: 

<div class='toolbar'> 
<h1>Used Cars</h1> 
<a class='button back' href='#'>Back</a> 
</div> 
<ul class='edgetoedge'> 
<li class='arrow'><a href='#car'>Chevrolet</a></li> 
<li class='arrow'><a href='#car'>Chrysler</a></li> 
<li class='arrow'><a href='#car'>Dodge</a></li> 
<li class='arrow'><a href='#car'>Ford</a></li>   
<li class='arrow'><a href='#car'>GMC</a></li> 
<li class='arrow'><a href='#car'>Honda</a></li> 
<li class='arrow'><a href='#car'>Hyundai</a></li> 
<li class='arrow'><a href='#car'>Infiniti</a></li> 
<li class='arrow'><a href='#car'>Jeep</a></li> 
<li class='arrow'><a href='#car'>Lincoln</a></li> 
<li class='arrow'><a href='#car'>Nissan</a></li> 
<li class='arrow'><a href='#car'>Toyota</a></li> 
<li class='arrow'><a href='#car'>Volkswagen</a></li> 
</ul>

Из того, что я прочитал как на сайте jQuery, так и в других потоках в stackoverflow, способ, которым я обрабатывал функцию .load, должен заставить ее ждать, пока завершится загрузка, прежде чем позволить onClick продолжатьновая страница.Учитывая, что Android-устройство загружает его правильно каждый раз, заставляет меня думать, что я на правильном пути, но я упускаю какую-то ключевую проблему.

Что я делаю не так с моим кодом, чтобы не дать емуработает 100% времени на устройствах iPhone / iPt?Есть ли другой метод для логики, который я мог бы использовать для правильной загрузки?Кроме того, есть ли какая-то ошибка / проблема с jQTouch, которая мешала бы этому действовать правильно?

Заранее спасибо, Джош Хоган

1 Ответ

0 голосов
/ 02 марта 2011

Я недавно сделал нечто похожее на это. Я получаю объект json из контроллера и строю из этого меню. В html у меня есть скрытый элемент «dummy», но я клонирую его для создания списков.

HTML: 

<div id="home" class="current">
  <div class="toolbar">
    <h1>Home</h1>
  </div>
  <ul class="rounded">
    <li class="clone arrow">
      <a href="#"></a>
    </li>
  </ul>
</div>

Jquery: 

$('.clone').clone().addClass('populate').removeClass('clone')
$('.populate a').html("Bar").attr('id', '#foo')
...