# बटन पर क्लिक करने पर JS पुष्टिकरण पॉपअप कैसे जोड़ें

Question

मेरे पास एक मूल FAPI बटन इनपुट है जो #ajax सक्षम है और जो ठीक काम कर रहा है, लेकिन मैं एक JS जोड़ना चाहता हूं "क्या आप सुनिश्चित हैं?" कोड के वास्तव में चलने से पहले बटन पर क्लिक करने पर पुष्टिकरण पॉपअप, और मुझे यकीन नहीं है कि यह कैसे करना है क्योंकि FAPI के जेएस क्लिक को खाने से पहले लगता है कि मुझे इससे कोई फर्क नहीं पड़ता कि मैं क्या करता हूं।

मैंने एक इनलाइन ऑनक्लिक हैंडलर जोड़ने की कोशिश की है, जैसे:

$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
  ),
);

... जो मदद नहीं करता है, और मैंने भी जोड़ने की कोशिश की है:

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

मेरे मॉड्यूल के JS में भी जिसे अनदेखा किया गया है।

कोई अन्य विचार? क्या स्टैक के शीर्ष पर एक सबमिट हैंडलर जोड़ने का एक तरीका है जिसे Drupal #ajax पहचान लेगा?

Answer 1

Drupal एक PHP फ्रेमवर्क है, और यह आश्चर्यजनक है कि कितना AJ AJ सामान आप उस और FAPI का उपयोग करके प्राप्त कर सकते हैं। लेकिन इसकी सीमाएं हैं और इस तरह के उपयोग के मामले के लिए, मैं सुझाव दूंगा कि आप कस्टम जावास्क्रिप्ट का उपयोग करें। इसके अलावा आमतौर पर जावास्क्रिप्ट संवाद का उपयोग करने के बजाय, आप उपयोग करने योग्य संवाद बनाने के लिए jQuery UI का उपयोग कर सकते हैं।

वैसे भी आप जिस समस्या का सामना कर रहे हैं वह संभवतः इसलिए है क्योंकि आप सबमिट बटन पर AJAX का उपयोग करते हैं। चूंकि आप वास्तविक डिलीट कॉल के लिए AJAX का उपयोग कर रहे हैं, preventDefaultऔर जैसे काम नहीं करेंगे।

आपको जो करना होगा वह कुछ इस तरह से है। (यह व्यापक रूप से परीक्षण नहीं किया गया है लेकिन काम करना चाहिए।)

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;
    });
  }
}

Comments

मैंने भी $ ('पुष्टि') जोड़ा। अनबाइंड ('मूसडाउन'); Drupal listerns 'मूसडाउन' इवेंट भी।

— दूधोव्स्की 22

यदि उपयोगकर्ता पुष्टिकरण संवाद को रद्द करता है तो फिर से क्लिक करने पर यह बटन नहीं टूटेगा? (क्योंकि $('.confirm').unbind('click');) ... या मैं इसे गलत पढ़ रहा हूँ? क्षमा करें, परिचित नहींunbind

— ErichBSchulz

@ErichBSchulz Unbind को केवल एक बार कॉल किया जाता है, अटैच विधि से जिसे पेज के लोड पर कहा जाता है।

— googletorp

gist.github.com/guoxiangke/0dffa7722a67f052c7ce बिना पढ़े टाइपरोर : अपरिभाषित की संपत्ति 'क्लिक' नहीं पढ़ सकते ?????? मेरे पास एक फॉर्म है, नोड / ऐड / कंटेंट-टाइप में, और मैं इसे ajax करता हूं, js

— वैरिडेट का

Answer 2

यह पुष्टि करते हुए कि जेरोएन गोगलेटोर्प के कोड को ठीक कर रहा है।

हालाँकि, मुझे खुद पता चला है कि "मूसडाउन" प्रकार की बुराइयों को निष्पक्ष और फिर से बाँधना पड़ता है। तो मेरे लिए काम करने वाला कोड निम्नलिखित है:

