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 TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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 StanyonWebDevCommented:
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 TorontoSoftware DeveloperAuthor 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
Chris StanyonWebDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoSoftware DeveloperAuthor Commented:
That was the first thing I checked...but I think I was in a rush.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.