0

I have a js file that I add it to my form in hook_form_alter with drupal_add_js, in my js I set a click handler on Html object(lets name it ".myhtml" ), everything work correctly in first load. I have a multi value image field in my form and when try to upload a image ajaxly , my js run again , and when I click on ".myhtml" my click handler called twice ( if I upload two image it fired triple and ... ).

One of my solution was first unbind then bind click,it work but I used icheck Jquery plugin for that field,then when I unbind it( icheck plugin ) will not work. So my problem is prevent run js file to again when file uploaded by ajax.

part of my code in hook_form_alter

    $scripts = drupal_add_js();
    $jspatah = drupal_get_path('module', 'tgdev') . '/tgsp.js';
    if(!isset($scripts[$jspatah])) {
        drupal_add_js($jspatah, array(
            'type' => 'file',
            'scope' => 'footer',
            'every_page' => FALSE,
            'weight' => 10,
        ));
    }

and part of my js file

 (function ($) {
Drupal.behaviors.tgdev = {
    attach: function (context, settings) {
      $(document).ready(function(){
            if($('#edit-field-images .image-preview').length==0){
            $('.form-item-field-feature-und-email .iCheck-helper ').on('click', function () {
                  if($(this).parent('.icheckbox_line').hasClass('checked')) {
                  console.log('checked');
                     getSubsAj('mail');
             });
             }
        console.log($('#edit-field-images .image-preview').length);
        });
      }
    };
})(jQuery);
9
  • Please share the code snippet.
    – niksmac
    Jul 17, 2015 at 8:54
  • @NikhilM I update question with some of my code, problem is when file upoaded ajaxly, my js run again and again.
    – Yuseferi
    Jul 17, 2015 at 9:11
  • What i suspect is the same JS loaded each time your #ajax gets succeeded, try moving the .js out from form
    – niksmac
    Jul 17, 2015 at 9:33
  • @NikhilM I think so, but I want that js file load only in that form, maybe I must achieve my job with another method ( Not add in form alter, in another way and restrict for that form)
    – Yuseferi
    Jul 17, 2015 at 9:43
  • 1
    You shouldn't need to mix behaviors with dociment.ready. Behaviors are kinda replacement, not wrapper for it.
    – Mołot
    Jul 17, 2015 at 10:04

2 Answers 2

1

Solution: Using jQuery Once

Drupal 7 integrates the Jquery Once plugin into Drupal 7 core. This plugin adds a simple class to the HTML element to ensure that the behavior is only processed one time. Here is how we would modify our JavaScript to work with the Jquery Once plugin.

(function ($) {
  Drupal.behaviors.tgdev = {
    attach: function (context, settings) {
      if($('#edit-field-images .image-preview').length==0){
        $('.form-item-field-feature-und-email .iCheck-helper ').once('click', function () {
          if($(this).parent('.icheckbox_line').hasClass('checked')) {
            console.log('checked');
            getSubsAj('mail');
          });
      }
    }
  };
})(jQuery);
1
  • Yes,I used it before but forgot it( once) , I test this but I have one problem, When I remove $(document),ready icheck class not exist yet, try to change weight but not work ` $jspatah = drupal_get_path('module', 'tgdev') . '/tgsp.js'; drupal_add_js($jspatah, array( 'type' => 'file', 'scope' => 'footer', 'every_page' => FALSE, 'weight' => 100, // 'group' => 100, ));`
    – Yuseferi
    Jul 17, 2015 at 10:33
0

I solve problem with this method in my js file :

instead of

 (function ($) {
Drupal.behaviors.tgdev = {
    attach: function (context, settings) {
      $(document).ready(function(){
            if($('#edit-field-images .image-preview').length==0){
            $('.form-item-field-feature-und-email .iCheck-helper ').on('click', function () {
                  if($(this).parent('.icheckbox_line').hasClass('checked')) {
                  console.log('checked');
                     getSubsAj('mail');
             });
             }
        console.log($('#edit-field-images .image-preview').length);
        });
      }
    };
})(jQuery);

I use

 (function ($) {
     $(document).ready(function(){
            if($('#edit-field-images .image-preview').length==0){
            $('.form-item-field-feature-und-email .iCheck-helper ').on('click', function () {
                  if($(this).parent('.icheckbox_line').hasClass('checked')) {
                  console.log('checked');
                     getSubsAj('mail');
             });
             }
        console.log($('#edit-field-images .image-preview').length);
        });
})(jQuery);

and everything work correctly !!!

2
  • it will work, but its not the drupal way.
    – niksmac
    Jul 17, 2015 at 11:14
  • @NikhilM Drupal way not worked :( I try your solution, icheck elements available after document ready
    – Yuseferi
    Jul 17, 2015 at 12:35

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.