CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilehash
Johny Jaz
Johny Jaz

Reputation: 885

Can i pass information through the URL when i am using jQuery Mobile?

I have a mobile application that opens an in-app browser that uses the URL to pass information to my server , like the deviceID.

For example the browser will open the web-page (jquery Mobile) : www.myserver.com/doWork.html#deviceID

On the server part using JavaScript inside the doWork.html file, I get the deviceID like this:

var userId = window.location.hash.substring(1);

Is it ok that i pass information using the hash # ? In jquery mobile the hash # is used to change between pages when someone uses the Multi-Page template structure . So i am afraid that maybe i should use something else , like a question mark (?) ?

Or its perfectly fine ?

Upvotes: 1

Views: 357

Answers (2)

krishwader
krishwader

Reputation: 11371

NO. Stop using # for your data transfers. Let jQM do its thing. Don't disturb it. Use Query strings( adding ? in url). My advice is to stop using query strings (? tags) and # tags to send data to the next page. Handle it using localStorage. Its more secure compared to Query strings because the user wont see the URL change, so your sensitive data is hidden, at least to a little extent. localStorage is HTML5's API which is like a temporary storage set aside per domain. This data will persist until data is cleared in cache. Assuming you have an anchor tag which goes to dowork.html,

<a href="doWork.html" data-role="button">Go to Do work</a>

Add an attribute for device ID in the tag itself, like this :

<a href="doWork.html" data-deviceid="10" data-role="button">Go to Do work</a>

You'd be doing this dynamically you might also use it the same way. You get the gist right?

A click event for this would look like this : 

$(document).on("click", "a", function(e) //use a class or ID for this instead of just "a"
  //prevent default
  e.preventDefault();
  //get device id from tag attribute
  var deviceId = $(this).data("deviceid");
  //set it in localStorage 
  localStorage["dId"] = deviceId;
  //redirect 
  $.mobile.changePage(this.href);
});

Then, in the other page's pageinit (or any event), get the device id from storage and send the ajax call to the server. 

//assuming #dowork is the id of a div with data-role="page"
$(document).on("pageinit", "#dowork", function() { 
  //get from storage
  var deviceId = localStorage["dId"];
  //make ajax call or server call with deviceId here
});

But, if you still want to use URL for this, look at this question. I've given a decent enough answer over there.

Upvotes: 1

user1549458
user1549458

Reputation: 96

To pass variables to the server you should avoid using the # symbol because regardless of the framework you are using this symbol is used for other purposes, to pass info to the server in a GET request you should use the ? symbol, something like this should do it: www.myserver.com/doWork.html?deviceID=1233455

Upvotes: 1

Related Questions