CODEWITHSUNDEEP
jquerynode.jsexpress
wiill
wiill

Reputation: 25

Page needs refresh after redirection from server

New question, but really close to need to refresh page in jquery mobile.

I have a /login page, to which user is redirected when accessing the / of the app for the first time (therefore not logged). BTW, to login, user has only to provide a username. This /login page offers a form with a single text input, as follows:

<form method="post">
<span>Votre pseudo:</span>
<input id="username" name="username" data-bind="value: username, valueUpdate: 'afterkeydown'" />
<input type="submit" id="join" data-icon="star" value="Rejoindre !" data-bind="enable : canJoin"/>
</form>

There is no action attribute on the form, therefore (unless I'm missing some fundamentals, hope not) the form submits with post to /login.

I'm using NodeJS with express, and handling the post request server side looks like this:

app.post("/login", function (req, res) {
    //do some stuff, store username for instance...
    res.redirect("/");
});

I am indeed redirected to the / matching page (index), but embedded scripts in this index page are not run, and some jquerymobile objects are not fully operational: this index file has 2 JQM page (two divs with data-role="page"), and the footer of the first JQM page(div) has 2 links, with one pointing to the second page(div) (via anchors, JQM way). But this link isn't active either.

I do have to reload the / page in order to have the embeded scripts run ($(document).ready, scripts in header...) and all JQM objects responding correctly.

HINT: before reloading the page, in firebug, the the post /login request's response has a 302 statut (is it due to the redirect instructions server side), and the following get / request (sure due to the redirect instructions server side) has an EMPTY response with a 200 statut, although it could load the page and the single image it embeds.

I'm surely missing something but can't figure out... thanks for all your help

Upvotes: 1

Views: 1470

Answers (2)

LazyPeon
LazyPeon

Reputation: 339

Simple solution is to use data-ajax="false" on any link on your page this tells jquery mobile to load entire page like any normal site.

Example: 

<a data-ajax="false" href="page.html"> Some link </a>

Upvotes: 1

Jonathan
Jonathan

Reputation: 5547

JQuery mobile uses ajax to load the requested page into the dom. The page you are requesting should only have one jqm "page" on it.

As I remember, I had to add all my scripts to my first page, and then bind to the page change event to decide when to execute them. I don't think jqm will execute the scripts in the page that was loaded via ajax.

Take a look at the page structure here:

http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

More details in how the navigation works is here:

http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html

Upvotes: 0

Related Questions