Home/ Questions/Q 7509175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T22:49:47+00:00

It is practically impossible to function with jQuery mobile without the use of plugins

  • 0

It is practically impossible to function with jQuery mobile without the use of plugins and 3rd party code that attempts to provide very basic functionality that any mature framework would provide by default.

Lets take the example of dialogs. All I want to do is show case a simple dialog upon a particular event.

if (message.type == "Error") { //if an error , show a dialog

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

In the above example, we can never process this data because alert.html will be called in DOM rendering all javascript useless. Why even provide a data mechanism that cannot be processed effectively without using hacks? This is highly frustrating.

Oh and here is my alert.html code:

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without digressing into an argument lets analyze your code and why you might be having frustrations:

    1. You are calling $.mobile.changePage with data as a string of url params? If you used an object and specified type to url:

      $.mobile.changePage('alert.html', 
      type: 'url',
      data: {
          alert_title: message.type,
          alert_message: message.content
      },
      transition: 'pop',
      role: 'dialog',
      reloadPage: true
});

    Now jQM cleanly takes your data object and passes it as url parameters to your dialog, if you used type: ‘POST’ then it would send that data as form variables. If you were using any server side language you can cleanly handle that data – obviously using html there’s not much you can do.

    2. By cleanly handling data I mean we use jQM’s pageinit event handler, I’m not sure what sort of hacks you are referring to, but anyways on your page you’d attach any data you need to DOM elements and reference them in the pageinit handler. I think that’s pretty clean.

    3. Since you’re passing url paramters to an HTML page I assume you don’t use a server side language like PHP, Java, CF etc? I think using a JS src parser for url params is more of a hack then using a proper server side language. If you know any server languages why not use them? You can insert the params you’re passing directly inline, in the dialog HTML – much prettier than your method. So you’re using a hack and complaining that your hack doesn’t work in jQM, but the proper methods are hacks? Or maybe you think doing it properly, but writing a bit of PHP is just too much work?

    Just an FYI, jQuery Mobile only pulls in the code between your div[data-role=”page”], meaning your JS in the <head/> won’t be pulled in – you need to put that within the div

    • 0