Loading AJAX on jQuery Mobile

Question

I'm currently creating a jQuery Mobile app. However I am testing the page through Firefox simply because I would have to keep reinstalling the app if I was to do it on the iPad.

Here is where I am stuck, when I added the AJAX into my page it worked fine. I have added the AJAX for the login. However when I click login, it indeed does check the user/pass against the database and comes back with an error I have wrote if it is wrong which is fine.

When I login it should redirect me to the first page (page1.html), it does take me to the page but it doesn't load the JQM CSS which is quite a big problem. This is because it is an app therefore it is purely CSS'd through the standard JQM theme.

Here is my AJAX can anyone tell me why is isn't bringing back my CSS but just the page content (text/pics etc)?

function doLogin()
  {

    var userName = document.forms['validateform'].elements['user-name'].value;
    var passWord = document.forms['validateform'].elements['password'].value;
    var request = 'checkLogin';

    $.ajax ({

                url:'http://127.0.0.1/hrdatabase/appLogin.php',
                cache:false,
                data: {'request': request,  'user-name': userName, 'password': passWord},
                dataType: 'json',
                async: false,
                success: function(data)
                {
                    $('#errMsg').html(data.errMsg);
                    if (jQuery.trim(data.errMsg).length ==0)
                    {
                        document.location.href='page1.html';
                    }
                    else
                      {
                        alert (data.errMsg);
                      }
                }

            });
  }

No it doesn't it just has the data-role='page' in the starting div — Copland14
– Copland14, Commented Dec 5, 2013 at 13:59
jQuery may be grabbing only what's below the data-role possibly — eric
– eric, Commented Dec 5, 2013 at 14:02
possible duplicate of JQuery Mobile, redirecting by window.location prevents pageshow event — Omar
– Omar, Commented Dec 5, 2013 at 15:08
Thank you for your input Omar, but as you can see below I have already worked it out. Just leaving it up in case anyone else bumps into the same problem they will then know the fix. — Copland14
– Copland14, Commented Dec 5, 2013 at 15:12

Copland14 · Accepted Answer · 2013-12-05 14:02:16Z

1

Since posting this I have actually sussed it out. Basically the:

$('#errMsg').html(data.errMsg);
                if (jQuery.trim(data.errMsg).length ==0)
                {
                    document.location.href='page1.html';
                }

This code should be:

$('#errMsg').html(data.errMsg);
                if (jQuery.trim(data.errMsg).length ==0)
                {
                    $.mobile.changePage ("page1.html");
                }

Thanks to anyone anyway. Will leave this up incase anyone finds it useful.

answered Dec 5, 2013 at 14:02

Copland14

211 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading AJAX on jQuery Mobile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related