PHP included JavaScript is not working properly in Jquery Mobile

Question

In my jquery mobile web app I include a Login-Form on every page the user is navigating to. I do that so that the user could login at every time he wants to, not just on the start page.

Since I do the Form submitting procedure with my very own Ajax logic, I disabled the Jquery Mobile Ajax logic with data-ajax="false" on the Form. The Ajax logic is implemented with JavsScript. On the start page everything works fine, but if I navigate to another page (through a link on the start page), my JavaScript is not firing anymore, but the form is submitted via the Jquery mobile own Ajax logic (and therefore it don't works).

The code (which I include at every page) looks like this:

   <div data-role="fieldcontain">
        <form id="loginForm" data-ajax="false" onsubmit="login();return false;">
            <div data-role="fieldcontain">
                <h2>Login</h2>
                <label for="textinput1">
                    Email
                </label>
                <input name="emaillogin" id="textinput1" placeholder="Email" value=""
                type="text">
                <label for="textinput2">
                    Password
                </label>
                <input name="passwordlogin" id="textinput2" placeholder="Password" value=""
                type="password">
            </div>
            <input type="submit" data-icon="ok" data-iconpos="left" value="OK">
            <input type="hidden" name="inputCase" value="login">
        </form>
    </div>

The JavaScript (which is just at the end of the Code stated above) looks like that:

<script>
function login()
{
    var request = $.ajax({
      url: "../case.php",
      type: "POST",
      data: $('#loginForm').serialize(),
      dataType: "json"
    });

    request.done(function(msg) {
            if(parseInt(msg.status)==1)
            {
                //top_notification("Willkommen zurück!","success");
                window.location="index.php";
            }
            else if(parseInt(msg.status)==0)
            {
                alert(msg.text);
            }
            else {
                alert("Gibts nicht");
            }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Fehler");
    });
}
</script>

Maybe I got the Jquery Mobile "we replace just the page-div with the other page-div from the new URL" thing wrong, but I understand it in that way that my whole JS logic will also be pulled from the new ressource.

EDIT Thanks. I have updated my JS code, which looks now like that:

<script>
$(document).on('pageinit', '[data-role="page"]', function(){ 
    $(document).on('click','#submit-btn',function() {
        login();
    });      
});

function login()
{
    var request = $.ajax({
      url: "../case.php",
      type: "POST",
      data: $('#loginForm').serialize(),
      dataType: "json"
    });

    request.done(function(msg) {
            if(parseInt(msg.status)==1)
            {
                //top_notification("Willkommen zurück!","success");
                window.location="index.php";
            }
            else if(parseInt(msg.status)==0)
            {
                alert(msg.text);
            }
            else {
                alert("Gibts nicht");
            }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Fehler");
    });
}
</script>

BUT. Now when I navigate to 3 pages, and then submit the login Form, I will get 3 alerts (even when I navigate to just 1 site) of the request.fail function... after that the login goes correctly!

Answer 1

Ajax is still your problem. You have disabled ajax form submition but ajax is still used to load additional pages. This is just my assumption because you didn't mentioned that ajax is turned off all together.

If ajax is still used to load pages all your other pages are loaded into the DOM. Because of this you will have multiple forms with a same ID. When your first page is loaded there's only 1 form in a DOM and that form is used. But when another pages is loaded then additional form (with a same id) is added to the DOM. And whey you click a submit button jQuery will find first form with that ID from the DOM. And because there are 2 of them it will submit first for, same form loaded with an initial page.

That is why you NEVER use inline javascript with jQuery Mobile.

Instead of

onclick="..."

Your submit button should have an id and make it type="button".

<input type="button" data-icon="ok" data-iconpos="left" value="OK" id="submit-btn">

Put a click event on every button and use a $.mobile.activePage selector to find a form on an currently active page.

$(document).on('click','#submit-btn',function() {
    $.mobile.activePage.find('#loginForm').submit();
});

Also everything should be wrapped inside a correct jQuery Mobile page event:

$(document).on('pageinit', '[data-role="page"]', function(){ 
    $(document).on('click','#submit-btn',function() {
        $.mobile.activePage.find('#loginForm').submit();
    });      
});