2

First I thought that this would not be a Drupal specific problem, but jQuery specific solutions didn't solved it. I hope you have some advices.

I have a form with lots of fieldsets. To find the right fieldset I've implemented a textfield as a filter with jQuery to show just the fieldset I want to see:

$(document).ready(function(){
    $(document).on('keyup','#textfield-filter', {} ,function(e){    

        if($(this).val()) {
            var val = $(this).val()
            $('#myform fieldset').each(function() {
                if($(this).attr('id').indexOf(val) >= 0){
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });
        }
        else {
            $('#myform fieldset').each(function() {
                $(this).show();
            });
        }


    });
});

That works on page load. But I also have a Drop Down Select Menu to select a complete different set of fieldsets. With a click on a button the entiry page is refreshed with the set of fieldsets, which was selected in the Drop Down Menu. But unfortunately, the 'keyup' event of my textfield is not fired after refreshing the page with the button. As I said, I thought about a jQuery specific problem first, but the only solution I found was to attach the event handler for now and for the future, what I already did with $(document).on('keyup','#textfield-filter', {} ,function(e).

The form is rendered with the Form API. If necessary I can -of cause- give you my php code.

I would welcome very advice.

Many thanks!

Daniel

  • Yes thanks. The Drupal object was the solution. Thanks! – Daniel Dec 28 '14 at 15:16
4

You need to use the drupal behaviors: if you run your code on ready function when the form is rebuilded on an ajax action all the handlers you have active will disapear because the item fields are replaced by the new ones.

This is the basic drupal behaviors template:

(function ($) {
  Drupal.behaviors.mymodulecustombehavior = {
    attach: function (context, settings) {

      // Execute your code

    }
  };
})(jQuery);

This way after a ajax, all you code inside this behaviour will be called again.

Maybe you will want to add .once() property to avoid execute some parts of your code twice.

Documentation: https://www.drupal.org/node/756722

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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