2

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!

Mark Rummel
  • 2,920
  • 10
  • 37
  • 52

1 Answers1

1

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>

to

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

should do the trick.

Community
  • 1
  • 1
Slider345
  • 4,558
  • 7
  • 39
  • 47
  • Thanks! I'm glad there isn't a conflict. However, I'm still not sure how I can modify my code to get it to work. Can you elaborate on that? Thanks again! – Mark Rummel Sep 14 '12 at 17:04
  • I've updated the code at https://acuityscheduling.com/schedule.php?owner=11134756 with `.on()`. It is not working for me. Is that because when `#rest` is added to the DOM, `.time-selection` has not been added yet? I'm trying a few other things with `.on()`. If you have another thought, please let me know. Thanks! – Mark Rummel Sep 14 '12 at 17:36
  • 1
    Interesting. The code you've updated actually works for me. You might try changing your address to the jquery library from `http:` to `https:`. I'm getting a warning in Chrome about not loading the library because it's not secure. – Slider345 Sep 14 '12 at 18:47
  • I've changed the code to include `'body'`, but it still doesn't seem to be working. Thanks again for your help! New code live at https://acuityscheduling.com/schedule.php?owner=11134756. – Mark Rummel Sep 14 '12 at 18:48
  • I've updated my answer with the details of the https problem. – Slider345 Sep 14 '12 at 19:03
  • Works with `https`! Thank you so much! – Mark Rummel Sep 14 '12 at 19:04