# জ্যাক্স বোতামটি ক্লিক করার সময় কীভাবে জেএস কনফার্মেশন পপআপ যুক্ত করবেন

Question

আমার কাছে একটি বেসিক এফএপিআই বাটন ইনপুট রয়েছে যা # জ্যাক্স সক্ষম এবং এটি দুর্দান্ত কাজ করছে তবে আমি একটি জেএস যুক্ত করতে চাই "আপনি কি নিশ্চিত?" কোডটি আসলে চালুর আগে বোতামে ক্লিক করার সময় নিশ্চিতকরণ পপআপ, এবং আমি কীভাবে করব তা নিশ্চিত নই কারণ আমি যা করুক না কেন এফএপিআইয়ের জেএস ক্লিক পেতে খেয়েছে বলে মনে হয়।

আমি একটি ইনলাইন অন্লিক হ্যান্ডলার যুক্ত করার চেষ্টা করেছি, এরকম:

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

আমার মডিউল এর জেএস যা উপেক্ষা করা হয়।

অন্য কোন ধারণা? স্ট্রোকের শীর্ষে একটি সাবমিট হ্যান্ডলার যুক্ত করার কোনও উপায় আছে যা দ্রুপাল # জ্যাক্স চিনতে পারে?

Answer 1

দ্রুপাল একটি পিএইচপি কাঠামো, এবং এটি এবং এফএপিআই ব্যবহার করে আপনি কতটা অভিনব এজেএক্স স্টাফ পেতে পারেন তা আশ্চর্যজনক। তবে এটির সীমাবদ্ধতা রয়েছে এবং এর মতো ব্যবহারের ক্ষেত্রে, আমি আপনাকে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দিচ্ছি। এছাড়াও সাধারণত জাভাস্ক্রিপ্ট ডায়ালগ ব্যবহার না করে আপনি পরিবর্তে একটি থিমযোগ্য ডায়ালগ তৈরি করতে jQuery UI ব্যবহার করতে পারেন।

যাইহোক আপনি যে সমস্যার মুখোমুখি হচ্ছেন সম্ভবত এটি কারণ আপনি সাবমিট বাটনে AJAX ব্যবহার করেন caused যেহেতু আপনি প্রকৃত মোছার কলের জন্য এজেএক্স ব্যবহার করছেন, 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

আমি আরও যোগ করেছি $ ('। নিশ্চিত')। আনবাইন্ড ('মউসডাউন'); ড্রুপাল লিস্টার্নস 'মোসডাউন' ইভেন্টটিও।

— দুধভস্কি

যদি ব্যবহারকারী কনফার্ম ডায়ালগ বাতিল করে দেয় তবে এই বোতামটি বিরতি হবে না? (কারণ $('.confirm').unbind('click');) ... নাকি আমি এটা ভুল পড়ছি? দুঃখিত এর সাথে পরিচিত ননunbind

— এরিকবিএসচুলজ

@ এরিকবিএসচুলজ আনবাইন্ডকে কেবল একবার সংযুক্তি পদ্ধতিতে ডাকা হয়, যা পৃষ্ঠার লোডে ডাকা হয়।

— googletorp

gist.github.com/guoxiangke/0dffa7722a67f052c7ce অপরিবর্তিত প্রকারের ত্রুটি: অপরিশোধিত সম্পত্তি 'ক্লিক' করতে পারা যায় না ?????? আমার নোড / অ্যাড / কনটেন্ট-টাইপের একটি ফর্ম রয়েছে এবং আমি এটি অ্যাজাক্স করি, জেএস বৈধতা ব্যবহার করি

— bluesky_still

Answer 2

জেরোইন গুগলটারপের কোড ঠিক করছে is

তবে, আমি নিজেই আবিষ্কার করেছি যে "মোডাউনডাউন" টাইপের সন্ধ্যাগুলি আবার বিবিড করে আবদ্ধ করতে হবে। সুতরাং কোডটি যে অংশটি আমার জন্য কাজ করেছে তা নিম্নলিখিত:

