# Ajax düğmesini tıklarken JS onay açılır penceresi nasıl eklenir

#Ajax etkin bir temel FAPI düğme girişi var ve bu iyi çalışıyor, ancak bir JS "Emin misiniz?" kod gerçekten önce düğmeyi tıklattığınızda onay pop-up ve ne yapacağımdan emin değilim çünkü ne yaparsam yapayım FAPI JS tıklama önce yemek gibi görünüyor.

Böyle bir satır içi onclick işleyicisi eklemeyi denedim:

$form['search_filters']['channels']['channel_delete_' . $channel->nid] = array(
  '#type' => 'button',
  '#name' => 'channel_delete_' . $channel->nid,
  '#value' => 'Delete',
  '#attributes' => array(
    'class' => array('confirm'),
    'onclick' => "return confirm('Are you sure you want to delete that?')"
  ),
  '#button_type' => 'no-submit',
  '#ajax' => array(
    'callback' => 'delete_channel_callback',
    'wrapper' => 'channel_container_' . $channel->nid
  ),
);

... bu da yardımcı olmuyor ve ben de eklemeyi denedim:

$('.confirm').click(function(e) {
  e.preventDefault();
  alert('Is this recognized')? // never runs
});

modülümün JS'sinde de yok sayılır.

Başka fikir var mı? Drupal #ajax'ın tanıyacağı yığının üstüne bir gönderme işleyicisi eklemenin bir yolu var mı?

Drupal bir PHP çerçevesidir ve bunu ve FAPI'yi kullanarak ne kadar süslü AJAX şeyleri elde edebileceğiniz şaşırtıcıdır. Ancak sınırları vardır ve böyle bir kullanım durumunda, özel JavaScript kullanmanızı öneririm. Ayrıca, genellikle JavaScript iletişim kutusunu kullanmak yerine, jQuery kullanıcı arayüzünü kullanarak temalı bir iletişim kutusu oluşturabilirsiniz.

Her neyse, karşılaştığınız soruna muhtemelen gönder düğmesinde AJAX kullandığınız için neden oluyor. Gerçek silme çağrısı için AJAX kullandığınız preventDefaultve benzeri çalışmaz.

Yapmanız gereken böyle bir şey. (Bu yaygın olarak test edilmemiştir, ancak çalışmalıdır.)

Drupal.behaviors.module = {
  attach: function() {

    var events = $('.confirm').data('events'); // Get the jQuery events.
    $('.confirm').unbind('click'); // Remove the click events.
    $('.confirm').click(function () {
      if (confirm('Are you sure you want to delete that?')) {
        $.each(events.click, function() {
          this.handler(); // Invoke the click handlers that was removed.
        });
      }
      // Prevent default action.
      return false;
    });
  }
}

Jeroen'in googletorp kodunu düzelttiğini doğruladı.

Ancak, ben kendimi "mousedown" tipinin evens unbid ve tekrar bağlamak gerektiğini keşfetti. Yani benim için çalışan kod parçası şudur:

(function ($) {
  Drupal.behaviors.confirm = {
    attach: function(context, settings) {
      var events =  $('.form-submit-delete').clone(true).data('events');// Get the jQuery events.
      $('.form-submit-delete').unbind('mousedown'); // Remove the click events.
      $('.form-submit-delete').mousedown(function () {
    if (confirm('Are you sure you want to delete that?')) {
      $.each(events.mousedown, function() {
        this.handler(); // Invoke the mousedown handlers that was removed.
      });
    }
    // Prevent default action.
    return false;
      });
    }
  }
})(jQuery);

Soru eski, ama ben de ilgileniyordum. Bence, en kolay yol Ajax tanımınızdaki click olayını kullanmaktır, çünkü Drupal mousedown olayını varsayılan olarak kullanır:

$form['submit'] = array(
  '#type' => 'submit',
  '#value' => t('some value'),
  '#attributes' => array(
    'class' => array('some-class'),
    ),
  '#ajax' => array(
    'event' => 'click',    //add this line!
    'callback' => 'some_callback',
    'wrapper' => 'some-wrapper',
  ),
);

Ardından .mousedown(), Javascript dosyanızdaki düğmenize bir etkinlik eklemeniz gerekir , çünkü tıklama etkinliğinden önce tetiklenir:

$('.some-class').mousedown(function() {
  //do something
});

Ajax İsteğinizin mousedown olayıyla çağrılmasını istiyorsanız, özel bir olay kullanabilirsiniz:

//change this line in the Ajax Defintion of your button
'event' => 'click',
//to
'event' => 'custom_event',

Daha sonra .mousedown()Javascript dosyanızın olması durumunda bu olayı tetikleyebilirsiniz :

$('.some-class').mousedown(function() {
  //do something
  $('.some-class').trigger('custom_event');
});

Her iki versiyon da işe yarıyor!

JS'nizi bir Drupal davranışı içinde çalıştırmayı denediniz mi? Tıklama işleyiciniz Drupal'dan sonra eklenmiş olabilir.

