jQuery click on button who have ajax callback doesn't work

Question

I have a Drupal website and I create a form with a button who have an ajax callback, the callback works fine but now I want to throw a little javascript function when the use click on the submit button.

I don't want to create a separated file to use it with drupal just for this little function so I try to use the jquery click element :

$(document).on('click', '#commerce-checkout-coupon-ajax-wrapper button', function(){
    console.log("test");
});

or

$('#commerce-checkout-coupon-ajax-wrapper button').on('click', function(){
    console.log("test");
});

But this doesn't work, the log isn't triggered. All other event (hover, mouseenter, etc) works fine but with the click it's not working, the button launch the ajax call to his drupal function but it's not launching my javascript function.

What can I do ? The thing I want to do is removing something from the screen when we click on the button.

Edit: Here is the html of the form (generated by drupal)

<div id="edit-commerce-coupon--2" class="form-wrapper">
  <div class="form-item form-item-commerce-coupon-coupon-code form-type-textfield form-group"> 
  <label class="control-label" for="edit-commerce-coupon-coupon-code--2">Code Promo</label>
  <input class="form-control form-text" title="" data-toggle="tooltip" type="text" id="edit-commerce-coupon-coupon-code--2" name="commerce_coupon[coupon_code]" value="" size="60" maxlength="128" data-original-title="Saisir le code de votre coupon ici.">
  </div>
  <button type="submit" id="edit-commerce-coupon-coupon-add--2" name="coupon_add" value="Ajouter" class="btn btn-success form-submit icon-before ajax-processed"><span class="icon glyphicon glyphicon-plus" aria-hidden="true"> 
</span> Ajouter</button>

EDIT :

I also try another method which can work (I think), it's with the focusout :

 $('#commerce-checkout-coupon-ajax-wrapper .form-control.form-text').focusout(function (e) {
    console.log("test");
    $('.tooltip').remove();
});

The problem is similar, when I click on the button the input doesn't lost the focus, so the tooltip stay on the page

Added [drupal] as it's likely a framework issue. Does the ajax callback automatically auto call event.stopPropagation()? — fdomn-m
– fdomn-m, Commented Aug 9, 2018 at 8:53
I don't know but the ajax callback replace the form with a new one (the same with another line) maybe my problem can come from that ? — Spialdor
– Spialdor, Commented Aug 9, 2018 at 8:55
@Jessy there is no element with the said ID in the shared markup, can you inspect the element and share the markup with the element with ID commerce-checkout-coupon-ajax-wrapper — Arun P Johny
– Arun P Johny, Commented Aug 9, 2018 at 9:20

Fky · Accepted Answer · 2018-08-09 09:43:06Z

1

You can try a work around :

(function($){
  $(document).ready(function(){
     $('button[id*="edit-commerce-coupon-coupon-add"]').on('click', function(){
         console.log('test');
     });
  });

})(jQuery);

Also ensure you have attached correctly your js file to form

$form['#attached']['js'][] = 'pathtomyfile.js';

answered Aug 9, 2018 at 9:43

Fky

2,1711 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Spialdor Over a year ago

The problem is that I don't want to create a new js file just for one function, can I put this in the js file of my template ? And I just see something is that between my button click and the ajax replace there is like 1 seconds, and I need to hide the tooltip at the moment when the ajax replace the old form by the new, there is a way to do this ?

Fky Over a year ago

It's better to use Advance Aggregator module to aggregate in one file js and css , so you can create several js file , it's just for code clarity . You want to desactivate field during ajax replacement ?

Spialdor Over a year ago

I have tooltip who show when I hover the text input, and when I click on the button that throw the ajax replacement I want to make the tooltip disapear

Fky Over a year ago

It's from ajax api drupal , so you can find some help to alter functionnality in this documentation : api.drupal.org/api/drupal/includes%21ajax.inc/group/ajax/7.x

Collectives™ on Stack Overflow

jQuery click on button who have ajax callback doesn't work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related