I’m just changing some text on a CMS site that I only have access to via custom javascript allowed in the head section. An older jquery is in use (1.4.4). I’m actually calling a external script file in the head which waits until the DOM has loaded before running.
A debug version looks good:
var openid_element = $('div#block-text div.inner');
console.log(openid_element.html());
console.log (openid_element.html().replace('If you would like to register or just log in, please select your OpenID provider:', 'No need to create a new account if you have one with Google/Yahoo/...'));
which gives:
Before:
If you would like to register or just log in, please select your OpenID provider:
<br>
<br>
<form action="/users/login" id="openid" method="post" style="background-image: none; "><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="lW1uEwwE/8WkHByxVwbDtnBDVUc5vFTKkRw9T717Myo="></div>
<div id="openid_btns"><div id="openid_highlight"><a title="Google" href="#" id="btn_0" class="openid_large_btn Google"></a></div><a title="Yahoo" href="#" id="btn_1" class="openid_large_btn Yahoo"></a><a title="AOL" href="#" id="btn_2" class="openid_large_btn AOL"></a><a title="Launchpad" href="#" id="btn_3" class="openid_large_btn Launchpad"></a><a title="OpenID" href="#" id="btn_4" class="openid_large_btn OpenID"></a><br><a title="MyOpenID" href="#" id="btn_5" class="openid_small_btn MyOpenID"></a><a title="Flickr" href="#" id="btn_6" class="openid_small_btn Flickr"></a><a title="Technorati" href="#" id="btn_7" class="openid_small_btn Technorati"></a><a title="Wordpress" href="#" id="btn_8" class="openid_small_btn WordPress"></a><a title="Blogger" href="#" id="btn_9" class="openid_small_btn Blogger"></a><a title="Verisign" href="#" id="btn_10" class="openid_small_btn Verisign"></a><a title="Vidoop" href="#" id="btn_11" class="openid_small_btn Vidoop"></a><a title="ClaimID" href="#" id="btn_12" class="openid_small_btn ClaimID"></a><a title="LiveJournal" href="#" id="btn_13" class="openid_small_btn LiveJournal"></a><a title="MySpace" href="#" id="btn_14" class="openid_small_btn MySpace"></a><div id="openid_inputarea" style="display: block; ">Select your account provider.</div></div></form>
<div id="twitter-and-facebook">
<a href="/twitter/start" id="twitter_auth" title="Twitter">Sign in with Twitter</a>
</div>
After:
No need to create a new account if you have one with Google/Yahoo/...
<br>
<br>
<form action="/users/login" id="openid" method="post" style="background-image: none; "><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="lW1uEwwE/8WkHByxVwbDtnBDVUc5vFTKkRw9T717Myo="></div>
<div id="openid_btns"><div id="openid_highlight"><a title="Google" href="#" id="btn_0" class="openid_large_btn Google"></a></div><a title="Yahoo" href="#" id="btn_1" class="openid_large_btn Yahoo"></a><a title="AOL" href="#" id="btn_2" class="openid_large_btn AOL"></a><a title="Launchpad" href="#" id="btn_3" class="openid_large_btn Launchpad"></a><a title="OpenID" href="#" id="btn_4" class="openid_large_btn OpenID"></a><br><a title="MyOpenID" href="#" id="btn_5" class="openid_small_btn MyOpenID"></a><a title="Flickr" href="#" id="btn_6" class="openid_small_btn Flickr"></a><a title="Technorati" href="#" id="btn_7" class="openid_small_btn Technorati"></a><a title="Wordpress" href="#" id="btn_8" class="openid_small_btn WordPress"></a><a title="Blogger" href="#" id="btn_9" class="openid_small_btn Blogger"></a><a title="Verisign" href="#" id="btn_10" class="openid_small_btn Verisign"></a><a title="Vidoop" href="#" id="btn_11" class="openid_small_btn Vidoop"></a><a title="ClaimID" href="#" id="btn_12" class="openid_small_btn ClaimID"></a><a title="LiveJournal" href="#" id="btn_13" class="openid_small_btn LiveJournal"></a><a title="MySpace" href="#" id="btn_14" class="openid_small_btn MySpace"></a><div id="openid_inputarea" style="display: block; ">Select your account provider.</div></div></form>
<div id="twitter-and-facebook">
<a href="/twitter/start" id="twitter_auth" title="Twitter">Sign in with Twitter</a>
</div>
Everything is identical except for the exact text I’ve changed. Verified via a diff tool.
However when I actually do the change, as in:
openid_element.html(openid_element.html().replace('If you would like to register or just log in, please select your OpenID provider:', 'No need to create a new account if you have one with Google/Yahoo/...'));
everything looks good on screen but the buttons inside this element no longer respond to clicks. Is there some form submission registration mechanism that gets mucked up?
While
.live()would be great if the poster had full control over the page, they don’t. And, the text he wants isn’t even in a<span>or something so he can target it more carefully. 🙁When you use
.html(...), the contents of the element you have selected are replaced using.innerHtml. This will destroy any DOM elements that were there, and with them any registered events.Your best bet will be to pull the real DOM node out of your jQuery collection, and walk its children until you find the text node you want, and replace that with a new text node. Be careful, because different browsers can provide a different arrangement of text nodes — you may have to remove multiple nodes to get it correct, and it may be different on different browsers or versions. 🙁