- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am populating a list with json data. It´s working fine. Now I want to show the details of each item from the list on another page. How do I set the index to show exactly the corresponding item data?
function Lista(){ $.ajax({ type: "post", url: $server+"/check.php", data: dataString, success: function(result, jqXHR) { var eventos = $.parseJSON(result); $.each(eventos, function(index, item){ //var nome = item.NOME; var list_item = '<a class="item item-thumbnail-left item-icon-right" href="#" id="list_item">'; list_item += "<img src="+item.ARQUIVO+" id='thumb'>"; list_item += '<h2>'+item.NOME+'</h2>'; list_item += '<p>'+item.DATA+'</p>'; list_item += '<i class="icon ion-chevron-right icon-accessory" id="ion-chevron-right"></i>'; list_item += '</a>'; if(!item.ERRO){ $("#page_78_74").append(list_item); activate_page("#list"); }else{ navigator.notification.alert(item.ERRO, "", "Ops!"); } /* HERE WAS MY TRY TO SHOW EACH ITEM DATA, BUT IT SHOWS ALL THE VALUES AGAIN */ $("#list_item").on("click", function(){ var evento = '<h3 id="event_name">'+item.NOME+'</h3>'; $("#event_infos").append(evento); activate_page("#detailspage"); }); }); }, error: function(jqXHR, status){ $("#situacao").html("<center>error</center>"); } }); } new Lista();
- Tags:
- HTML5
- Intel® XDK
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Madson,
What I usually do is:
var list_item = '<a class="item item-thumbnail-left item-icon-right" href="javascript:viewItem('+item.ID+')" id="list_item">'
...
I'm assuming that you have an ID field key to identify the record, change this accordingly.
function viewItem(itemid){
//select from database with itemid
//populate the page
//activate_page
}
Hope this helps.
Regards,
Diego
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Madson,
What I usually do is:
var list_item = '<a class="item item-thumbnail-left item-icon-right" href="javascript:viewItem('+item.ID+')" id="list_item">'
...
I'm assuming that you have an ID field key to identify the record, change this accordingly.
function viewItem(itemid){
//select from database with itemid
//populate the page
//activate_page
}
Hope this helps.
Regards,
Diego
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi,
I´m getting this message: Uncaught ReferenceError: Viewitem is not defined. Have tried to change somethings but had no success
Diego Calp wrote:
Hi Madson,
What I usually do is:var list_item = '<a class="item item-thumbnail-left item-icon-right" href="javascript:viewItem('+item.ID+')" id="list_item">'
...I'm assuming that you have an ID field key to identify the record, change this accordingly.
function viewItem(itemid){
//select from database with itemid
//populate the page
//activate_page}
Hope this helps.
Regards,
Diego
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Madison, in Diego's text he uses "viewitem" above the definition because he was just clarifying that you need the definition. The function definition must be processed before you try to use it, otherwise it will be undefined.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Madson -- change your reference to "viewItem" not "ViewItem"
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I fixed it changing
function Viewitem(itemid){...}
to
window.Viewitem = function(itemid){....}
Even if I write the function before it didn´t work. But thanks anyway =)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You define it with an uppercase 'V'. When you use it, are you using 'V'?
<edit> Ah, never mind. I see in your error message that you use upper case.
So . . . if you define it in a JavaScript file, do you include that .js in the head of your index.html?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Pamela H. (Intel) wrote:
You define it with an uppercase 'V'. When you use it, are you using 'V'?
<edit> Ah, never mind. I see in your error message that you use upper case.
So . . . if you define it in a JavaScript file, do you include that .js in the head of your index.html?
Yes, it is. It's working right now with my latest answer. Thanks.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hmm . . . if you zip your entire project and send it to me in a private message I will take a look.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am having an issue when I use a back button on header. When I press it, it works fine taking me back to list page. But when I click on another list item the last one is kept there. According I keep clicking on each list item, they are being added one below the other. It should show me just the last one clicked.
I have tried to empty(); the page but then nothing is showed. Just a blank page. How can I solve this issue?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Madson,
Could you post the code you are using to fill the item's detail page?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Diego Calp wrote:
Hi Madson,
Could you post the code you are using to fill the item's detail page?
Ok, the code below and it is after the code that populates the list, inside success function that I posted in the beginning of the question.
window.Viewitem = function(itemid){ var dataStringID = "id="+itemid+"&get_id="; $.ajax({ type: "post", url: $server+"/check.php", data: dataStringID, success: function(resultID, jqXHR){ var results = $.parseJSON(resultID); $.each(results, function(index, item){ var evento = '<div class="widget uib_w_5 scale-image d-margins" data-uib="media/img" data-ver="0" id="file_div"><figure class="figure-align"><img src="'+item.ARQUIVO+'" alt="image" id="file"><figcaption data-position="bottom"></figcaption></figure></div>'; evento += '<h4 id="event_name">'+item.NOME+'</h4>'; evento += '<p>Evento</p>'; evento += '<h4>'+item.LOCAL+'</h4>'; evento += '<p>Local</p>'; $("#event_infos").append(evento); activate_page("#detailspage"); }); } }); }
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi,
Instead of
$("#event_infos").append(evento);
try with
$("#event_infos").replaceWith(evento);
append adds the html to DOM element, because of this you are getting acumulated items.
Regards,
Diego
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Diego Calp wrote:
Hi,
Instead of$("#event_infos").append(evento);
try with
$("#event_infos").replaceWith(evento);
append adds the html to DOM element, because of this you are getting acumulated items.
Regards,
Diego
It didn´t work. It keeps showing me the same event all the times. It works with $("#event_infos").html();
Thanks man!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Madson,
Are you saying your problem has been solved using $("#event_infos").html();?
Pamela
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Pamela H. (Intel) wrote:
Madson,
Are you saying your problem has been solved using $("#event_infos").html();?
Pamela
Talking about the back button issue? Yes.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page