CODEWITHSUNDEEP
jqueryhtml
Jacob Maltoy
Jacob Maltoy

Reputation: 61

JQuery not firing on first click, but fires on second click

I am attempting to get a button to run AJAX to update my database on MySQL, then fire off a JQuery function to load (basically refresh) a different file so that there is no page refresh needed. I am fairly new to JQuery & AJAX so I may be doing this completely wrong. I have already gotten AJAX to work with updating the database, but JQuery seems to only be registering the second click.

I have searched a ton through Stack Overflow, but I haven't found anything that seems to work for me. The most common solution I've found is:

$('#display_details').on('click', '.addpa1', function() {
        $('#display_details').load('project_member_list.php');
});

This isn't working for me (or I'm not using it properly).

JQuery

$(document).ready(function(){
    $('.editProject').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.addpa1').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.addpa2').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.rempa2').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.rempa1').click(function(){
        $('#display_details').load('project_member_list.php');
    });
   })

HTML 

<a name='addpa1' href='#' class='btn btn-success btn-sm addpa1' id='User.1' role='button' data-proid='2' title='Make PA #1' data-toggle='tooltip'>Make PA #1</a> 
<div id="display_details"></div>

I gave an example of one button to limit the clutter. The rest are identical other than the class name which goes along with their click function.

Additional JS

$( document ).ready(function() {

$( "#showToast" ).click(function() {
$('.toast').toast('show');
});

});

$('#modal').on('shown', function () {
   $("#modal-content").scrollTop(0);
});

I'm having to click twice for the JQuery to register.

Upvotes: 2

Views: 2506

Answers (3)

Jacob Maltoy
Jacob Maltoy

Reputation: 61

I figured it out. I was calling two seperate functions for each button (one for AJAX, other for JQuery). Putting the JQuery function contents into the AJAX function solved the issue.

Thank you to everyone who helped me out on this issue!

Upvotes: 4

blupointmedia
blupointmedia

Reputation: 604

I am wondering if the element isn't attached to the dom prior to you trying to click it. Can you try this below to see if it works on one click and if you get the console.log?

$('body').on('click', '.addpa1', function(e){
    e.preventDefault();

    console.log('.addpa1 clicked');
    $('#display_details').load('project_member_list.php', function() {
        console.log( 'Load was performed.' );
    });
});

What happens if you console.log the completed request? See above.

Upvotes: 0

EGC
EGC

Reputation: 1779

Have you investigated the Prevent Default characteristic of onclick events before?

Sometimes, the default can cause quirky behaviour like it not working on the initial click.

You could try changing your onclick event to something like this (for each onclick):

$(document).ready(function() {
  $('.addpa1').on('click', (event) => {
    event.preventDefault();
    $('#display_details').load('project_member_list.php');   
  });
})

Or something like this:

$(document).ready(function() {
      $('.editProject').click(function(event) {
        event.preventDefault();
        $('#display_details').load('project_member_list.php');
      });
    });

Read about Prevent Default here: event.preventDefault()


I think it also might be worth noting this section of ARIA Compliance - ARIA button role Example

Where this is considered a "Non-compliant Example":

<a href="#"
     role="button"
    >
  Show alert
</a>

So there's a chance your example has semantic issues in terms of ARIA.

Let me know if that helps any?

Upvotes: 1

Related Questions