How to add click event to dynamic list view in PhoneGap?

Question

I have to add click event to the dynamic list view. When I click this list it redirect to more detail page. I am fetching the list of Hotels available in particular area and insert into list-view. Now when I click any particular list Hotels redirect to more detail page.
check the following image list view of list of hotels available. Every hotel have unique id So when I click any list it will use that unique hotel id and fetch more details information of that hotel from server and show on one dedicated page for that particular Hotel. My Question is How I add click even on dynamic list view and pass that unique Hotel Id so that later I am able to fetch more information from server using that Hotel Id.

enter image description here

My script code, How to add click even in dynamic list

<script> 
            $(document).ready(function(){ 
                $("#btnReg").click(function(){ 
                    $("#listHotelsOptions").empty();
                    var distance = document.getElementById('distance_id').value; 
                    var output=""; 
                    var hiddenId="";
                    $.ajax({ 
                            url:"http://192.168.1.4/Experiements/webservices/getHotels.php", 
                            type:"GET", 
                            dataType:"json", 
                            data:{type:"login", Distance:distance}, 
                            ContentType:"application/json", 
                            success: function(response){ 
                            console.log(response) 
                                $.each(response, function(index,value){                                                                 
                                          hiddenId+='<li  type="hidden">'+value.Hotel.Id+'</li>';
                                          output+='<li ><a href="#" style="text-decoration:none;"> <img alt="chef" src="./images/chef.min.png" width="20px" height="20px" >'+value.Hotel.Name+' has'+value.Hotel.Romms+'</a></li>';
                                }); 
        $("#listHotelsOption").append(output).listview().listview('refresh'); 
                        }, 
                            error: function(err){ 
                            alert(JSON.stringify(err)); 
                        } 
                    }) //ajax 
                }); //click 
            }); //ready 
</script>

You need delegation: http://stackoverflow.com/a/22041545/1420197 — Ionică Bizău, Jan 08 '15 at 05:40
@ Ionică Bizău, thanks for yr reply, but I am new in web technology, I need more specific.. — Neelabh Singh, Jan 08 '15 at 05:42
See the very basic sample, that too in plain javascript on event delegation. Hope that helps! — Rakesh_Kumar, Jan 08 '15 at 05:45

Kiren S · Answer 1 · 2015-01-08T07:03:13.827

1

Try this

$("#btnReg").on('click',function(){ 

}); //click

EDIT:

$.each(response, function(index,value){                                                                 
  hiddenId+='<li  type="hidden">'+value.Hotel.Id+'</li>';
  output+='<li class="hotel"  ><a href="#" style="text-decoration:none;"> <img alt="chef" src="./images/chef.min.png" width="20px" height="20px" >'+value.Hotel.Name+' has'+value.Hotel.Romms+'</a></li>';
}); 

$(".hotel").on('click',function(){ 

}); //click

EDIT2

$(".hotel").live('click',function(){ 

}); //click 

$(".hotel").delegate('click',function(){ 

}); //click

EDIT3

'<li class="hotel" id="'+value.Hotel.Id+'"  ><a href="#" style="text-decoration:none;"> <img alt="chef" src="./images/chef.min.png" width="20px" height="20px" >'+value.Hotel.Name+' has'+value.Hotel.Romms+'</a></li>';

$(".hotel").live('click',function(){ 
  var id = $(this).attr('id');
  alert(id);
}); //click

edited Jan 08 '15 at 07:03

answered Jan 08 '15 at 05:48

Kiren S

3,037
7
41
69

thanks for ur reply, I don't need click on #btnReg, but on $.each(response, function(index,value){ hiddenId+='
'+value.Hotel.Id+'
'+value.Hotel.Name+' has'+value.Hotel.Romms+'

Neelabh Singh

Jan 08 '15 at 05:50

$(".hotel").on('click',function(){ alert("1"); }); not working.. alert is nor showing.. – Neelabh Singh Jan 08 '15 at 06:12