(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);

Comments

जब तक आपको वास्तव में उनकी आवश्यकता न हो, तब तक डोम वस्तुओं को क्लोन करना संसाधनों की बर्बादी है।

— googletorp

नमस्ते, मैं एक ही सवाल से मिला, सब ठीक है, लेकिन मैं एक जे एस त्रुटि से मिला: "अनकैप्ड टाइपर्रर:" मूसडाउन "के लिए भी अपरिभाषित की संपत्ति पर क्लिक करें।

— ब्लूसस्की_स्टिल

यह एकमात्र उपाय है जो मुझे काम करने के लिए मिल सकता है। यहां क्लोनिंग प्रमुख है। क्लोन के बिना तब जब आप ओके पर क्लिक करते हैं तो बस तुरंत सूचना आ जाती है।

— फेलिक्स ईव

Answer 3

सवाल पुराना है, लेकिन मुझे इसमें दिलचस्पी भी थी। मेरी राय में, सबसे आसान तरीका आपकी Ajax परिभाषा में क्लिक इवेंट का उपयोग करना है, क्योंकि Drupal mousedown इवेंट का उपयोग करता है:

$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',
  ),
);

फिर आपको .mousedown()अपनी जावास्क्रिप्ट फ़ाइल में अपने बटन में एक ईवेंट जोड़ने की जरूरत है , क्योंकि यह क्लिक ईवेंट से पहले निकाल दिया जाता है:

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

यदि आप अभी भी अपने Ajax अनुरोध को मूसडाउन ईवेंट के साथ चाहते हैं, तो आप एक कस्टम ईवेंट का उपयोग कर सकते हैं:

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

तब आप इस .mousedown()घटना को अपनी जावास्क्रिप्ट फ़ाइल की स्थिति में ट्रिगर कर सकते हैं :

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

दोनों संस्करण काम करते हैं!

Comments

हाँ! मुझे यह पसंद है क्योंकि यह वही करता है जो आप चाहते हैं: आपको ड्रुपल ऑफ-द-शेल्फ प्रक्रिया पर एक हैंडल देता है जिसे आप तब ज़रूरत पड़ने पर कॉल कर सकते हैं। नायब। मुझे preventDefaultअभी भी फॉर्म को जमा करने के लिए सामान्य (गैर-जेएस) को रोकने के लिए अपने क्लिक हैंडलर में होना चाहिए।

— Artfulrobot

Answer 4

क्या आपने एक ड्रुपल व्यवहार के अंदर अपने जेएस को चलाने की कोशिश की है? यह बस हो सकता है कि आपके क्लिक हैंडलर को Drupal के बाद संलग्न किया जा रहा हो।

किसी भी तरह से यद्यपि आपको बटन पर Drupal के क्लिक हैंडलर को अनबाइंड करने में सक्षम होना चाहिए ताकि आपको पहले बुलाया जाए और आप Drupal के Ajax क्लिक हैंडलर को मैन्युअल रूप से (और सशर्त रूप से) कॉल कर सकें।

Answer 5

ध्यान दें कि googletorp का कोड 100% सही नहीं है।

आपको उस पंक्ति को बदलने की आवश्यकता है, जहां ईवेंट इस पर संग्रहीत हैं:

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

इस तरह से आप किसी भी ऑब्जेक्ट संदर्भ समस्याओं को समाप्त करते हैं, इसलिए जब क्लिक की घटनाओं को अनबाइंड करते हैं, तो यह आपके संस्करण में भी unbind नहीं करता है;)

इसके अलावा, सलाह दी जाती है कि jQuery 1.8 के बाद से .data () विधि को हटा दिया गया है। इवेंट डेटा प्राप्त करना अब एक आंतरिक डेटा संरचना के माध्यम से किया जाता है:

