WN - Jquery mobile och JSON

WN (https://www.wn.se/forum/index.php)

- Serversidans teknologier (https://www.wn.se/forum/forumdisplay.php?f=4)

- - Jquery mobile och JSON (https://www.wn.se/forum/showthread.php?t=1051513)

Jquery mobile och JSON

Hallo

Jag har trixat lite med Jquery Mobile på ledig tid och gillar verkligen att bygga enkla appar med hjälp av Phonegap. Nu har jag kommit till en nivå där jag vill börja skapa appar med dynamiskt innehåll från en webbserver och vill därför ha lite råd och tips.

Är JSON rätt väg att gå? Finns det andra sätt att hämta data ur tex en MySQL in i appen?

Har sökt efter vettigt material anpassat för nybörjare för JSON och Jquery Mobile men hittar inget som passar mig. Någon som har tips på vart man kan hitta detta?

Jag hittade en sajt (http://api.omvard.se/docs/JsonExample) som har ett enkelt JSON exempel som jag försökte reproducera i Xcode via Phonegap... men det gick inge vidare. Antar att jag gör något nybörjarmisstag av något slag.

Berätta gärna lite mer utförligt vad som ska göras m m för att det beror lite på vad som ska hämtas och när.

Kanske behöver man mellanlagra i en databas och skriva ut till en sida om det är stora mängder data.

Det hade nog vart bäst att lära sig plocka ut senaste nyheter från Wordpress eller liknande först, och sedan börja laborera med eget. Är mest kopplingen mellan app och webbserver jag vill fokusera på nu.

Fixar phonegap Jquery mobile? Coolt.
Jag utvecklar med Jquery mobile "manuellt" och kan inte hur man arbetar i PhoneGap tyvärr så kan inte säga så mycket om det.

Json är bra för din del, bara hämta med ajax-funktionen i jquery.
Om du vill göra mer avancerat sparar du även ned saker i telefonens databas så kan man se saker även när man är offline.

Släppte själv min första app byggt med jquery mobile och phonegap idag så det funkar bra. Var enkelt att komma igång med :)

Ja det är coolt! Ännu coolare när man kan hämta data från en webbserver via javascript/jquery :)

Ingen annan med bra tips på tutorials/material för nybörjare?

Citat:

Ursprungligen postat av nosnaj (Inlägg 20427915)

Kul!

Har försökt att följa detta men lyckas inte riktigt med det jag vill?
http://api.jquery.com/jQuery.getJSON/

Citat:

Ursprungligen postat av Hellsing (Inlägg 20427917)

Kul!

Har försökt att följa detta men lyckas inte riktigt med det jag vill?
http://api.jquery.com/jQuery.getJSON/

Vad får du för fel?
Bra tips är kolla alla anrop med något developer tool, samt även debugga med error-handlers på funktionerna.

Jag hittade några bra resurser. Denna sida är bäst eftersom den lämnar exakt kod för att visa nyheterna från Wordpress på vilken sida som helst:
http://www.fldtrace.com/wordpress/di...son-and-jquery

Jag har följt instruktionerna där, men om jag vill ändra koden nedan för att lägga ut nyheterna i en <li> istället, hur gör jag då?

Försökte lägga med "<ul data-role="listview" data-inset="true"><li>" precis framför länken, men det ändrar inte formateringen alls.

Kod:

<script type="text/javascript">

var MYBLOG_LIMIT = 1;

var MYWRAPPER_CLASS = 'homeblog';

 

var WP={open:function(b){var a={posts:function(){var d=MYBLOG_LIMIT;var e=0;var c={all:function(g){var f=b+"/api/get_recent_posts/";f+="?count="+d+"&page="+e+"&callback=?";jQuery.getJSON(f,function(l){var k=l.posts;for(var j=0;j<k.length;j++){var h=k[j];h.createComment=function(i,m){i.postId=h.id;a.comments().create(i,m)}}g(k)})},findBySlug:function(f,h){var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i){h(i.post)})},limit:function(f){d=f;return c},page:function(f){e=f;return c}};return c},pages:function(){var c={findBySlug:function(d,f){var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g){f(g.page)})}};return c},categories:function(){var c={all:function(e){var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.categories)})}};return c},tags:function(){var c={all:function(e){var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f){e(f.tags)})}};return c},comments:function(){var c={create:function(f,e){var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g){e(g)})}};return c}};return a}};

 

var blog = WP.open('http://www.fldtrace.com/');

blog.posts().all(function(posts){

  for(var i = 0; i < posts.length; i++){

    jQuery('.'+MYWRAPPER_CLASS).append(function(){

      return (posts[i].thumbnail) ? '<a class="lastpost_title" href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a><a href="'+posts[i].url+'"><img src="'+posts[i].thumbnail+'"/></a>' : '<a href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></a>';

 

    });

  }

});

</script>

Jag lade till

Kod:

.listview('refresh');

direkt efter append och nu verkar det fungera bättre.