Question

I need to set the href value of a button relative to the current page url using jQuery mobile.

So I naively wrote the following code :

var path = window.location;
path = path.replace( "shop","edit" );
$("#btnEdit").setAttr( "href", path );

The url of the page is http://mysite/shop/1 and the href of the button should be set to http://mysite/edit/1.

When this code is inserted at the top of my ‘pageinit’ handler I see the url in the location bar of the browser (firefox & chrome) changing to http://mysite/shop/shop and the page is apparently reloaded, so I get a 404 error since it must have a number after /shop/ and it should have the value 1.

Even if I comment it out, restart the web server, the browser automatically replaces the http://mysite/shop/1 with the http://mysite/shop/shop in its url location field. ?!

I have to comment these instructions, restart the server and whatever to avoid this url replacement.

What is going on ?
How can I get the page location url and set my button href value without this nasty side effect ?

---

Edit 1:

1. I should indeed use .attr or .prop instead of .setAttr that doesn’t exist.
2. The url change only show up with chrome and firefox, not in iPad, Android or IE9. Running the chrome debugging tool, it seems there is a DOMException thrown by jQuery at the instruction matches.call( document.documentElement, “[test!=”]:sizzle” );. I have no idea what it means and why it causes the page to be reloaded with a different url.

---

Edit 2:

1. I’m using fapws as web server and mako for templates. After I erased the cached python files generated by mako, the url change disappeared. ?!
2. as suggested I should use .attr and window.location.href. This worked and the href attribute of the button was set to the correct value.
3. Though it still doesn’t work as it should. I now see a new unexpected and undesirable behavior. When clicking on the button, the url in the location bar is changed into http://mysite/edit/1, it executes the pageinit of the shop page (?!), then loads the edit page without executing its pageinit event.

---

Solution:

In the html file I defined this button with a default href value and nothing special:

<a href="#" data-role="button" data-icon="pencil" id="btnEdit"> Edit </a>

In the script file, more precisely in the handler of the $(document).on(‘pageinit’,…) I now have this code which sets the href value but also adds the rel=”external” attribute to the button.

var path = window.location.href;
path = path.replace( "shop","edit" );
$("#btnEdit").attr( "href", path ).attr( "rel", "external" );

There are no more automatic reload of the page and the weird behavior of the load has been removed. It happened because the default behavior of the <a> tag in jQuery Mobile is to load the target page using ajax and not with a normal full page load. The attribute rel=”external” disables this behavior and the referenced page is then fully loaded normally. This behavior is described in the jQM documentation here.

Note: Although many answers contributed concretely to help me solve this problem, I checked Mad Man Moon’s answer because he was very helpful and had the less points. If it was possible to check multiple answers I would have done it.

Answer 1

Even if I comment it out, restart the web server, the browser
automatically replaces the ~/shop/1 with the
~/shop/shop in its url location field. ?!

I have to comment these instructions, restart the server and whatever
to avoid this url replacement.

1. I am a little confused. What is “it” that you are commenting out?
2. Even with your replace being executed against your variable reference to window.location, it should be replacing “shop” with “edit”, so the re-direct should be “mysite/edit/1” (unless the js regex engine is treating the 1 as the capture index?)
3. Based on your RESTful style URL, I suspect that you are using some sort of server side MVC framework. If so, there’s a good chance that the redirect is a server side issue and has nothing to do with the replace.
4. Finally, instead of setting path = window.location, set it equal to window.location.href. window.location is the object which contains the URI properties (href, search, hash, etc). window.location.href is the string property of the complete the URL.

EDIT: I decided to do a little test of my own and confirmed that the issue is that you are setting path = window.location. Set path = window.location.href and your code will work.