How to change URL path when paging using ajax + jQuery - javascript

I am using ajax post requests for doing paging on a feed in my site. When getting the post request data I am reforming the page by clearing previous data and rendering the new data that came from the request. I want to be able to change the URL as well so saving the new page link will get the user to the current page.
Example:
User on page example.com/feed - seeing content of page #1
User clicking to get to page #2 -> ajax post is send and data on the page is changed using js (no refresh)
URL is still example.com/feed but the content is of example.com/feed?page=2
How can I set the URL to point to the new page without triggering a refresh (no redirect) ?
I am using Nodejs + express.

I understand you are aiming at a single page application.
While keeping the url is nice, note you might want distinct urls for directly accessing different parts of your application. Still, you can load content with AJAX and keep a smooth application. The way to go is using the hash part of the location.
The Sammy.js framework gives you a nice base to build upon, you can try it out.

You can use history pushstate but some browsers does not support.
history.pushState({id: 'SOME ID'}, '', 'myurl.html');
And don't forget about window.onpopstate, it pops if user clicks back button.

Redirect the user to an anchor point.
Page 2
And in your document.ready:
if (window.location.hash.length > 1){
var pageNumber = window.location.hash.substring(1);
loadPage(parseInt(pageNumber));
} else{
loadPage(0);
}

I don't believe it is possible to change the query part of the URL without triggering a refresh (probably due to security issues). However you may change the anchor and use an event listener to detect when the anchor is being changed.
//Listener
$(window).on('hashchange', function() {
if(loaction.hash.length > 1) {
//The anchor has been changed.
loadPageWithAjax("example.com/feed.php?page=" + location.hash.substring(1));
} else {
//Load standard page
...
}
});
Change the anchor to load new feed
Page 2
Remember to not use an anchor that is used as an id, since this makes the browser scroll to that element.

Related

Detect which link was clicked with javascript that got user to specific page

