Reload page with anchor using Javascript or Jquery - javascript

I am using anchors in my URL as a kind of variable for JavaScript, eg:
mysite.com/itempage.html#item75
This works when I click the link on any other page, but not on the actual page in question (itempage.html).
Instead of reloading the page, clicking the link simply changes the URL. Since the page does not reload, none of my JavaScript runs again.
Does anyone know a way to reload the page with the new url?
So far I have tried:
HTML
<div id="itemmenu">
<a id="item75" href="#">Item 75</a>
<a id="item11" href="#">Item 11</a>
</div>
JQUERY
$( "#itemmenu a" ).each(function(index) {
$(this).on("click", function(){
var linkid = $(this).attr('id');
var winloc = "mysite.com/itempage#" + linkid;
window.location = winloc;
});
});

This is indeed the expected behavior: not reloading the page, and simply scrolling the page to the anchor. Also, "#..." part is purely happening on client-side, and browsers don't send this part of the URI to the server, so:
http://example.com/hello.html and:
http://example.com/hello.html#toc
are considered the same URIs for the server.
If you need to reload the page, you may do something as:
<div id="itemmenu">
<a id="item75" href="?item=75">Item 75</a>
<a id="item11" href="?item=11">Item 11</a>
</div>
If you don't need to reload the page, but just to rerun JavaScript, associate required JavaScript functions with the click event on any of the concerned links.
Additional notes:
$(this).on("click", ...) can be shortened as $(this).click(...).
You don't need your actual JavaScript code: set hrefs directly in HTML code instead of changing them through JavaScript.

You could actually trigger a page reload with window.location.reload(), but I would advise against it.
Instead trigger all necessary code required for your page rendering here.
i.e.
function setupPageLayout() {
// TODO: add any code that's supposed to run on page switch
}
$(document).on('load', setupPageLayout);
$('#itemmenu a').each(function(index) {
$(this).on("click", function(){
setupPageLayout();
});
});
Links should look like:
item

Related

How do I relocate the user to contents of another page without page refresh when navigating?

Im using javascript - ajax and jquery to load all contents from php files which is under (#menu a)[see below 'you.php'] without refreshing the page when navigating across the page - which works perfectly.
However, how do I create a hyperlink of somesort on content-A (which loads and shows all the contents from home.php) when clicked, it relocates & shows the user to/the contents of settings.php(B).
Please note my href hyperlinks doesn't have .php at the end. The 'general.js' file explains why.
(you.php):
<div id="menu">
Home
Settings // Content (A)
</div>
<div id="content"><div>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/general.js"></script>
(general.js):
$(document).ready(function() {
// initial content that will be loaded first upon logging in:
$('#content').load('home.php');
// handle menu clicks
$('#menu a').click(function(){
var page = $(this).attr('href');
$('#content').load('' + page + '.php');
return false;
});
});
(home.php):
<h1> welcome to homepage </h1>
Would you like to go to your settings?
Click here: <a href="settings.php>Settings</a>
Obviously the problem with doing the href hyperlink like this in home.php, is that it goes directly to the settings.php page. Which makes my general.js (ajax) and jquery file pointless.
Since the whole point of using ajax and jquery is for smooth navigation and no page refresh upon navigating around the website.
and No, I do not want to load the contents of settings.php within the contents of home.php, 'loadception' is not what I'm looking for.
This is my simple question, I would like a simple answer in php,javascript,ajax.
Any ideas?
You need to use event delegation. To better performance in my example, all links that must be loaded into "#content" have a class "open" so, in jquery you could do some like this:
$('#content').on('click', '.open', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load('' + page + '.php'); // concat .php if it's only necessary
});
Updated
I created a demo on github: https://github.com/josemato/stackoverflow/tree/master/spa-event-delegation

How to send all clicked links to a page before going to the URL in the link

Question: How would I set up a page so that all links when clicked go to a page called query_data.cfm where a database query is triggered and once complete send the user to the url of the original link?
As of right now I am adding a class to all links on my page using javascript.
<script>
$(document).ready( function() {
$('a').addClass("tracker");
});
</script>
But what I also want to do is make it so all links with that class for example <a class="tracker" href="www.mywebsite.com/page2.cfm">Page 2</a> go to a page named www.mywebsite.com/query_data.cfm where a query is ran passing the value of href to a database and once complete redirect the user to www.mywebsite.com/page2.cfm
I hope this is enough information but if I missed anything please let me know.
One method is to simply change the links like:
<a class="tracker" href="www.mywebsite.com/query_data.cfm?destination=page2.cfm">Page 2</a>
Then all links will go to query_data.cfm which will record the #URL.destination# information and then CFLOCATION them on to #URL.destination#.
Edit: Oh, you are the same person, my bad. Reading malfunction.
I suggest that you try this: http://jsfiddle.net/xcr56gd1/.
Since you're using jquery to add to the links, you can hopefully see how you can use jquery to change the href to `/r.cfm?d= + $(this).attr('href'), properly encoding as a url.
$(document).ready(function () {
$("a").not(".norm").on("click", function(e) {
alert($(this).attr('href'));
// The alert just demonstrates that it's working and how to get href.
// You can call your ajax here.
e.preventDefault();
});
});
With this code, you can use the jquery on all links without the class "norm", so if you especially wanted a link not to track, this is how you would do it.