(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

আপনার সত্যিকারের প্রয়োজন না হলে DOM অবজেক্টগুলিকে ক্লোন করার জন্য এটি সত্যই সম্পদের অপচয়।

— googletorp

হাই, আমি একই প্রশ্নের সাথে সাক্ষাত করেছিলাম, সব ঠিক আছে, তবে আমি একটি জেএস ত্রুটির মুখোমুখি হয়েছি: "আনকড টাইপ এয়ারর:" মোডাউনডাউন "এর জন্যও অপরিজ্ঞাত" সম্পত্তি "ক্লিক করতে পারি না।

— bluesky_still

এটিই কেবলমাত্র সমাধান যা আমি কাজে পেতে পারি। ক্লোনিং এখানে কী। ক্লোনটি ছাড়াই আপনি যখন ওকে ক্লিক করেন ঠিক তখনই সতর্কতা আবার উপস্থিত হয়।

— ফেলিক্স

Answer 3

প্রশ্নটি পুরানো, তবে আমি এটিতে আগ্রহীও ছিলাম। আমার মতে, সহজ উপায় হ'ল ক্লিক ইভেন্টটি আপনার আজাক্স সংজ্ঞাতে ব্যবহার করা, কারণ দ্রুপাল মাউসডাউন ইভেন্টটি ডিফল্ট হিসাবে ব্যবহার করে:

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

যদি আপনি এখনও আপনার অ্যাজাক্স অনুরোধটি মাউসডাউন ইভেন্টের সাথে কল করতে চান তবে আপনি একটি কাস্টম ইভেন্ট ব্যবহার করতে পারেন:

//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স্বাভাবিক (নন- JS) প্রতিরোধ ফর্ম জমা, এখনও আমার ক্লিকের হ্যান্ডলার হবে।

— আর্টফুলরোবট

Answer 4

আপনি কি নিজের জেএসকে একটি দ্রুপাল আচরণের ভিতরে চালানোর চেষ্টা করেছেন? এটি কেবল এমন হতে পারে যে ড্রপালের পরে আপনার ক্লিক হ্যান্ডলারটি সংযুক্ত করা হচ্ছে।

যে কোনও উপায়ে আপনার বোতামে দ্রুপালের ক্লিক হ্যান্ডলারটি আনবাইন্ড করতে সক্ষম হওয়া উচিত যাতে আপনাকে প্রথমে ডাকা হয় এবং আপনি ড্রুপালের অ্যাজাক্স ক্লিক হ্যান্ডলারটিকে ম্যানুয়ালি (এবং শর্তসাপেক্ষে) কল করতে পারেন।

Answer 5

গুগলটর্পের কোডটি 100% সঠিক নয় বলে মনে করে জবাব দেওয়া।

ইভেন্টগুলি যেখানে এতে সঞ্চিত আছে সেখানে আপনাকে রেখাটি পরিবর্তন করতে হবে:

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

এইভাবে আপনি যেকোন অবজেক্টের রেফারেন্স সমস্যাগুলি দূর করেন, তাই ক্লিক ইভেন্টগুলি আনবাইন্ড করার সময় এটি আপনার ভারেও আবদ্ধ হয় না;)

এছাড়াও, পরামর্শ দিন যে jQuery 1.8 সাল থেকে। ডেটা () পদ্ধতি অবমূল্যায়ন করা হয়েছে। ইভেন্টের ডেটা প্রাপ্তি এখন অভ্যন্তরীণ ডেটা কাঠামোর মাধ্যমে করা হয়:

