CODEWITHSUNDEEP
javascriptandroidjqueryhtmljquery-mobile
Daniel Klöck
Daniel Klöck

Reputation: 21137

Showing popUp after clicking on listView item

I have created a list, which when a item is clicked, a popup is shown.

The problem starts when using the code on a mobile device (where the screen is relatively small). When a list item is hit, very often, also a button in the popop is hit.

What is the best way to deactivate the buttons until the user realizes the popup even did show?

Try the code here.

The HTML code:

<div data-role="page" id="kon">
    <div data-role="content">
        <ul data-role="listview" id="kon_list" data-icon="false">           
        </ul>   

        <div data-role="popup" id="contactMsgBox" data-transition="pop">
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                    <h3 class="ui-title">Ansprechpartner kontaktieren</h3>
                    <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" style="width:95%">Anrufen</a> <br />
                    <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" style="width:95%">E-Mail senden</a> <br />    
                    <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" style="width:95%">Abbrechen</a>  
                </div>
        </div>
    </div>      
</div>

The JS code:

kontakts = JSON.parse('[{"mail":"[email protected]",'+
                    '"name":"test test","ort":"Stuttgart","tel":"0123 1234-123"},{"mail":"[email protected]",'+
                    '"name":"test2 test2","ort":"Lauf","tel":"0123 1234-123"}]');

var listHTML = "";
for(var i=0; i<kontakts.length; i++) 
{
    //set the menu item
    listHTML = listHTML + "<li tel='"+kontakts[i].tel+
        "' mail='"+kontakts[i].mail.toLowerCase()+"'><h3>" + kontakts[i].ort + 
        "</h3><p>" + kontakts[i].name + "<br />Telefon\t" + kontakts[i].tel + 
        "<br />E-Mail\t" + kontakts[i].mail.toLowerCase() + "</p></li>";        
}

//set items and reload
$('#kon_list').html(listHTML);
$('#kon_list').listview('refresh');

//bind list items
$('#kon_list').children('li').bind('touchstart mousedown', function(e) {
    //alert('Selected Tel=' + $(this).attr('tel') + 'Mail=' + $(this).attr('mail'));
    $("#contactMsgBox").popup("open");
});

Upvotes: 1

Views: 782

Answers (2)

Daniel Kl&#246;ck
Daniel Kl&#246;ck

Reputation: 21137

The problem is happening because mobile browsers wait approximately 300ms (apparently 500ms on samsung galaxy s2) from the time that you tap the button to fire the click event. This wait was causing both to be tapped, the item, and the popup button.

The solution is to stop the browser from waiting. This can be accomplished with the fastclick library

Upvotes: 0

Simon
Simon

Reputation: 6363

You could change

$('#kon_list').children('li').bind('touchstart mousedown', function(e) {

to

$('#kon_list').children('li').bind('vclick', function(e) {

That way the popup won't show until the user lifts his finger or releases the mouse button.

Upvotes: 1

Related Questions