Her iki durumda da, Drupal'ın tıklama işleyicisini düğmedeki bağlantısını kesebilmeniz gerekir, böylece önce çağrılırsınız ve Drupal'ın Ajax tıklama işleyicisini manuel olarak (ve koşullu olarak) arayabilirsiniz.

Googletorp kodunun% 100 doğru olmadığına dikkat etmek.

Olayların depolandığı satırı değiştirmeniz gerekir:

var events = $('.confirm').clone(true).data('events'); // Get the jQuery events.

Bu şekilde, herhangi bir nesne başvurusu sorununu ortadan kaldırırsınız, bu nedenle tıklama olaylarını bağlarken varyanızda da bağlanmaz;)

Ayrıca, jQuery 1.8'den beri .data () yönteminin kullanımdan kaldırıldığını unutmayın. Etkinlik verilerinin elde edilmesi artık bir dahili veri yapısı üzerinden yapılmaktadır:

.data (“events”) : jQuery, olayla ilgili verilerini her öğedeki (bekle) olaylar adlı bir veri nesnesinde depolar. Bu bir iç veri yapısıdır, bu nedenle 1.8'de bu, kullanıcı veri adı alanından kaldırılacaktır, böylece aynı ada sahip öğelerle çakışmayacaktır. jQuery'nin etkinlik verilerine hala jQuery._data (element, "events") üzerinden erişilebilir, ancak bunun belgelenmemiş ve değiştirilmemesi gereken dahili bir veri yapısı olduğunu unutmayın.

Kaynak: http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/

Yukarıda birçok yararlı cevap buldum ve formumu çalıştırabildim. Hepsini bir araya getirmek, benim uygulama için işe yarayan budur: Bir onay listesinin içeriğini değiştirmek için bir onay iletişim kutusu ve AJAX geri arama ile bir form sil düğmesi.

Javascript:

$form['my_form']['delete_button_js'] = array(
  '#markup' => '<script type="text/javascript">
  (function ($) {
     // override the default confirmation dialog behavior
     Drupal.behaviors.confirm = { 

      // Get the jQuery events.
      attach: function(context, settings) {
      var events =  $(\'.deleteButtonClass\').clone(true).data(\'events\'); 

      $(\'.deleteButtonClass\').unbind(\'mousedown\'); // Remove the mousedown event.

      $(\'.deleteButtonClass\').mousedown(function () { 
           // Popup the confirmation
           if (confirm(\'Are you sure you want to delete the Group?\')) {
             // if YES, then we fire the AJAX event 
             $(\'.deleteButtonClass\').trigger(\'deleteGroupEvent\'); 
           }
           // Override the default action.
           return false;
        });
    }
            }
  })(jQuery);
  </script>
  ',
);

Değiştirilecek form öğesi (liste seç):

$form['my_form']['select_list'] = array(
         '#type' => 'select',
         '#title' => t('My Title'),
         '#options' =>  $optionsArray,
         '#size' => 5,
         '#prefix' => t('<div id="mySelectList">'),
         '#suffix' => t('</div>'),
    }

Düğme:

$form['my_form']['delete_button'] = array(
  '#type' => 'button',
  '#value' => 'Delete',

  '#attributes' => array( 
      'class' => array('deleteButtonClass'), 
    ),

  '#ajax' => array (

    // this is the custom event that will be fired from the jQuery function
    'event' => 'deleteGroupEvent', 

    'callback' => 'ajax_delete_callback',
    'wrapper' => 'mySelectList',
    ),

);

Ve son olarak, AJAX geri çağrısı:

function ajax_delete_callback ($form, $form_state) {

  // callback implementation code

  return $form['my_form']['select_list'];
}

Ben drupal misc / ajax.jx dosyasını değiştirerek bu sorunu çözdüm.

Ajax.js dosyasının bir kopyasını oluşturun ve herhangi bir özel modülü yerleştirin ve önce Drupal.ajax = function (base, element, element_settings) { işlevini değiştirin.

beforeSend: function (xmlhttprequest, options) {

    if( ajax.url =='/?q=field_collection/ajax'){ // condition for when click on the Remove button
      if (confirm('Are you sure you want to remove this?')) {
       ajax.ajaxing = true;
       return ajax.beforeSend(xmlhttprequest, options);
      }
      xmlhttprequest.abort();
    } else{
        ajax.ajaxing = true;
        return ajax.beforeSend(`xmlhttprequest`, options);   
     }    
},

Benim için iyi çalışıyor.

Belki biraz yaşlı, ama neden sadece kullanamadığımızı merak ediyorum:

(function($, Drupal, window, document, undefined) {

Drupal.behaviors.oc_ua_pc = {
  attach: function(context, settings) {
    $('#button').click(function () {
      if(confirm('This action cannot be undone and you cannot change the form later. Do you want to submit?')) {
        return;
      }

      return false;
    });
  }
}
})(jQuery, Drupal, this, this.document);