.ডাটা ("ইভেন্টগুলি") : jQuery প্রতিটি ইভেন্টের ইভেন্টগুলির নাম (এটির জন্য অপেক্ষা করুন) নামের একটি ডেটা অবজেক্টে তার ইভেন্ট সম্পর্কিত ডেটা সংরক্ষণ করে। এটি একটি অভ্যন্তরীণ ডেটা কাঠামো তাই ১.৮ এ এটি ব্যবহারকারীর ডেটা নাম স্থান থেকে সরানো হবে যাতে এটি একই নামের আইটেমগুলির সাথে বিরোধ না করে won't jQuery এর ইভেন্টের ডেটা এখনও jQuery._data (উপাদান, "ইভেন্ট") এর মাধ্যমে অ্যাক্সেস করা যেতে পারে তবে সচেতন থাকুন যে এটি একটি অভ্যন্তরীণ ডেটা কাঠামো যা অনিবন্ধিত এবং পরিবর্তিত হওয়া উচিত নয়।

সূত্র: http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/

Answer 6

আমি উপরে অনেক দরকারী উত্তর পেয়েছি এবং আমার ফর্ম কাজ করতে সক্ষম হয়েছি। এগুলি একসাথে রেখে, আমার অ্যাপ্লিকেশনের জন্য এটি কাজ করেছিল: একটি নির্বাচিত তালিকার বিষয়বস্তু সংশোধন করার জন্য একটি নিশ্চিতকরণ ডায়ালগ এবং এজেএক্স কলব্যাক সহ একটি মুছুন ফর্ম বোতাম।

জাভাস্ক্রিপ্ট:

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

);

এবং অবশেষে, এজেএক্স কলব্যাক:

function ajax_delete_callback ($form, $form_state) {

  // callback implementation code

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

Answer 7

আমি এটিকে Drupal Misc / ajax.jx ফাইলটি সংশোধন করে স্থির করেছি।

এজাক্স.জেএস ফাইলটির একটি অনুলিপি তৈরি করুন এবং এটি কোনও কাস্টম মডিউল রেখে 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

এটি হ্যাকিং কোর হিসাবে গণনা করা হয় এবং সম্ভবত এড়ানো উচিত।

— Mołot

এবং সম্পূর্ণ অপ্রয়োজনীয় - en.wikedia.org/wiki/Monkey_patch

— ক্লাইভ

ডাবল কনফার্ম বাক্সগুলি দেখিয়ে ডাব্লু / ওয়ে কাজ করার জন্য এই ধারণাটি পেতাম এই একমাত্র উপায়। একটি ব্যতিক্রম হ'ল আমি যদি এই বিবৃতিটি পরীক্ষা করে দেখতে চাই তবে আজাজ.আরএল == 'ক্ষেত্রের_সংগঠন_ম্রেভ_জেএস' কিনা তা পরীক্ষা করতে হবে। সম্ভবত এটি কারণ আমি ড্রুপাল সংস্করণটি ব্যবহার করছি?

— রিচার্ড

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

কারণ দ্রুপাল মোডাউনড ইভেন্টে বাঁধা থাকে তাই আপনার ক্লিক ইভেন্টের হ্যান্ডলারটি কখনই আগুনে না।

— ফেলিক্স

দ্রুপাল পিএইচপি বা জেএসের কাজ করার পদ্ধতি পরিবর্তন করছে না .. এটি ক্লিক ইভেন্টটি কেন শুনবে না? এখানে ড্রুপাল সবেমাত্র জেএস কোড সংযুক্ত করতে ব্যবহৃত হয়। সাইটটি লোড হয়ে গেলে দ্রুপাল তার কাজটি সম্পাদন করে। জেএস শ্রোতা সবাই আছে, তাই না? ;)

— স্কেলকি

আপনি একটি ভাল প্রশ্ন উত্থাপন করেছেন এবং সত্যি বলতে আমি ক্লিক ইভেন্ট কেন আগুন না জানি। তবে ব্যাপক পরীক্ষার পরে আমি নিশ্চিত করতে পারি যে এটি তা নয়। সম্ভবত আরও ভাল বোঝার জন্য দ্রুপালের এজ্যাক্স.জেএস পড়ার দরকার রয়েছে।

— ফেলিক্স