now It is working, thanks, But my need is that when I click any list it get unique Id and using that Id I have to fetch the data and put that information into separate page Which has like name of Hotel ,price , image of rooms, and all other information, That page design will be same for every hotel and It will have id for every element like for price, image of room so I have to just assign new fetch value.. – Neelabh Singh Jan 08 '15 at 06:58

but is was not working. and var id = $(this).attr('id'); var id = $(this).attr('Id'); I try both..., please check edit 3 and make id to Id.. – Neelabh Singh Jan 08 '15 at 07:11

I am tring the following..$(".hotel").live('click',function(){ var id=$(this).attr('value.Chef.Id'); alert(id); }); – Neelabh Singh Jan 08 '15 at 07:16

ezanker · Accepted Answer · 2015-01-09T14:06:46.383

1

Instead of 2 LI elements, save the hotel id as a data-attribute of the visible LI:

$.each(response, function(index,value){                                                                 
    output+='<li data-hotelid="'+value.Hotel.Id+'"><a href="#" style="text-decoration:none;"> <img alt="chef" src="./images/chef.min.png" width="20px" height="20px" >'+value.Hotel.Name+' has'+value.Hotel.Romms+'</a></li>';
});

Instead of $(document).ready(function(){ in jQuery Mobile you should use one of the page events e.g. pagecreate. On page creation create a click handler for all LIs using event delegation so that dynamically created ones are included. Use the jQM method jqmData() to retrieve the id data-attribute from the LI:

$(document).on("pagecreate", "#yourpageid", function(){
    $("#listHotelsOption").on("click", "li", function(){
        //get hotel id
        var id = $(this).jqmData("hotelid");
        ... rest of click handler
    });

    $("#btnReg").on("click", function(){
       //your code to dynamically create list
    });  
});

Here is a working DEMO

edited Jan 09 '15 at 14:06

answered Jan 08 '15 at 19:40

ezanker

24,628
1
20
35

thanks for your reply, I have some confusion about your code, My requirement is when I click #btnReg, It will give all hotel available within the that area. #listHotelOption is unsorted list which contains all hotels after pressing #btnReg. Now which I click on any particular list as above It will redirect to the #hotelPage, which have more details. Now these details will be fill by fetching information from the database based on hotel_id. Hotel_id comes first time when pressing the #btnReg for every hotels. Thanks, I am waiting for reply... – Neelabh Singh Jan 09 '15 at 03:24
@neelabhsingh, that is exactly what my code does. Keep btnReg click as you had it but use the data-attribute for the hotel id (my first code sample), then add the click event for the LIs which gets the hotel id. You will need to provide the rest of the code that retrieves hotel details. – ezanker Jan 09 '15 at 13:55
@neelabhsingh, I have added a working demo: http://jsfiddle.net/ezanker/Lb2m318p/ – ezanker Jan 09 '15 at 14:07
@neelabhsingh, did you change "#yourpageid" to the actual page id of your data-role="page" DIV? – ezanker Jan 09 '15 at 19:27
thanks for such vivid explanation, I copied the our code and paste on eclipse it is not working.. – Neelabh Singh Jan 09 '15 at 20:29

Ravi · Answer 3 · 2015-01-08T06:39:31.950

0

put

 <a href="detail.html?id=' + value.Hotel.Id + '"> before your <li>

use this function to get id in detail page

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars; // this is your id value
    }

edited Jan 08 '15 at 06:39

answered Jan 08 '15 at 05:56

Ravi

34,851
21
122
183

Please elaborate this what we are doing. How I will get the hotel id from detail page. – Neelabh Singh Jan 08 '15 at 06:35
put your
within so that whenever it will work as link, and pass your hotel id with this using?id=Hotelid and get that id in detail page.

Ravi

Jan 08 '15 at 06:37

How to add click event to dynamic list view in PhoneGap?

3 Answers3

Linked