JS Function Executes Twice

Hi Experts,

Can anyone tell me why the following executs twice in a row for every click.  For example, the alert('Please choose the desired time slot to book.');

I get 2 consecutive alerts when the slot is actually empty (when I place a breakpoint it will execute twice); and when slot is not empty, the entire function will run as expected, and then the alert will come up once.

I placed e.preventDefault(), but it is not a fix

The function is

    $('#btnApptBook').on('click', function(e){
       
       e.preventDefault();
       var slot = $('#slots').val(); 
       var proceed = validateClient();
       
       //Check Google-Specific Requirements
       if (proceed){
           
            if ((slot === '') || (slot == null)){
                alert('Please choose the desired time slot to book.');
                proceed = false;
                return false;
            }            
        }
        
        if (proceed){
            
            var gmail_id = $('#gmail_id').val();
            var client_id = $('#id').val();
            var duration = $('#duration').val();
                    
            var slot_id = $('#slots').val();
            var fn = $('#first_name').val();
            var ln = $('#last_name').val();
            
           var google_path = PATH_TO_ROOT + 'utilities/google_calendar/index.php?ajax_call=';
           
           if (gmail_id === ''){
               google_path += 'book-appt';
           } else {
               google_path += 'change-appt';
           }
           
           $.ajax({
                async: false,
                url: google_path,
                data: {
                        gmail_id: gmail_id,
                        slot_id: slot_id,
                        fn: fn, 
                        ln: ln,
                        client_id: client_id,
                        duration: duration,
                      },
                type: 'GET',
                dataType: 'JSON',
           error: function(xhr, textStatus, errorThrown){
                alert('Request Failed');
                console.log('******ERROR START*****');
                console.log('xhr: ', xhr);
                console.log('textStatus: ', textStatus);
                console.log('err thrown: ', errorThrown);
                console.log('******ERROR END*****');
            },
            success: function (data, textStatus, jqXHR) {
                                
                    updateAppt(data);
                
            }
           });           
        }
        
    });
    

Open in new window


Any help will be greatly appreciated.
APD TorontoAsked:
Who is Participating?
 
Chris StanyonCommented:
OK. You're including the google_calendar.js file twice so the click event is bound twice. Only include it once and you'll be fine :)
0
 
zephyr_hex (Megan)DeveloperCommented:
Ideally, you would post the relevant HTML so we can see why it's triggering twice.  But as a band-aid solution, you need to prevent the event from bubbling up the DOM, which would be e.stopPropagation()
0
 
Chris StanyonCommented:
Do you have a link to this in context? You're not showing any of your HTML or the other javascript methods, so we're only seeing a small part of it.
0
 
APD TorontoAuthor Commented:
I just put together quick prototype @ http://crm-cor.aces-project.com/jsx2/

in order to replicate my issue, scroll at the very bottom and without filing anything, click Book Slot.

You will see that alert comes up twice
0
 
APD TorontoAuthor Commented:
That was the first thing I checked...but I think I was in a rush.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.