Search code examples
javascriptjquerybookmarklet

Javascript bookmarklet, href breaks?


I have been fretting over this for a LONG time, and i am really hoping that someone knows the problem and a way to fix it..

I am generating a bookmarklet and it works perfectly, magically if i may say so after so many days of grinding my butt off on MYSQL and PHP..

For the example, please consider this bookmarklet being generated.

javascript:(function(){ a=document.createElement('script'); a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'); document.body.appendChild(a); data='[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush@mail.com","text"],["#rdosex_0,#rdosex_1","1","radio"]]'; for(a=$.parseJSON(data),b=a.length-1;0<=b;b--){ c=a[b]; if (c[2] =='text') { $(c[0]).val(c[1]); } else if (c[2] == 'radio'){ rdata = c[0].split(','); rnum = c[1] - 1; select = rdata[rnum]; $(select).attr('checked', true); } } })();

It is a recreation of a closure compiled bookmarklet, i was not able to find the original since it never got saved(Long story..)so i figured i might aswell edit the closure compiled one. The JSON file is being inserted like that because the bookmarklet has to be generated dynamically and is destined to run on an HTTPS website and hence cant send out AJAX calls..

Anyways, the code works perfectly but when i try to insert it as a hyperlink, it breaks. If need be, the code pretty much goes like this

"<a href=" + (Code that was shown above) + "> Drag me to your bookmarks bar!</a>"

And it breaks.. Here is the source code being printed out if need be.

<span class='span6'>Please drag the following button to your bookmarks bar! <br>javascript:(function(){ a=document.createElement('script'); a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'); document.body.appendChild(a); data='[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush@mail.com","text"],["#rdosex_0,#rdosex_1","1","radio"]]'; for(a=$.parseJSON(data),b=a.length-1;0<=b;b--){ c=a[b]; if (c[2] =='text') { $(c[0]).val(c[1]); } else if (c[2] == 'radio'){ rdata = c[0].split(','); rnum = c[1] - 1; select = rdata[rnum]; $(select).attr('checked', true); } } })();<a href='javascript:(function(){ a=document.createElement('script'); a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'); document.body.appendChild(a); data='[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush@mail.com","text"],["#rdosex_0,#rdosex_1","1","radio"]]'; for(a=$.parseJSON(data),b=a.length-1;0<=b;b--){ c=a[b]; if (c[2] =='text') { $(c[0]).val(c[1]); } else if (c[2] == 'radio'){ rdata = c[0].split(','); rnum = c[1] - 1; select = rdata[rnum]; $(select).attr('checked', true); } } })();'>Drag me!</a></span>

It breaks on so many levels that i have tried many times to get around it, but each time i make a minor change it breaks again. I am really hoping for a more reliable solution and would be EXTREMELY thankful if someone can help me..

Edit: This is what happened after escaping double quotes with htmlspecialchars

<span class='span6'>Please drag the following button to your bookmarks bar! <br>javascript:(function(){ a=document.createElement('script'); a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'); document.body.appendChild(a); data='[["#txtapplicantlname","agrawal","text"],["#txtapplicantfname","aayush","text"],["#txtfather","Ranjan","text"],["#txtmother","Neelam","text"],["#txtPincode","452010","text"],["#txtPhone","2147483647","text"],["#txtEmail","aayush@mail.com","text"],["#rdosex_0,#rdosex_1","1","radio"]]'; for(a=$.parseJSON(data),b=a.length-1;0<=b;b--){ c=a[b]; if (c[2] =='text') { $(c[0]).val(c[1]); } else if (c[2] == 'radio'){ rdata = c[0].split(','); rnum = c[1] - 1; select = rdata[rnum]; $(select).attr('checked', true); } } })();<a href='javascript:(function(){ a=document.createElement('script'); a.setAttribute('src','//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'); document.body.appendChild(a); data='[[&quot;#txtapplicantlname&quot;,&quot;agrawal&quot;,&quot;text&quot;],[&quot;#txtapplicantfname&quot;,&quot;aayush&quot;,&quot;text&quot;],[&quot;#txtfather&quot;,&quot;Ranjan&quot;,&quot;text&quot;],[&quot;#txtmother&quot;,&quot;Neelam&quot;,&quot;text&quot;],[&quot;#txtPincode&quot;,&quot;452010&quot;,&quot;text&quot;],[&quot;#txtPhone&quot;,&quot;2147483647&quot;,&quot;text&quot;],[&quot;#txtEmail&quot;,&quot;aayush@mail.com&quot;,&quot;text&quot;],[&quot;#rdosex_0,#rdosex_1&quot;,&quot;1&quot;,&quot;radio&quot;]]'; for(a=$.parseJSON(data),b=a.length-1;0&lt;=b;b--){ c=a[b]; if (c[2] =='text') { $(c[0]).val(c[1]); } else if (c[2] == 'radio'){ rdata = c[0].split(','); rnum = c[1] - 1; select = rdata[rnum]; $(select).attr('checked', true); } } })();'>Drag me!</a></span>

Solution

  • Please use

    document.getElementsByTagName('head').item(0).appendChild(a);
    

    instead of what you use

    document.body.appendChild(a); 
    

    I hope it will work well.