Reputation: 11297

How to create a jQuery Mobile Popup Alert mechanism?

I have been trying for hours to implement this and I am close but not there.

The goal is simple. To have a functional popup alert that can be used from everywhere within an app.

For example I have some code where I want to show a popup after a simple if test:

if (message.type == "Error") { //lets show a popup !!!

    $.mobile.changePage( "alert.html", {
    type: "post", 
    data: "alert_title="+message.type+"&alert_message="+message.content,
    transition: "pop",
    role: "dialog",
    reloadPage:true
});

As you can see I am passing in some custom data.

Here is the code for my alert page:

<!DOCTYPE html>
<html>

    <head>
        <title>Alert</title>
        <!--#include virtual="header.inc" -->

    <script>
    alert("test");
    $('#alert_dialog').live('pageinit', function (event) {
    $("#alert_title").text($.urlParam('alert_title'));
    $("#alert_body").text($.urlParam('alert_message'));
    });
    </script>

    </head>

    <body>
        <div data-role="page" id="alert_dialog">
        <div data-role="header">
            <h1>Alert</h1>

        </div>

        <div data-role="content">
            <h1 id="alert_title">alert title</h1>
            <p id="alert_body">alert body</p>
            <a href="#" data-role="button" data-rel="back">OK</a>        
        </div>
    </div>
    </body>

</html>

The problem I am running is that no javascript is getting executed on alerts.html page since it is injected to the DOM. Why would jQuery Mobile even allow us to send POST data using $.mobile.changePage when we cannot possibly use it?

Any help or suggestions?

Upvotes: 2