0

I'm trying to attach a jQuery function to an AJAX response. The JavaScript file content is the following.

(function($) {
   $(document).ready(function(){
      $('.rembourcement').find( ".button" ).click(function() {
         var nb=$(this).data('ligne');
         //
         if($('.bloks_sous_lignehold'+nb).is(':visible')){
            $( this).removeClass('button_active');
            $(this).closest('.ligne').removeClass('bg-washed-green2 shadow-1');
         }else{
            $( this ).addClass('button_active');
            $(this).closest('.ligne').addClass('bg-washed-green2 shadow-1');
         }
         $( ".bloks_sous_lignehold"+nb ).slideToggle( "slow" );
     });
}(jQuery));

In the AJAX callback, I used the following code, without success.

$renderer = \Drupal::service('renderer');
$response = new AjaxResponse();
$elem = [
   '#type' => 'container',
   '#attributes' => ['id' => 'table-wrapper'],
   '#theme' => 'Mcfiltered',
   '#mc_build_data' => $mc_build_data
];
$response->addCommand(new ReplaceCommand('#table-wrapper', $renderer->render($elem)));
$response->addCommand(new InvokeCommand('.rembourcement .button', 'click'));
return $response;

This doesn't seem to work. Do you have any idea?

1

2 Answers 2

0

Thank you @Niall, but i used drupal 8's behaviors which is a cool approach to solve this issue. i tweaked my Js to the following:

(function($, Drupal)
{
// I want some code to run on page load, so I use Drupal.behaviors
Drupal.behaviors.smenoModule = {
    attach:function(context, settings){
     
        // Ensure that this behavior is only attached once to the window.
        $($('.rembourcement').find( ".button" ), context).once().click(function () { //$(context).find('[data-mybehavior]')
            var nb=$(this).data('ligne');
            //
            if($('.bloks_sous_lignehold'+nb).is(':visible')){
                $( this).removeClass('button_active');
                $(this).closest('.ligne').removeClass('bg-washed-green2 shadow-1');
            }
            else{
                $( this ).addClass('button_active');
                $(this).closest('.ligne').addClass('bg-washed-green2 shadow-1');
            }
            $( ".bloks_sous_lignehold"+nb ).slideToggle( "slow" );
        });
    }
};
}(jQuery, Drupal));

what the above code does is the same as jQuery's ready function, the content is executed on the page load but also:

After the AJAX Form API has submitted a form.

When an AJAX request returns a command that modifies the HTML, such as ajax_command_replace().

and to ensure that the functions are called only once we use once().

check out this good article

PS: I no longer needed this lign, so i removed it:

$response->addCommand(new InvokeCommand('.rembourcement .button', 'click'));

1
  • Based on your description, it's quite different. My suggestion was for a function that only runs after Ajax. Anyways, it sounds like you got what you needed. Nov 16, 2017 at 18:33
0

In Drupal 7, I have functions like the below in my JS file.

$(document).bind('myFunction', function() {
     //
}); 

In my module, I then have the below.

$commands[] = ajax_command_invoke('html', 'trigger', array('myFunction'));

Maybe Drupal 8 would be similar.

Edit: If you're here looking to run a jQuery function after Ajax, like the title asks, ignore the downvote. Drupal Behaviours may be what you're looking for, but if it's just Dom manipulation, it isn't.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.