javascript: history.go(-1) doesnt work for the whole window

i have an unusual problem. I have a page which contains an iframe, which is controlled by the dropdown. So selection of the dropdown loads different iframes. Anyway - on the bottom I have a button to return to the previous page (I mean the whole page, not previously loaded iframe on that page).
<a href="javascript: history.go(-1)">
Unfortunately it also includes the history of these iframes, so when I click on that button, it loads up the previous iframe instead of taking me back.
Here is how to explain it well:
go to this page: Click here
go to the hyperlink on that page
make couple of selections from the drop down (play with it)
click the return button on the very bottom of the page.
I want it to take me back to the first page (here.html), not go back to the previously loaded iframe on 1.html.
I have to use javascript history.go or similar script. I can't use direct link to here.html, as this page is a part of many other pages, so when the user clicks return, he is forwarded to his specific landing page.
I greatly appreciate any help.
It's a life-saving question
Use document.referer
var referrer = document.referrer;
window.location = referrer;
Check if it works !
<a href="javascript: window.location = document.referrer;">
You need to remove the newly iframe before sending browser back to the actual page.
Add click event on the return link
HTML:
<a id="return_link" href="#">
Javascript:
$(document).ready(function() {
$('#return_link').on('click', function(e) {
e.preventDefault();
$('#iframeId').remove();
window.location = document.referrer;
});
});
try this , Just remove extra spaces from statements.
href="javascript:history.go(-1)

Javascript: history not loading page

I have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu's <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.
But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.
This is the javascript located in the mypage.html header.
<script type="text/javascript">
$(document).ready(function() {
// replace menu link click
$(".right-menu a").live('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
window.location.href = $(this).attr('href');
$("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
return false;
});
// If page loads, load the content area according to the hash.
var hrtag = window.location.hash.substring(1);
if(hrtag=="")
hrtag='about';
$("#content-right").load('mypage'+hrtag+'.html');
window.location.hash = hrtag;
});
</script>
This is the menu
<ul class="right-menu">
<li>About</li>
<li>Screens</li>
<li>License</li>
<li>Download</li>
<li>Donate</li>
</ul>
If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html
If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html
In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.
If i click the menu in the following order; license, about, screens and then click the browser's back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!
The URLs are obviously in the history, but they don't load.
Any clue to what might be wrong here?
// Thanks
EDIT - The solution
Thanks to Andres Gallo's article I came up with this solution:
<script type="text/javascript">
$(document).ready(function() {
// Make sure the page always load #about
LoadIDWithURL('#content-right','myPageAbout.html');
window.addEventListener('hashchange',function() {
if (window.location.hash != "") {
// We have a hash, use it!
LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
} else {
// We do not have a hash, force page reload!
window.history.go(0);
}
});
});
// Load the targetID with the URL loadURL.
function LoadIDWithURL(targetID,loadURL) {
$(targetID).load(loadURL);
}
</script>
I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.
Furthermore my article also explains how you can pass parameters in your links to have javascript do special things
Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.
This is normal behaviour when navigating between pages which differ only in their hash. You have two options:
Use the hashchange event, or an emulation of it, to detect when the user changes the hash by navigation back or forward and update the page appropriately
Use the HTML5 history API.
you can try with hashchange
$(function(){
$(window).hashchange(function(){
// some event
})
})

how to load a different html page without refreshing the page or changing the url?

I want to load an html page without refreshing the page or changing its url.
So for example, If I am at http://localhost/sample/home and I want to navigate to contact us page, I click on the contact link and the contact page content gets loaded without refreshing the page or changing the url.
How this can be done?
Look into the use of jQuery.load().
This allows you to load HTML from a URL, and display it in an element in your page.
Therefore you could do something like:
$("body").load("/sample/contactus");
However I wouldn't recommend this as its not great for SEO or accessibility. Also it wouldn't reduce load time because you still need to make a HTTP Request for a whole other page..
Mock HTML:
<div id="links">
Contact Us
</div>
<div id="content"></div>
JS:
$(function() {
$("#links > a").click(function(e) {
e.preventDefault(); //so the browser doesn't follow the link
$("#content").load(this.href, function() {
//execute here after load completed
});
});
});
jQuery .load() - Load data from the server and place the returned HTML into the matched element
Something like :
$('#content').load('ajax/contact.html', function() {
alert('Load was performed.');
});
http://api.jquery.com/load/

Categories