CODEWITHSUNDEEP
jqueryajaxjsonlistviewjquery-mobile
user2025934
user2025934

Reputation: 129

Jquery List Selection Variable

I have this Jquery list element being used with a sample app I'm using to teach myself coding. I have various values being rendered onto the list just fine. The problem that lies is that I'm trying to find out what item on the list the user selected so I can then go back to the database and pull all the information relating to that item out onto the screen.

The method I've tried doing it so far is this:

<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/test/login/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        listObject.itemID = $(this).attr('id'); 
                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
    $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
     });

   var listObject = {
      itemID : null
   }    
</script>

A Json array is created of all the list items and is being rendered on the screen. What I've managed to do then is that when a user makes a selection it goes onto a new page (index 2) and in index 2 it says what database field id is associated with that item selected.

I've been trying the last couple of days to find a method whereby I can take that id number and bring it back over to the database side but I've been having no luck - it either breaks my original list when I add new code or just nothing happens!

If anybody can help me out I'd really appreciate it! It seems like a core lesson that most people in my position should learn so if anybody would like to teach where to do from here it would be fantastic!

Thanks in advance for the help! Have a nice weekend everyone!

Upvotes: 0

Views: 133

Answers (2)

Gajotres
Gajotres

Reputation: 57309

You should do it like this:

$(document).on('pagebeforeshow', '#index', function(){
    $("#list").empty();
    var url="http://localhost/ce/json4.php";
    $.getJSON(url,function(json){
        //loop through deals                
        $.each(json.deals,function(i,dat){
            $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
            $(document).on('click', '#'+dat.dealid, function(event){  
                if(event.handled !== true) // This will prevent event triggering more then once
                {
                    dealObject.dealID = $(this).attr('id'); 
                    dealObject.dealName = $(this).find('h6').html();
                    dealObject.description = $(this).find('h5').html(); 

                    $.mobile.changePage( "offer.php", { transition: "slide"} );
                    event.handled = true;
                }
            });            
        });
        $("#list").listview('refresh');
    });
});

$(document).on('pagebeforeshow', '#index2', function(){       
    $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
    $('#index2 [data-role="content"]').find('input#name').val(dealObject.dealName);
    $('#index2 [data-role="content"]').find('input#did').val(dealObject.dealID);


});

var dealObject = {
    dealID : null,
    dealName : null,
    description: null
}

Upvotes: 1

Siddharth Gupta
Siddharth Gupta

Reputation: 897

You can use the localStorage to temporarily store the itemID, and retrive it in the next page.

localStorage['itemID'] = $(this).attr('id');

Then retrive it in the #index2:

itemID = localStorage['itemID'];

Upvotes: 0

Related Questions