Загрузка внешних данных с помощью JSON для JQTouch

Я пытаюсь загрузить некоторые внешние данные в приложение JQTouch с помощью JSON. Моя проблема в том, что я не знаю, что использовать js и куда ее поместить.Загрузка внешних данных с помощью JSON для JQTouch

Мой html очень прост - несколько разделов для страниц в приложении.

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> google.load("jquery", "1.4.2"); </script> 
    <script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script> 
    <script type="text/javascript"> $.jQTouch(); </script> 
    <script src="javascripts/cricket.js" type="text/javascript"></script> 
    <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> 
    <style type="text/css" media="screen">@import "themes/apple/theme.css";</style> 
    <title>Cricket</title> 

</head> 
<body> 

<!-- "Main Menu" --> 
<div id="home" class="current"> 
<div class="toolbar"> 
    <h1>Cricket</h1> 
</div> 

<ul class="rounded"> 
<li class="arrow"><a href="#clubs">Clubs</a></li> 
    <li class="arrow"><a href="#fixtures">Fixtures</a></li> 
<li class="arrow"><a href="#twitter">Twitter</a></li> 
</ul> 

<ul class="rounded"> 
<li class="arrow"><a href="#about" class="slideup">About</a></li> 
</ul> 


</div> 


<!-- "Clubs" - Will contain the list of clubs --> 
<div id="clubs"> 

<div class="toolbar"> 
     <h1>Clubs</h1> 
     <a class="button back" href="#">Back</a> 
</div> 

<div id="clubslist"> 

    Loading.... 

</div> 


</div> 

<!-- "Fixtures" - Will contain the list of fixtures --> 
<div id="fixtures"> 
<div class="toolbar"> 
    <h1>Fixtures</h1> 
    <a class="button back" href="#">Back</a> 
</div> 

<ul class="rounded"> 
    <li>Loading....</li> 
</ul> 

</div> 

<!-- "Twitter" - Will contain the tweets --> 
<div id="twitter"> 
<div class="toolbar"> 
    <h1>Twitter</h1> 
    <a class="button back" href="#">Back</a> 
</div> 

<ul class="rounded"> 
    <li>Loading tweets....</li> 
</ul> 

</div> 


<!-- "About" - Will contain info about the app/contact --> 
<div id="about"> 
<div class="toolbar"> 
    <h1>About</h1> 
    <a href="#" class="back">Back</a> 
</div> 
just some text 
</div>

Тогда это сценарий, который я думаю, что нужно использовать для загрузки внешних данных (от clubs.php).

<script type="text/javascript"> 
      $.getJSON('http://www.mydomain.com/clubs.php', function(data) { 

    $.each(data, function(i,item){ 
       $('clubslist').append('<li>' + item.club_name + '</li>'); 

      }); 
    }); 

    </script>

Мой вопрос: где мне нужно, чтобы putthis и как он срабатывает? Я думаю, мне нужно поместить это в отдельный JS-файл (у меня уже есть один, называемый cricket.js, с которым я связан в заголовке html-файла). Тогда я предполагаю, что мне нужно что-то, чтобы запустить JS ... например, PageAnimationEnd или подобное?

Для чего это стоит, это то, что clubs.php возвращает

{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}

Моей идеальную ситуации в том, что, когда пользователь нажимает на ссылку "клубной на странице меню, это запускает страницу анимацию, где тогда пользователь видит «Загрузка». В фоновом режиме Javascript запускается, извлекает данные из clubs.php, а затем добавляет его в div #clublist.

Я думаю, что я рядом, но отсутствует окончательный штрих. Все предложения оценили! Tom

источник

2011-12-17 Hardball

На моих страницах я делаю следующее: в этом примере я вытаскиваю таблицу из скрипта.

function prevOrders() 
    { 
    $("#chkPrevOrd").html('Please wait') 
    $.ajax({ 
     type: "POST", 
     url: "http://"+document.domain+"/store.php", 
     data: { method: "prevOrders"},  
     dataType: "json", 
     timeout: ajaxTimeout, 
     success: function(data){ 
     if (data.prevOrders) 
      { 
      $("#prevOrderStatus").html(data.prevOrders); 
      $("#chkPrevOrd").html('Update')  
      }    
      }, 
     error: function() { 
     alert('This is taking too long. You could try again now, or wait and try again later.'); 

      } 
});  
    }

#prevOrderStatus является DIV на этой странице #chckPrevOrd просто кнопка, чтобы позволить пользователю знать, что происходит. вы бы JQT.Goto ('cointainer div для #chkPrevOrd'), чтобы перейти на эту страницу, если #chkPrevOrd был фактически на другой странице.

источник

2011-12-20 00:37:47 maxum

Отлично, спасибо за это, я отдам его. Я правильно понял, что вы на самом деле форматируете таблицу html в php-файле, а затем передаете готовую таблицу html в приложение? – Hardball

Загрузка внешних данных с помощью JSON для JQTouch

ответ

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