Prototype.js stops working after adding jQuery .replace(), other jQuery works just fine

Question

I am using Acuity Scheduling for a project. It uses prototype.js and allows me to add my own custom code to the head and footer of the page (served to my site via iframe). I'm not familiar with prototype.js, so I'm using jQuery in a way that it won't conflict. My jQuery code and prototype.js were working just fine, until I added this code:

jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));

I'm looking for a way to replace specific words in the iframe using jQuery without breaking the other jQuery code or prototype.js.

You can see the content of my iframe here: https://acuityscheduling.com/schedule.php?owner=11134756

If you view the source, you'll see the code I added at the bottom:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

<script language="javascript">
  jQuery.noConflict();

  jQuery(document).ready(function(){
    jQuery('body').on('click', '.time-selection', function() {
      jQuery('.continueAlert').hide();   
      jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>');  
    });

    jQuery('body').html(jQuery('body').html().replace('an Appointment','a Session'));

  });
</script>

Thanks for any help you can offer!

John Resig says to add jquery first

Owlvark
– Owlvark

2012-09-18 01:13:35 +00:00
Commented Sep 18, 2012 at 1:13 — Owlvark
– Owlvark, Commented Sep 18, 2012 at 1:13

dontGoPlastic · Accepted Answer · 2012-09-24 00:46:48Z

2

I see you have some event listeners setup by prototype targeting specific elements:

Event.observe(input, 'focus', function(){InputPrompt.focus(input);});
Event.observe(input, 'blur', function(){InputPrompt.blur(input);});
Event.observe(input, 'keypress', function(){input.label.hide();});

(there may be more of them, but these were what I was able to quickly spot)

When you replace an element's innerHTML property (which is what you're doing with your jQuery find/replace snippet), the browser basically "throws away" the old DOM elements and creates new ones. So the elements you're seeing on the page after you update innerHTML aren't the same once you were previously seeing, which were the ones that have the event listeners attached to them. That's why everything "stopped working"

I see two options:

Update your find/replace script to only update text nodes. That will ensure that the containing elements that have the event listeners won't get messed with.
Use event delegation that doesn't target specific elements. Check out Event.on, paying close attention to the optional 'selector' parameter. Something like:

document.on('focus', 'input', function(event, inputElement) { InputPrompt.focus(inputElement); });

I feel like the the first option would be less intrusive to the code that's already established on this page.

Edit: Here's a very brute-force method to find/replace on all text nodes (using Prototype). There's probably a more efficient way of doing this. Unfortunately, you can't use a CSS selector to match on text nodes, hence all the filtering of childNodes and whatnot -

document.body.select('*:not(script)').each(function(el){
  $A(el.childNodes).each(function(child){
    if (child.nodeType === 3) { // only get text nodes
      child.nodeValue = child.nodeValue.replace('an Appointment', 'a Session');
    }
  })
});

edited Sep 24, 2012 at 0:46

answered Sep 18, 2012 at 16:10

dontGoPlastic

1,78214 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Rummel Over a year ago

Thanks for your answer! How would I go about finding and replacing a text node?

dontGoPlastic Over a year ago

@MarkRummel I've added a bit of script for that. If you could narrow down the main selector (instead of just every non-script element in the body) it would be better, but this should give you an idea.

Mark Rummel Over a year ago

Thanks! Your code with the following modification worked great:

child.nodeValue = child.nodeValue.replace('an Appointment', 'a Session').replace('Appointment', 'Session').replace('appointment', 'session');

. Thanks again!

Collectives™ on Stack Overflow

Prototype.js stops working after adding jQuery .replace(), other jQuery works just fine

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related