Jquery Mobile popup message from javascript

Question

I'm making a registration and login to a jquery mobile project and want it to display popup error messages. I've been hunting through here but can't seem to get anything to work. I tried using another question on here, hence the lnkDialog bit, but that doesnt work. I want to replace all the alerts with popup message box's. I currently have

<div data-role="page" data-theme="b">
    <div data-role="header">
        <a href="index.html" data-rel="back" class="ui-btn-left ui-btn  ui-btn-icon-notext ui-corner-all ui-icon-back">Back</a>
        <h1>Workout Planner</h1>
    </div
    <div role="main" class="ui-content">
       <h3>Register</h3>
        <label for="txt-uName">User Name:</label>
        <input type="text" name="uName" id="uName" value="">
        <label for="txt-password">Password</label>
        <input type="password" name="pWord" id="pWord" value="">
        <a data-role="button" id="registerSubmit">Register</a>
        <a id='lnkDialog' href="#dialog" data-rel="dialog" data-transition="pop" style='display:none;'></a>
     </div>
</div>

and my javascript is:

$(document).on('click', '#registerSubmit', function(event){

    username = $("#uName").val();

    if (username.length < 5) {

    $("#lnkDialog").click();
    $("#text").html("Username Length too short");
    } else if (username.length > 10) {
        alert ("Username must be less than 5 charcters");
    }else {
        password = $("#pWord").val();

        if (password.length < 5) {
            alert ("Password must be greater than 5 charcters");
        } else if (password.length > 10) {
            alert ("Password must be less than 5 charcters");
    } else {
        //otherstuff
    }
   }
  }
});

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

To replace an alert with a jQuery message box, I recommend looking at the dialog() function for JQuery UI.

You can write one of your alerts as a dialog by changing:

alert ("Password must be greater than 5 charcters");

Into this:

$("<div>Password must be greater than 5 charcters</div>").dialog();

I like the fact that you can customize the div element used by the dialog() function to look and feel however you like it to. You can throw colors, animations, timed functions etc at it.

Give that a try and let me know how it works. Any questions? Try asking in the comments below.

Sources: jQuery UI Alert Dialog as a replacement for alert()

edited May 23 '17 at 12:04

Community

1
1

answered Dec 30 '15 at 20:54

AGE

3,752
3
38
60

I tried this and nothing hapend, I enter a username of say KA and nothing popsup? Do I need anything in my page to show it? – ghost3h Dec 31 '15 at 12:26
@user3346481 can you copy/paste here **how** you did this? I am guessing the first reason this will not work is if you do not have jQuery imported into your `script` – AGE Dec 31 '15 at 14:39
@ghost3h hi I'm on vacation right now, but on Monday will get back home and help you out, happy new year! – AGE Jan 03 '16 at 01:03
@ghost3h I am back from vacation, ok so I have fixed your **[jsFiddle](https://jsfiddle.net/AGE/z0r3gqhq/)**. The #1 issue you were having was not importing the **[jQuery UI Library](http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js)** to your project. I also took the liberty to fix your code, you can find my comments in there. – AGE Jan 04 '16 at 15:05
@ghost3h awesome glad to hear that! – AGE Jan 05 '16 at 23:14

score 1 · Answer 2 · answered Dec 31 '15 at 10:19

You're trying to use the dialog widget. This widget is deprecated and will be removed in 1.5 > api: dialog
You can use the popup widget to open your "dialog". > api: popup

The easiest way to implement it is to hardcode the popup div into the page. This popup has to be inside of the page div. If you want to use popups on multiple pages, you have to call $( "#popup-outside-page" ).enhanceWithin().popup(); after the DOM is ready

Example Dialog Popup (not dismissible):

To open the popup you just have to call $("#popupDialog").popup("open")

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" data-history="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
    <h1>Delete Page?</h1>
    </div>
    <div role="main" class="ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
    <p>This action cannot be undone.</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
    </div>
</div>

The problem with this is I would have to hard code all of the Errors into the page's. Is there no way to do this from javascript itself? — ghost3h, Dec 31 '15 at 12:24
You can do everything with javascript. Add a div to the DOM and call the popupwidget to initialize it. `$("#yourID").popup();` That way you dont display it, like it would do with a normal div. Then fill it with your content and open it. You can style the popup, the overlay-theme ... you can control the position ... You can even reuse it after you close it, just remove the content, add the new and open it again. — Ridrog, Dec 31 '15 at 15:42

Jquery Mobile popup message from javascript

2 Answers2