topic Madson, in Software Archive

Show list item on a details page

madson_g_ — Mon, 21 Mar 2016 19:57:49 GMT

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

Hi Madson,

Diego_Calp — Tue, 22 Mar 2016 12:05:10 GMT

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

Hi,

madson_g_ — Wed, 23 Mar 2016 19:37:51 GMT

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

Madison, in Diego's text he

Pamela_H_Intel — Wed, 23 Mar 2016 19:44:11 GMT

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.

Madson -- change your

PaulF_IntelCorp — Wed, 23 Mar 2016 19:57:26 GMT

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

I fixed it changing

madson_g_ — Wed, 23 Mar 2016 20:06:00 GMT

I fixed it changing

function Viewitem(itemid){...}

window.Viewitem = function(itemid){....}

Even if I write the function before it didn´t work. But thanks anyway =)

You define it with an

Pamela_H_Intel — Wed, 23 Mar 2016 21:48:00 GMT

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?

Quote:Pamela H. (Intel) wrote

madson_g_ — Wed, 23 Mar 2016 23:51:53 GMT

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.

Hmm . . . if you zip your

Pamela_H_Intel — Thu, 24 Mar 2016 01:26:49 GMT

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

I am having an issue when I

madson_g_ — Thu, 24 Mar 2016 21:04:39 GMT

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?

Hi Madson,

Diego_Calp — Fri, 25 Mar 2016 11:27:31 GMT

Hi Madson,

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

Citação:Diego Calp escreveu:

madson_g_ — Fri, 25 Mar 2016 21:18:18 GMT

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

Hi,

Diego_Calp — Sat, 26 Mar 2016 11:57:00 GMT

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

Citação:Diego Calp escreveu:

madson_g_ — Sat, 26 Mar 2016 14:37:12 GMT

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!

Madson,

Pamela_H_Intel — Wed, 30 Mar 2016 17:46:34 GMT

Madson,

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

Pamela

Quote:Pamela H. (Intel) wrote

madson_g_ — Wed, 30 Mar 2016 23:26:15 GMT

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.