.data ("ईवेंट्स") : jQuery प्रत्येक इवेंट पर अपने डेटा-संबंधित इवेंट (प्रतीक्षा करें) इवेंट में संबंधित डेटा संग्रहीत करता है। यह एक आंतरिक डेटा संरचना है, इसलिए इसे 1.8 में उपयोगकर्ता डेटा नाम स्थान से हटा दिया जाएगा ताकि यह उसी नाम की वस्तुओं के साथ संघर्ष न करे। jQuery के ईवेंट डेटा को अभी भी jQuery._data (तत्व, "ईवेंट्स") के माध्यम से एक्सेस किया जा सकता है, लेकिन इस बात से अवगत रहें कि यह एक आंतरिक डेटा संरचना है जो कि अनडिमेंटेड है और इसे संशोधित नहीं किया जाना चाहिए।

स्रोत: http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/

Answer 6

मुझे ऊपर कई उपयोगी जवाब मिले और मैं अपने फॉर्म को काम करने में सक्षम था। यह सब एक साथ रखकर, यह वही है जिसने मेरे आवेदन के लिए काम किया है: एक पुष्टिकरण संवाद के साथ एक डिलीट फॉर्म बटन और चुनिंदा सूची की सामग्री को संशोधित करने के लिए AJAX कॉलबैक।

जावास्क्रिप्ट:

$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>
  ',
);

संशोधित करने के लिए प्रपत्र तत्व (सूची का चयन करें):

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

बटन:

$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',
    ),

);

और अंत में, AJAX कॉलबैक:

function ajax_delete_callback ($form, $form_state) {

  // callback implementation code

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

Answer 7

मैं drupal misc / ajax.jx फ़ाइल को संशोधित करके यह तय किया है।

Ajax.js फ़ाइल की एक प्रति बनाएँ और उसे कोई भी कस्टम मॉड्यूल Drupal.ajax = function (base, element, element_settings) { डालें और फ़ंक्शन को पहले से संशोधित करें :

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);   
     }    
},

मेरे लिए यह ठीक है।

Comments

यह हैकिंग कोर के रूप में गिना जाता है, और शायद बचा जाना चाहिए।

— मोलॉट

और पूरी तरह से अनावश्यक है - en.wikipedia.org/wiki/Monkey_patch

— क्लाइव

यह एकमात्र तरीका था जिससे मुझे डबल कन्फर्म बॉक्स दिखाने वाले w / o को काम करने के लिए यह अवधारणा मिल सके। एक अपवाद मुझे है कि अगर ajax.url == 'field_collection_remove_js' को स्टेटमेंट चेक करना है। हो सकता है कि ड्रुपल के संस्करण के कारण मैं उपयोग कर रहा हूं?

— रिचर्ड

Answer 8

शायद थोड़ा पुराना है, लेकिन मैं सोच रहा हूं कि हम सिर्फ उपयोग क्यों नहीं कर सकते हैं:

(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);

Comments

क्योंकि द्रुपाल मूसडाउन इवेंट में बंध जाता है इसलिए आपका क्लिक ईवेंट हैंडलर कभी फायर नहीं करेगा।

— फेलिक्स ईव

Drupal PHP या JS के काम करने के तरीके को नहीं बदल रहा है .. यह क्लिक इवेंट को क्यों नहीं सुनेगा? यहाँ Drupal का उपयोग JS कोड संलग्न करने के लिए किया जाता है। एक बार साइट लोड होने के बाद Drupal ने अपना काम किया है। जेएस श्रोता सभी वहीं हैं, है ना? ;)

— स्कल्की

आप एक अच्छा सवाल उठाते हैं और ईमानदार होने के लिए मुझे नहीं पता कि क्लिक इवेंट में आग क्यों नहीं लगती है। हालांकि व्यापक परीक्षण के बाद मैं पुष्टि कर सकता हूं कि यह नहीं है। शायद एक बेहतर समझ पाने के लिए Drupal के ajax.js को पढ़ने की आवश्यकता है।

— फेलिक्स ईव