it-swarm-ko.tech

#ajax 버튼을 클릭 할 때 JS 확인 팝업을 추가하는 방법

#ajax를 사용하는 기본 FAPI 버튼 입력이 있고 제대로 작동하지만 JS "Are you sure?"를 추가하고 싶습니다. 코드가 실제로 실행되기 전에 버튼을 클릭하면 확인 팝업이 표시되며 FAPI의 JS가 클릭을 먹기 전에 클릭을 먹는 것처럼 보이기 때문에 어떻게 해야할지 모르겠습니다.

인라인 onclick 핸들러를 추가하려고 시도했습니다.

$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는 인식합니까?

10
Mike Crittenden

Drupal은 PHP 프레임 워크입니다. AJAX 당신이 그것을 사용할 수있는 것들과 FAPI를 얼마나 많이 사용하는지는 놀랍습니다.) 이 경우 사용자 정의 JavaScript를 사용하는 것이 좋습니다. 일반적으로 JavaScript 대화 상자를 사용하는 대신 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;
    });
  }
}
15
googletorp

그 질문은 오래되었지만 나는 그것에 관심이있었습니다. 제 생각에는 가장 쉬운 방법은 Ajax 정의에서 click 이벤트를 사용하는 것입니다. 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',
  ),
);

그런 다음 클릭 이벤트 전에 시작되므로 Javascript 파일의 버튼에 .mousedown() 이벤트를 추가하면됩니다.

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

여전히 mousedown 이벤트로 Ajax 요청을 호출하려면 사용자 정의 이벤트를 사용할 수 있습니다.

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

그런 다음 Javascript 파일의 .mousedown() 이벤트에서이 이벤트를 트리거 할 수 있습니다.

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

두 버전 모두 작동합니다!

4
Daniel

jeroen이 Googletorp의 코드를 수정하고 있음을 확인합니다.

그러나, 나는 "mousedown"타입의 짝수를 금지하고 다시 묶어야한다는 것을 스스로 발견했다. 그래서 나를 위해 일한 코드는 다음과 같습니다.

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

Drupal 동작 내에서 JS를 실행 해 보셨습니까? Drupal 이후에 클릭 핸들러가 연결되어있을 수 있습니다.

두 가지 방법 중 하나를 사용하면 버튼에서 Drupal의 클릭 핸들러를 바인딩 해제 할 수 있어야하므로 먼저 호출되며 Drupal의 Ajax 클릭 핸들러를 수동으로 (조건부로) 호출 할 수 있습니다.

0
Adam DiCarlo

Googletorp의 코드가 100 % 정확하지 않다는 점에 응답합니다.

이벤트가 저장된 라인을 다음과 같이 변경해야합니다.

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

이런 식으로 객체 참조 문제를 제거하므로 클릭 이벤트를 바인딩 해제 할 때 var에서도 바인딩 해제되지 않습니다.)

또한 jQuery 1.8부터 .data () 메소드는 더 이상 사용되지 않습니다. 내부 데이터 구조를 통해 이벤트 데이터 가져 오기가 완료되었습니다.

. data (“events”) : jQuery는 이벤트 관련 데이터를 각 요소의 (대기 중) 이벤트라는 데이터 객체에 저장합니다. 이것은 내부 데이터 구조이므로 1.8에서는 사용자 데이터 네임 스페이스에서 제거되어 동일한 이름의 항목과 충돌하지 않습니다. jQuery._data (element, "events")를 통해 jQuery의 이벤트 데이터에 계속 액세스 할 수 있지만, 문서화되지 않은 내부 데이터 구조이므로 수정해서는 안됩니다.

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

0
Jeroen

위의 많은 유용한 답변을 찾았으며 양식을 작동시킬 수있었습니다. 이를 종합하면 다음과 같이 응용 프로그램에서 작동합니다. 확인 대화 상자와 선택 목록의 내용을 수정하기위한 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'];
}
0
Susanne