Note that there are some explanatory texts on larger screens.

plurals
  1. POInternational Domain Names + JQuery attr('href') problems in Firefox
    primarykey
    data
    text
    <p>I'm trying to set the href of an a element using jQuery. When I set an IDN in Firefox 6, the href is url encoded. One example is the IDN <a href="http://r%C3%A4ksm%C3%B6rg%C3%A5s.se">http://räksmörgås.se</a>, which is mangled to <a href="http://r%C3%A4ksm%C3%B6rg%C3%A5s.se">http://r%C3%A4ksm%C3%B6rg%C3%A5s.se</a>. When I do the same in other browsers (IE8, Chrome 13, Safari 5.1), the IDN isn't encoded.</p> <p>The reason I am trying to do this is that i am letting the user change hrefs and then upload a subset of the page content by ajax to a web server. I then have problems since the link is buried deep in a html string; and I'd prefer not to dig up all a elements in the html string.</p> <p>Is there any way to disable the encoding of hrefs when setting it in Firefox? Or do you have any other ways I might solve the problem?</p> <p>(I've noticed that if the href is a valid punycode IDN, i.e. <a href="http://www.xn--rksmrgs-5wao1o.se" rel="nofollow">http://www.xn--rksmrgs-5wao1o.se</a>, the browsers are fine and dandy. But I then have to do the punycode encoding in js, something which I prefer not to; there might be one or several bugs, and there doesn't seem to be a official release of an encoder/decoder.)</p> <p>The following html page displays my problem. If you input an international domain name (copy-paste "http://www.räksmörgås.se"), #linkHtml will get the entire a element, including the mangled href if using Firefox, and the correct href if using any other browser.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ $("#linkText").focus(); $("#linkText").keyup(function() { var href = $(this).val(); $("#link").attr('href', href); $("#linkHtml").text($("#link").parent().html()); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;input id="linkText" type=text /&gt;&lt;/div&gt; &lt;div&gt;&lt;a id="link" href="#"&gt;link&lt;/a&gt;&lt;/div&gt; &lt;span id="linkHtml"&gt;&lt;/span&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload