I am working a one-page website that uses Jquery and ajax. Because it is a one page website, its url is always something like mydomain.com/#contact. Now I have successfully made an ajax call and want to refresh the page and scroll to a particular section of the page with a different id say, mydomain.com/#home. In order to do this, I will have to get the current url using document.URL (let's say it returns mydomain.com/#contact), then I remove /#contact and replace it with /#home.
I know I can replace /#contact with /#home by simply concatenating it with + but I don't know the Jquery function (if any) to remove the /#contact.
Thanks so much for any help
Simply set the hash, you don't need to evaluate the existing URL:
window.location.hash = "Home";
Related
So ostensibly I'm trying to make a button or a link who's target is contingent on the current page's URL. I'm working on a Wordpress portfolio site that opens up different projects in an Ajax window, but I also want to be able to link to the separate project page from that window. For instance, if I click the thumbnail for a project titled "Blue" it opens up the project in the ajax window and the url changes to "www.website.com/#blue." Incidentally, the url of the corresponding project page would then be "www.website.com/projects/blue". The idea is to hardcode the button into the Ajax window and write a script that generates the correct URL for the project page so my client doesn't have to copy-paste the code for the button and update the target URL every time she posts a project. This is what I came up with, but I'm not great with Jquery or Javascript and I think something might be wrong with my syntax or the structure of the script. Right now, nothing happens when I press the button.
First it splits the url at each "/" and creates an array from the different strings, then it removes the "#" from the unique string, and opens a new window with the new address.
EDIT There were some syntax errors, but it's still not working. Any thoughts on this new version:
$(".comment_button").click(function(){
var parse_url = window.location.href.split('/');
var project_name = parse_url[2].replace("#", "");
window.open("http://www.balletinform.com/projects/" + project_name);
});
Tried using a element ?, with target="_blank" attribute ?
<a id="blue" href="www.website.com/projects/blue" target="_blank">blue</a>
If I understand correctly, what you want to get is the #blue part of the url.
If so, you can use window.location.hash.
Your function will then looks like window.open("http://www.balletinform.com/projects/" + window.location.hash.substring(1));
Your current function was setting project_name to "www.balletinform.com" ([0]=>"http:"; splitted(/); [1]=>""; splitted('/'); [2]=>"www.balletinform.com"; splitted('/'); [3]=>"#blue").
So an alternative solution would have been var project_name = parse_url[parse_url.length-1].replace("#", "");
var new_url=""+(window.location.href).replace('#','projects/');
window.open(new_url);
Try replacing # with 'projects/'
I have seen this question before but I haven't found a working solution.
The question is quite easy.
If I call a page like this.
div.load('page?foo=bar');
I want to be able to retrieve foo in some way an use it in a javascript called by page. But I only manage to obtain the paramethers of the parents url.
I know I can declare variables in the parents javascript code but that is not my preffered way.
So I really hope someone has a solution to this problem.
♥ you guys
You could use something like this to parse the URI:
http://blog.stevenlevithan.com/archives/parseuri
Then you can access the parameters easily from the parent page:
// Set the link that we want to load/examine
var link = 'page?foo=bar';
// Load the link content (as per your code)
div.load(link);
// Grab whatever variables we want from the link
var uri = parseUri(link);
var foo = uri.queryKey.hasOwnProperty('foo') ? uri.queryKey.foo : false;
alert(foo);
EDIT:
As bfavaretto already commented, the content loaded in via AJAX is just a string. It's not a page that will be aware of its URI.
However, if you really want the loaded content to be able to access its URI, just make it available in the content itself. For example:
$('#my_div').load('page?foo=bar)
And in the content of "page?foo=bar":
<div class="container" data-page-uri="{{ insert uri here with php, ruby, whatever }}">
<!-- my page content -->
</div>
Now in your loaded content, you can determine the URI by finding the relevant div with the "data-page-uri" data attribute. Once you have the link, you said that you know how to grab the parameters from it...
Hope that helps.
I think you have two solutions. One, if page has a hidden div, with the data needed, the second one, probably the ajax response object has the caller url. You should study the response xhr object.
I've once used jQuery UI in order to add the tab feature to one of my project.
Everything was working just fine, and I noticed each tab was bound to a URL hash tag (I do not know you say it in english). As an example, once I clicked on the first tab, #Tab0 was added to my URL.
I want to reproduce this behavior in my current project. But I'm not using jQuery UI tabs, I am porting a desktop application and there are JavaScript buttons which write and replace content inside my page (in the manner of different pages, but without reloading).
How do I proceed to mimic this behavior ? Do I have to manually fetch the tag in the URL and do things accordingly all by JavaScript ?
Thanks,
u could do it this way:
creating an url with hash from current url:
var url = window.location.href + '#Tab0';
reading a hash from current url:
var hash;
if (window.location.href.indexOf('#') > -1)
{
hash = url.split('#')[1];
}
you can do this by using location.hash:
//you can set hash
location.hash = "something";
//and read it eg. http://domain.com#something
console.log(location.hash); //will return the current hash value 'something'
Also you have to remember that if your anchor tag has hashed href attribute e.g. <a href="#something"> it will be appended automatically to current url and browser will try to find given id on the page. Of course you can prevent that default behaviour.
I am developing my own template selector for CSS templates. At the moment, it works fine, clicking on a name from the selectbox changes the template. However there is 1 function that is missing.
If you look here: http://www.demo.joomforest.com/?template=corporate
you can obviously see the URL contains ?template=corporate at the end of it, thus if you enter that URL, it loads the corporate template.
This is my selector so far: http://joomjunk.co.uk/demo
As you can see, I added a hash + template name to the end of the url upon selecting a template, however if you copy and paste that URL into a new tab for example, it loads the default template.
So my question is, how can I add something similar to ?template=corporate and have it load the correct template upon loading that specific URL?
I'm not asking for the full code, but to point me in the right direction.
Thanks in advance.
window.location.search
This will contain whatever comes after the ? in your URL, including the ?
if
window.location.href === "http://www.demo.joomforest.com/?template=corporate"
then
window.location.search === "?template=corporate"
if you want to parse the query string, there are many resources available. If, however, you just want to do it for this specific case:
var tmpl = window.location.search.split('=')[1];
// tmpl === "corporate"
This will split the string on = and then return the second element in the array
If you have an URL like http://foo.bar/#corporate you can just check the window.location.hash in your javascript and load that template immediately.
Seems reasonable since you already add hashes in your dropdown – the user will see the same template if they choose to refresh the page.
You might even be able to trigger a click event on the right dropdown menu item based on the hash property, but that would require the DOM to be fully loaded.
I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.