Software Archive
Read-only legacy content

Show list item on a details page

madson_g_
Beginner
536 Views

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();

 

0 Kudos
1 Solution
Diego_Calp
Valued Contributor I
536 Views

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

 

View solution in original post

0 Kudos
15 Replies
Diego_Calp
Valued Contributor I
537 Views

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

 

0 Kudos
madson_g_
Beginner
536 Views

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

 

0 Kudos
Pamela_H_Intel
Moderator
536 Views

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.

0 Kudos
PaulF_IntelCorp
Employee
536 Views

Madson -- change your reference to "viewItem" not "ViewItem"

0 Kudos
madson_g_
Beginner
536 Views

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 =)

0 Kudos
Pamela_H_Intel
Moderator
536 Views

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?

0 Kudos
madson_g_
Beginner
536 Views

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.

0 Kudos
Pamela_H_Intel
Moderator
536 Views

Hmm . . . if you zip your entire project and send it to me in a private message I will take a look.

0 Kudos
madson_g_
Beginner
536 Views

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?

0 Kudos
Diego_Calp
Valued Contributor I
536 Views

Hi Madson,

Could you post the code you are using to fill the item's detail page?

0 Kudos
madson_g_
Beginner
536 Views

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");
                
                
               });
              }
             });
            }

 

0 Kudos
Diego_Calp
Valued Contributor I
536 Views

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

0 Kudos
madson_g_
Beginner
536 Views

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!

0 Kudos
Pamela_H_Intel
Moderator
536 Views

Madson,

Are you saying your problem has been solved using  $("#event_infos").html();?

Pamela

0 Kudos
madson_g_
Beginner
536 Views

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.

0 Kudos
Reply