jQuery code not called after window.location.replace( url ) - javascript

I have a code that after clicking on a link ('#versionPageFromProdLink'), will redirect the page to the index page. The index page has that contains the content. I want to hide this after the page is redirected and show the next div that i have ().
The page is redirected however the jQuery function after the window.location.replace( url ); line is not called.
How will I be able to redirect and call the jQuery after page redirection?
Code:
jQuery( '#versionPageFrmProdLink').click( function(){
window.location.replace( url );
// jQuery code below is not called, <div id="versionMainContent"> is not hidden
jQuery(".versionMainContent").hide("fast", function(){
jQuery( ".versionProductContent" ).show();
});
});

As stated, the location.replace means the code "after" it won't execute. What you will need to do, is append a hash "index.html#divCode" or some such (you could also use a query string in this case) and then detect that onload / on document-ready for the index page, then update the hide/show status there.

This is fundamentally impossible.
Once you navigate to a different page, the previous page, including all of its Javascript, is gone.

You must handle the secondary executation after the redirect in the page you are redirecting to.
Example:
Page 1
jQuery( '#versionPageFrmProdLink').click( function(){
window.location.replace( url );
}
Note during redirection you can pass a query string in the URL to check a condition in the next page.
Page 2
Now that you redirected to the next page. You can place a document.ready function and run what is needed.
$(document).ready(function () {
jQuery(".versionMainContent").hide("fast", function(){
jQuery( ".versionProductContent" ).show();
});

Your design is the problem. Redirecting stops the flow of execution. You can use ajax to make a server call and continue execution.
Or, if you prefer you can perform a redirect and pass a URL parameter like ?hideVersionMainContent=true and perform the hide server side.
There are other ways to accomplish the task, but that should give you a few ideas.

The code after your location.replace operates on the page that you're leaving (if it is ever run at all; changing the location navigates away from the page and may well terminate your code right there).
You'll need to pass the information to display to the new page, and have code on the new page fill in the stats. There are lots of ways to do that:
On the query string
Via web storage (sessionStorage would probably make sense)
Cookies (but don't, it's not what they're for)

Related

Add URL parameter on loading the page

I have a page where there is a form which is used to Add / Edit Addresses.
In the right section of the page, there is a saved address Which has Edit link and it gives call to the same page URL with adding a new parameter say "billingID.XXXXX".
After clicking on this link, page is re loaded with the default address data auto filled.
I need this to happen on the first time load. I tried triggering click event on this Edit link on load, but I suppose it is not allowed by jQuery.
What are the other options I have with jQuery / javascript to add this URL parameter on load of page.?
You could try the Javascript History API.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
It depends on what you want to do, I didn't understand you quite clear.
If you need the page to be reloaded and show the page by url, you can get 'href' value by jquery and then call window.location = $('.mylink').attr('href') + '?billingID.XXXXX';.
If you just want to replace url in browser panel, you can use History API as Kahuna suggested. E.g. you can call
window.history.replaceState(null, document.title, window.location.path + '?helloworld=1');
but then you have to update the page contents by yourself, using JS and jQuery.
you can try this:
if(window.location.href == 'requestd page href'){//http://localhost/test/test.php
window.location.href += "?billingID.XXXXX";
}

Javascript: check if the url is changed or not?

My url format is like :
http://domain.in/home
http://domain.in/books/notes
http://domain.in/books/notes/copy
I've called a javascript function on window.load to check if the url has changed or not.
If the url has been changed then code is executed else it will return and checks again after 5 sec.
My code is :
window.onload = function(){
setInterval(function(){
page_open();
}, 5000);
};
function page_open(){
var pages=unescape(location.href);
pages=pages.substr( pages.lastIndexOf("studysquare.in/") + 15 );
// gives book if url is http://studysquare.in/book
//alert("pages"+pages+"\n\n recent"+recent);
if (pages==recent) { return; }
recent=pages;
alert("Reached down now the code will execute.");
}
The problem now is : when the url is like :
http://domain.in/book
Single level deep, then everything works fine. But when the url is like
http://domain.in/book/copy or http://domain.in/book/copy/notes
Then nothing works.....
Any help to check 3 level deep url change in javascript every 5 sec ? :)
Hi sorry I forgot to tell that... I've .htaccess file which doesnt allow to navigate the page when any length url after the domain.in/ is written.... that means only single page remains open and not affected by the url change...
When the user changes the URL, the browser unloads the entire page they're currently on (including your javascript, hence it stops running) and then loads the next page. No javascript is able to run across page changes. You can't monitor a change in the URL like you're doing if they're navigating to another page.
The best way to catch a change in the URL is to add an onUnload event to the body object to fire your javascript when the browser unloads the page just before starting to load the new page the user has requested -- but I'm not sure that's going to help achieve your goal of tracking their recent page views (if that's what you're looking to do).
Sounds like a history plugin such as jQuery address would help you a lot.
It lets you handle the event when the URL is changed, so you can load in new content as required.

How to redirect from "page.php" to "#page.php" with Javascript or jQuery?

My page runs on php for no js-users. For users with javascript on I load all content dynamic fromt the index in combination with the hashchangevent. So the links all look like www.page.com/#page.php, with a # before it. If the user types it in that way every thing works like charm and the content is being loaded over the index.php
But if a user would enter www.page.com/page.php the page of course ends up on the php page and the dynamic page will of course not work any more except the user will hit the index page and go on navigate from that. So that's not a cool way.
My Question:
How can I redirect user from:
www.page.com/page.php
to
www.page.com/#page.php
when they typed in www.page.com/page.php in the Browser
Of course only with javascript. The Page should work without javascript on normally with php.
Thank you.
When the page loads, change the window.location to the desired URL by deconstructing and reassembling the URI. Unfortunately, you'll have to include this on every page (i.e., page.php) on which you'd like the redirect to happen.
$(document).ready(function () {
// Insert the pathname after the hash, but skip the leading '`'
window.location = "/#" + document.location.pathname.slice(1);
});
It's slightly less clean, but you could also remove the window.location bit from .ready() entirely. This would effect an small performance improvement.
If you want the hash-redirect to affect only the last element of the current path, use the code below, instead.
window.location = "./#" + document.location.pathname.split('/').pop();

Executing JQuery after page load only after clicking a specific link

I have a link in my app that when clicked, leads to another page. I want to execute some JQuery on this new page after it loads, but only if that specific link is clicked to get to the page.
I have this JQuery:
$('#new_to_topics').click(function(){
$(document).ready(function() {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
});
});
where #new_to_topics is the id of the link that leads to the new page and
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
is the JQuery code I want to execute on that new page. However, this does not work. How should I do this?
You could pass a location hash to the new page, and then conditionally run some javascript based on that hash.
If my link was to mynewpage.html#fromXlink (this would show in the address bar)
My javascript on mynewpage.html could be:
$(document).ready(function() {
if (location.hash == '#fromXlink') {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
}
});
You could add a variable to the query string i.e. somepage.aspx?fromthislink=true
and then pick that up in jquery.
This shows how
If it cam from that link then fire off your jquery.
You can use window.name to pass data to the target page (although I would prefer passing data in the hash, if possible).

changing some parts of location.href using js without redirecting the browser?

hi here is the problem: my url is like this
http://somesite.com?theSearch=someword&a=b&c=d
on this page search results are displayed and on this page i have put the functionality of ajax search i.e. the results are updated without the page reload but the problem is if the user clicks on any link on the page and then presses the back button he results on the page page with the search results of "someword" not the new word typed (i mean the word for which the ajax results were updated) the client complains it and i need to fix it anyone have a solution?
i am using jQuery
You can't change the location.href without a new load. What you can do is set the hash.
Every time you make a search change the hash
function doSearch(searchword) {
location.hash = searchword;
//your search code
}
Now the hash will refer to the latest search. And then add this code to "override" the get parameter ?theSearch=.
$(document).ready(function() {
if(location.hash.length>0) {
doSearch(location.hash);
}
});
Its not a nice solution since you will load 2 search results, but it will work.
You can try Sammy. It utilizes the URL hash (#) so you can create single page applications that still respond to the back button in your browser, just like facebook. And it runs on jQuery.

Categories