Been searching on the web for a solution, but couldn't find anything, so maybe it's not possible, although I hope it still is.
What Im trying to do is detect the button (class or id) that was clicked when being redirected to another page on my site.
What I have is a portfolio page that contains a large amount of divs with different classes, so when someone clicks on a specific button on the homepage and gets redirected to the portfolio page, is it possible to detect on the portfolio page how the visitor got directed from. So detect which button got clicked.
no idea how to approach this, something maybe with if previous window.location last action find class or id.
Hopefully my question makes sense and someone can give me an idea if even possible.
I imagine it would rather be possible to do with php, but unfortunately server side languages are not an option in this case.
Thanks
Examples of methods you can use
add the information in the originating url - use location.search or location.hash depending on your choice of ? or #
Set a cookie (or use session/localStorage in modern browsers) in originating page and read it in the target page
Interrogate document.referrer (not always set)
You can't do it without either modifying the links (adding a query string or hash), or having code on the source pages (where the links are).
The former is pretty obvious: Just add a query string or hash (I'd use a hash) that identifies where the click came from, and look for the hash on the portfolio page. E.g., links:
Portfolio
Portfolio
and in the portfolio page:
var from = location.hash;
If you don't want to do that, and you can put code on those pages, it's easy: Add a click handler that sets information about the link in sessionStorage (very well-supported on modern browsers), and look for it in sessionStorage when you get to the portfolio page.
E.g.,:
$(document).on("click", "a", function(e) {
// Maybe check the link is going to portfolio, or refine the selector above
sessionStorage.setItem("linkFrom", this.className);
});
and then in the portfolio page:
var from = sessionstorage.getItem("linkFrom");
You can use window.localStorage to save the last id of the clicked element.
localStorage.setItem('last_clicked_id', id);
And then read it in the next page:
localStorage.last_clicked_id
Before running you should check for localStorage support:
if(typeof(Storage) !== "undefined") {
//localStorage code
} else {
//no localStorage support
}
this is how it works: the recent page or url is set on the URL parameters like a GET server request, but instead the client will receive it and parse it not the server. the recent page or url is on the "fromurl" parameter. on every page put this in (it's a javascript code):
function getURIparams(s) {
loc = window.location.href;
loc = loc.substring((loc.indexOf("?")+1));
loc = loc.split("&");
for (l = 0; l < loc.length; l++) {
lcc = loc[l].split("=");
if (lcc[0] == s) {
return lcc[1];
break;
}
}
}
next on every anchor link put this in href:
The Link to another page
after that, on every page execute this javascript:
from_url = getURIparams("fromurl");
the "from_url" variable will be the string variable of where the user clicked before it comes to that page.
if you are to lazy to put all those anchor one by one like this, do this work around but you need jquery for this. you dont need to put the parameter on the links for it to know where it comes from it will be automatically added by jquery.
$(document).on('click', 'a', function(e){
e.preventDefault();
window.location.href = e.target.href + "?fromurl=" + window.location.pathname;
});

Ajax - doesn't change URLs

I made the contents of the page change using Ajax, but the problem is the site url stays the same, therefore it doesn't load the page at all, just the text on it. So for example, I click on the Login link and the content changes, but the url stays on site/, not site/login. The actual login form does not load because it doesn't even call it, only loads basic text. How can I fix that ?
P.S. Using Zend for the website
Script:
$(document).ready(function() {
$('a').click(function() {
var toLoad = $(this).attr('href');
$('#content').load(toLoad);
return false;
});
});
Ajax does not reload the page or load another page so the url does not change when you make an ajax request.
If you want the url to change, for example so that your ajax-filled pages can be shared and bookmarked, you need to change the url manually.
You can use the html5 history API for that.
A simple example:
// we need the click event here
$('a').click(function(e) {
// cancel default click action using `e`
e.preventDefault();
var toLoad = $(this).attr('href');
$('#content').load(toLoad);
// check if the html5 history api is available in the browser first
if (window.history && window.history.pushState) {
// push the state to the url in the address bar
history.pushState({}, e.target.textContent, e.target.href);
}
});
Now the url in the address bar should change to the url of the link but the link is not really followed, instead the ajax request was made.
Note that you also need to make sure that all your urls load correctly. This is just a simple example and by the look of it your linked url would not load a complete page.
Check for example the documentation on mozilla.org for more information.

window.location not refreshing to the existing URL

I have a PHP page with implementation of jQuery horizontal tabs. I have added a jQuery script so that the page URL reflects the tab#. I have a form on the page and upon form submission I need to refresh and stay on this same page to include the jQuery correct tab number.
This is the code to add the jQuery tab number to the URL:
<script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "#tabs-1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
</script>
The full URL of the page is http://somedomain.com/includes/nonadmin_user_profile.php#tabs-5 and includes the tab number for the jQuery horizontal tab.
I am using this script to refresh and stay on the same page: echo "<script>window.location=window.location</script>";
On refresh here is the problem as it lands at this URL which does not include the tab number. http://somedomain.com/includes/nonadmin_user_profile.php
Any suggestions would be appreciated very much.
Here is another detail: The problem described above does not occur if I merely refresh the page with the browser refresh button or if I right click the page and refresh. In this instance the page refreshes and stays on the full url with the tab#.
Per Disaster Faster's request, the issue encountered was simply that the browser was not going to the desired location of the page. The form data was successfully submitted and correct page was loaded.
The solution to his issue was modifying the form's action attribute to include the location information (similar to adding location information to an anchor).
Original:
<form action="nonadmin_user_profile.php" method="post">
New:
<form action="nonadmin_user_profile.php#tabs-5" method="post">
Original Post:
The window.location = window.location redirect should include the location information.
JSFiddle: http://jsfiddle.net/6dqcmh9d/
If you click the button first, it'll report the URL with the location information because it hasn't been added to the URL. Then click the link and re-click the button. You'll receive the URL with the location information added.
If you want just the location information, you can use window.location.hash, but this will only produce the location on the page, not the URL of the page.
The problem you'll run into will be with the form submission. To submit a form without changing the page, you'll either have to submit the form to a new window (add target="_blank" to the form) or implement AJAX. In either case, we'd need a little more of your code to help with integrating it properly.
It is likely that the tab controls are being handled with onclick events or something similar, and are not listening for hash changes onload. You'll likely need to add some custom JS to force the tab change if there's a hash change.
What's wrong with using the reload() method?
document.location.reload(true);
From the docs:
The Location.reload() method Reloads the resource from the current
URL. Its optional unique parameter is a Boolean, which, when it is
true, causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its
cache.
If you need to integrate it into a PHP echo struct, use:
echo '<script>document.location.reload(true);</script>';
You should use reload() to refresh the page, eg:
window.location.reload();
Or given your example:
echo "<script>window.location.reload();</script>";

is it possible to change change the url in address bar or browser on certain event

you all have used pinterest, you can see that when you click on any pin, a div is added and lightbox is shown on the same page but the url is changed to that of actual pin page. i have the same lightbox to show data, is it possible to change the url like that?..
one thing i want to tell is that, i have link which has onclick event which calls view() method, in which i am calling another page with ajax request, which shows the content of that page on my page, i want to change url when this link is clicked and back to previous url when closed..here is my code
function view(){
$.get('mypage.jsp', function(html) {
$(html).hide().appendTo('body').fadeIn(500);
}, 'html');
};
This feature is known as HTML5 Push State. Here's a related StackOverflow question which may provide more insight. Good tutorial for using HTML5 History API (Pushstate?)
I haven't checked Pintrest's solution. But is hash what you're looking for?
window.location.hash="Whatever-you-want-to-add-to-the-URL"
This will change http://stackoverflow.com/posts/11968693/ to http://stackoverflow.com/posts/11968693/#Whatever-you-want-to-add-to-the-URL
Yes, with HTML5's new history API. Where the lightbox is triggered, add something like this:
var hist = window.history;
hist.pushState({ image: [IMAGE URL] }, 'lightbox', [URL]);
This will change the current URL without reloading the page, and will create an entry in the browser history, so users can use their browser back button to return to the previous state (in this case, before they opened the lightbox).
You can change the url (not only the hash) by using the pushState or replaceState functions on the history object. More details: http://diveintohtml5.info/history.html

passing different variables to same page

I am trying to build a web app mainly using html and javascript. I use a number of different variables in the app that are passed through the url.
here are the problems, I have some links that link to the page the app is currently on, just with changed variables, but while clicking on the links does change the url value, the page does not change/reload for the new values when using and an href, is there a clean way to force the page to reload if you link to the current page, or change the url?
currently I am using jQuery to set the window.location with the new variables then reloading the page.
also, I have a similar problem for using the back button on the browser. It will change the url but not refresh the page, so if you have a variable set to 1 you change it to be 2, that works and the page will reload with the variable set o 2, but if you go back using the browser history the url will say that your variable should be 1, but the rest of the page will still act like the variable is 2, until you refresh the page.
is there someway to set a page so that the it will automatically refresh when you go to the page from the same page, either through links or going forward or backward with the browser history?
as per request here is part of the parts of the code I am having problems with:
first is the code for the creating the html elements onload
var sel_tags=document.getElementsByName("selected_tags")[0];
var temp="";
if(Tags==null)
{
temp="\<p>All Notes\<\/p>";
}
else//Tags not empty, and there are tag filters
{
var click= new Array("",a+ AtTagShow);
var GoTo="PageViewNotes.html?"
for (var i=0; i < Tags.length; i++) {
//if we are showing #tags, or a tag is not an #tag
if(AtTagShow||Tags[i][0]!="#")
{
click[0]=t+Tags[i];
if (temp.length>0)
{temp+="\<span class=\"spacer\">\/<\/span>"};
temp+="\<a class=\"selected_tags_label\""+
"href=\""+GoTo+click.join("&")+"\">\<span>"
+Tags[i]+"\<\/span>\<\/a>"
}
};
};
sel_tags.innerHTML=temp;
here is the jquery code for setting the onclick:
$(".selected_tags_label").live("click",function(){
window.location=(this.href);
window.location.reload();
});
an example url for this issue would be:
page.html?Tags=#rediculous,#meeting&AtTagShow=true
by clicking on the rediculous element the url would change to:
page.html?Tags=#rediculous&AtTagShow=true
window.location.href="page.html?Tags=#rediculous&AtTagShow=true"
Take a look at the jQuery History plug-in for setting your site up to have back / forward history. It helps with setting up states on your page, that call data based on what query parameters are in the URL string.
In modern browsers (IE8+, Opera 10.6+, Fx 3.6+, Safari 5+) you have hashchange event.
Instead of reloading page, maybe you can achieve desired results with something like this:
<script>
document.onhashchange = function(){
// do something
}
</script>
MDN might be also helpful.
If you are using query parameters (things after the ? mark in the URL), then changing a query parameter and setting window.location to that new URL should cause a new page load from the server.
If you are using hash values (things after the # mark int he URL), then changing the hash value will not cause a new page load.
So, if you want a fresh page load from server each time you change a value, then you should be using query parameters. Back and forward should also work fine when using query parameters.
If you're purposely trying to do all of this with hash values to avoid an actual server page reload, then you will have to do more coding to intercept hash changes and process them. That is easier to do in modern browsers than older browsers using the window.onhashchange event. See this page on MDN for more info.
Browser reloads the page, whenever any of these parts of the URL are updated via window.location:
Domain
Port
Path
Query string
But it won't load the current document, if you change the fragment_id part (which is simply a reference to an HTML element inside the current document).
Thus from what you say, I guess you're updating the fragment id.
Also this might help to know that window.location.reload() method does the work of F5 key.

Categories

Resources