jQuery and prototype.js not working after using noConflict

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 trying to run jQuery in a way that it won't conflict. So far I haven't even been able to get an alert() to successfully work. What can I do to be able to use jQuery on this page?

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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript">
  jQuery.noConflict();

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

I read all of the jQuery Documentation on using jQuery with other libraries and tried the examples I thought might work. With the code above, I've also tried it without jQuery.noConflict();, because with the code above I'm not using $, but rather using jQuery.

Thank you for any insight you can offer on this!

Solution

My favorite javascript debugger right now is chrome. Looking at your site in Chrome, i discovered that jQuery('.time-selection'); does not return any results during jquery.ready(). This means no click handler is actually added to the time selection radio buttons.

Once an appointment type and date are selected and the radio buttons appear on screen, then jQuery('.time-selection'); returns all the buttons. I manually added the event at this time using the javascript consolue window, and the text message was correctly appended to the bottom of the window when the radio buttons were clicked.

So, I don't believe you have a conflict between libraries at this point-the problem is that you can't add your event to items that haven't been created yet.

Fortunately, it looks like JQuery has a solution. Using the .on() event handler you can specify event handlers for items that haven't been created yet. Give this code a try:

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

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

When the .time-selection items get created, this event handler will apply to them.

Note: Acuityscheduling.com must be accessed over https. Since your url for the jquery library uses http instead of https, I get an insecure content warning in Chrome. Your browser may be rejecting the jquery library entirely.

Google supports https as well, so I recommend using https instead. Changing

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

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

should do the trick.