I'm exploring my options for modifying urls in the browser bar for bookmarking purposes.
Ideally, I'd like to add querystring parameters and cannot determine if this is even possible. I don't want the page to refresh and want to add querystring values on link clicks, ajax calls, etc.
If I can't add querystring parameters, then I'd like to add hash values (http:://someurl.com#hash-value). How should I go about doing this? Should I use plain JavaScript or a framework (jquery, prototype, etc.) and/or framework plugin.
To modify the hash, you can simply do the following in plain JavaScript:
window.location.hash = 'hash-value';
It will add #hash-value to your URL, or will replace it if it already exists, without refreshing the page.
Then to check if a hash value is present, simply do the following:
if (window.location.hash) {
// Hash is present
// Use window.location.hash as required
}
else {
// No hash was set
}
If you modify the query string, it will refresh. So you should modify window.location.hash.
Related
I'm trying to save my application's current url / url fragment to my browser's history without necessarily knowing what that url is in my code.
Specifically, the page I'm creating allows the user to search records. When they submit the search, I'm updating the URL with a query string containing their search options, but NOT saving the new URL to the history. This is that line of code:
Backbone.history.navigate(this.getQueryString(options), { trigger: false, replace: true });
(I'm doing it this way so that users don't have to iterate back through previous searches to get to the page they were on before.)
Now, when the user double clicks on a record, I want to navigate to a page with that records details, but I want to save the url querystring of their last search so that they can return to it. (I've rigged my router to read querystrings and it works correctly.)
Ideally I'd like to just save the current url without having to know it. If that won't work, how can I find the current url/url fragment to do something like:
Backbone.history.navigate(currentURL, {trigger: false});
Okay, I figured it out after a bit more tinkering.
Backbone.history.fragment will return the URL fragment. (In this case, just my query string.)
So, I can achieve my desired behavior with:
Backbone.history.navigate(Backbone.history.fragment, false);
Backbone.history.location.href
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 ?
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,
Go to Do work
Add an attribute for device ID in the tag itself, like this :
Go to Do work
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.
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
How can I add something in JavaScript that will check the website URL of someone on a web site and then redirect to a certain page on the website, if a match is found? for example...
the string we want to check for, will be mydirectory, so if someone went to mysite.com/mydirectory/anyfile.php or even mysite.com/mydirectory/index.php JavaScript would then redirect their page / url to mysite.com/index.php because it has mydirectory in the URL, how can I do that using JavaScript?
If I have understood the question correctly, then it is fairly simple and can be achieved using document.URL
var search = 'mydirectory'; // The string to search for in the URL.
var redirect = 'http://mysite.com/index.php' // Where we will direct users if it's found
if(document.URL.substr(search) !== -1) { // If the location of
// the current URL string is any other than -1 (doesn't exist)
document.location = redirect // Redirect the user to the redirect URL.
}
Using document.URL you can check anything in the URL, however you might want to look into using something like Apache's mod_rewrite for redirecting the user before they even load the page.
Check out window.location, particularly it's properties and methods. You would be interested in (part of the) pathname property (you can split it on /) and the href property to change the page.
This is all assuming the javascript is being served in the first place; so I'm assuming anyfile.php and index.php would all result in the JS being served and not some 'generic 404' message.
I have built a calendar in php. It currently can be controlled by GET values from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});
Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.
You can return a JSON string from the server and handle it with Ajax on the client side.
I want to redirect after a successful ajax request (which I know how to do) but I want to pass along the returned data which will be used to load an iframe on the page I just redirected to.
What's the best way to pass such data along and use it to open and populate an iframe in the page I just redirected to?
EDIT:
I am passing a GET variable but am having to use the following to access it for use in my iframe src attribute:
function $_GET(q,s) {
s = (s) ? s : window.location.search;
var re = new RegExp('&'+q+'=([^&]*)','i');
return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}
var d = $_GET('thedata');
I assume there isn't really a more straightforward way to access the GET vars?
If it's not too much data, you could pass it as a get parameter in the redirect:
document.location = "/otherpage?somevar=" + urlescape(var)
Remember that urls are limited to 1024 chars, and that special chars must be escaped.
If it is beyond that limit your best move is to use server side sessions. You will use a database on the server to store the necessary information and pass a unique identifier in the url, or as a cookie on the users computer. When the new page loads, it can then pull the information out of the database using the identifier. Sessions are supported in virtually every web framework out of the box.
Another alternative may be to place the data as a hidden attribute in a form which uses the post method (to get around the 1024 char limit), and simulating a submission of the form in javascript to accomplish the redirect, including the data.