CODEWITHSUNDEEP
htmljquery-mobile
rosst400
rosst400

Reputation: 573

Jquery Mobile: Automatically display a popup / dialog

I am trying to create a dialog box or a popup message that is automatically shown of a certain condition is met. In my case, if $.POST fails, I want to display a message to the user. I have taken advice from this SO post and the popup is displayed, but the entire screen is covered with the popup and the close button doesn't do anything. 

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="contactsPage">
    <div data-role="header">
        <h1>My Contacts</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview" id="contactsList" data-filter="true">
        <script>
        var jqxhr = $.post("http://www.somewhere.com/...", 
        {
            org_id:"112211",
            max_last_modified_date:"2000-12-31 13:00:00 +0000"
        },
            function(data) {
                $('#contactsList li').remove();
                JSONResult = JSON.parse(data);
                for (var i = 0; i < JSONResult.contacts.contact.length; i++) {
                    //Do something
                }

                $('#contactsList').listview('refresh');
            });
            jqxhr.fail(function() {
                $('#dialogText').html("There was a problem connecting to the internet. Please check your mobile data or WIFI connection and try again."); 
                $.mobile.changePage("#connectionErrorDialog");
            });
        </script>
        </ul>
    </div>
</div>

<div data-role="dialog" id="connectionErrorDialog">
    <div id="dialogText"></div>
    <button id="closeDialog">Ok</button>
</div>

</body>
</html>

Is there any way to set the dimensions of the screen and make the close button work? Is this the right approach to automatically display a dialog / popup to the user? Any assistance would be greatly appreciated.

Upvotes: 1

Views: 15325

Answers (2)

BorisD
BorisD

Reputation: 2261

In the new version of Jquery Mobile there are Pop Ups

The great thing about those pop ups :

// open the popup
$("#popup").popup("open");


// close the popup
$("#popup").popup("close");

Upvotes: 5

Red2678
Red2678

Reputation: 3287

This is how I do it in JQM:

$.ajax({
    url: "http://www.somewhere.com/...",
    data: {
           org_id:"112211",
           max_last_modified_date:"2000-12-31 13:00:00 +0000"
          },
    sucess: function(data){
                $( '#contactsList li' ).remove();
                JSONResult = JSON.parse(data);
                for (var i = 0; i < JSONResult.contacts.contact.length; i++) {
                    //Do something
                }

                $( '#contactsList' ).listview('refresh');
            },
    error: function(textStatus){
           $( '#dialogText' ).html("There was a problem connecting to the internet. Please check your mobile data or WIFI connection and try again."); 
                $.mobile.changePage( "#connectionErrorDialog" );
          }
})

Upvotes: 0

Related Questions