Is there a way to remember the click that transitions to a new page using jquery. I have a page where a tree drop down structure transitions to a new page. If the user comes back to previous page, i'd like to have the tree expanded as it was before. The page from which it happens uses a .live('click') function. I don't have any code that I did so can't paste anything here. Just looking out for suggestions or hints! :)
Use cookies. When the tree is expanded, store it:
document.cookie = "tree=open";
When the user visits the page, check for it:
if (document.cookie.search(/tree-open/) != -1) {
...
}
My code is over-simplified to help you look in the right direction. You may want to borrow a JS cookie library.
If your application is in HTML5 then you can use HTML5 Web Storage and save the clicked link in it and on load check if some link was clicked then open that else open the first link, you can check it in jquery easily.
thanks
abhishek
Related
I am very new to javascript... I would like to know if someone can help me, I have made a navigation tab that I want to be active when I visit a certain url... well, with split I have been able to do it in most of the links that needed...
But the CMS I'm using generates part of that link... and I can't complete the script...
the example of the full link is:
https://www.example.com/shop/index.php?rp=/announcements/1/New-Website-redesigned.html
Well that already with the final result... the problem is that there are quite a few possible results from
https://www.example.com/shop/index.php?rp=/announcements
There are several options to choose from and among those, when you click, it sends to the link above, (eye is content created by the cms) the idea is that the tab always stays active when browsing everything that is announcements and its derivatives. ..
for this i used the following in most of my links.
if(url.split('?')[0] === 'https://www.example.com/shop/supporttickets.php'){
btn1.classList.remove('active')
btn2.classList.remove('active')
btn3.classList.add('active')
btn4.classList.remove('active')
btn5.classList.remove('active')
}
This generally works, but I can't apply it to the example above...
Right now when the user inputs a word in the textfield and hits search, the form submits using $.get(). The data(JSON) is fetched from the server and then the UI is updated.
What I want to do is pretty simple:
1) When the form submits, the URL of the browser needs to update (something like search/zyx, zyx is what the user is searching for).
2) when the page is booked into favorites, or clicked as a link from somewhere the page needs to load and then the textfield value have to be 'zyx'. Also the UI needs to show search result of zyx.
This is important to my app because I will be using Google Analytics. So the URL is needed to reflect behaviour. Plus the other issue like back button history. Is this possible using just jQuery or some extremely light libraries build on jQuery. I have searched everywhere and all the solutions I found were using MVC frameworks. Or another solution was to use a templating framework like this one. However my app is way too simple for these solutions.
So, the approach you you need is to listen to hash changes in the url and based on this get the current page and render it in a cointainer. Something like this:
Go to Page 2
<div class="page-container"></div>
<script>
$(window).on('hashchange',function(){
var page = window.location.hash;
$.get('pages/'+page+'.html', function(pageContent){
$('.page-container').html(pageContent);
})
});
</script>
Thank you every one. So I ended up using a combination between #Tulio Faria 's answer and #Gabriele Mantovani.
To get the search keyword from url I used window.location.hash
To update url used history.pushState({id: 'query'}, '', 'some_url_string');
Used $(window).on('hashchange',function(){...}) to load page of the current search keyword if either back or forward buttons of browser were clicked
If I understand you want to change the URL of the user when some actions are done. There is an other topic about it HERE, and they use
window.location.replace(url)
Hope it helps you :)
I am working on javascript as well as jquery. and i am using 2divs in my page. so when my page loads the second div is hidden and when a button from the first div is clicked it navigates to the second page. so when i press refresh button now. the page navigates to the first div as it reacts when the page is opened for the first time. any ideas or suggestions to make the second div display even when the page is refreshed. thanks in advance. here is my fiddled code it works fine in the fiddle as i exactly want. but it fails in my project code. http://jsfiddle.net/pWryf/ . any example to attain this through cookies.?
Here is my code for the div:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
});
Try something like this using localStorage:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
localStorage['shown'] = '.cont1';
});
$(function() {
var sel;
if (sel = localStorage['shown']) {
$('.cont1, #log1').hide().filter(sel).show();
}
});
http://jsfiddle.net/5aJZR/
Use can also use cookies for this purpose.
I can think of atleast 2 frontend approaches to this problem:
using a cookie or a more modern localstorage solution to handle sessions. (already been here, cookie)
using a one page app, where navigations is after the hash # sign. such as in backbone webapps.
You can also use some kind of server side session handling, most web framework have one embedded.
I am developing a shopping site where user can search products using different criteria.
On checked_changed event of check box i want to change URL, but condition is that my page does not make full post back..
This answer will help you......
You need HTML5-able browser and some JavaScript. Here is the demo of HTML5 history feature.
GitHub implemented that feature for tree browsing. And there is screencast in railscast.com.
Original answer is :
change url without making page postback -- mvc
Perhaps this is the solution http://www.asual.com/jquery/address/ - asual provides the functionality for easily changing addresses on the fly
What I can see there is the same functionality where we link an anchor tag to a div in the same page by appending #. You can see the the URL is changing by just appending the #!gender=men/page=1 to the end.
Also there is no checkbox. I saw that portion in firebug. Its just an image. But we can achieve it through checkbox as well on the onclick event but just appending the #[your params] to the URL.
Thanks,
Sayed.
I want to link to a page which contains multiple support topics.
When the user clicks on the link while being on an external site, the topic should be expanded as soon as the user arrives on the support page.
Example:
I link to this page
http://www.nintendo.de/NOE/de_DE/support/nintendo_ds_lite_159_142.html
Topic I want to be opened on arrival
javascript:fadeNAppearDiv('box_3_9277');
(First topic in the FAQs)
It's not clear if you are maintaining the target site (where the div will open) or not. If you don't have access to the code for that page, then there isn't any way to invoke the javascript function on it. If you can modify that page, you can do as #PhiLho suggests and modify the URL you are using to specify the DIV to open and have an onLoad handler that parses the URL and opens the appropriate DIV.
Good idea, but I don't see the question... :-)
The way I saw on some sites, like deviantART, is to use the sharp anchor notation: myURL.com/foo/page.html#TopicToExpand
JS can analyze the current URL and get the anchor part, then do whatever you need to do to highlight/jump to the right place.