Community
cancel
Showing results for 
Search instead for 
Did you mean: 
madson_g_
Beginner
140 Views

Show list item on a details page

Jump to solution

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 (2)
0 Kudos
1 Solution
Diego_Calp
Valued Contributor I
140 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

15 Replies
Diego_Calp
Valued Contributor I
141 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

madson_g_
Beginner
140 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

 

Pamela_H_Intel
Moderator
140 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.

PaulF_IntelCorp
Employee
140 Views

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

madson_g_
Beginner
140 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 =)

Pamela_H_Intel
Moderator
140 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?

madson_g_
Beginner
140 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.

Pamela_H_Intel
Moderator
140 Views

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

madson_g_
Beginner
140 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?

Diego_Calp
Valued Contributor I
140 Views

Hi Madson,

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

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

 

Diego_Calp
Valued Contributor I
140 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

madson_g_
Beginner
140 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!

Pamela_H_Intel
Moderator
140 Views

Madson,

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

Pamela

madson_g_
Beginner
140 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.

Reply