프로그래밍 방식으로 AJAX 지원 양식 제출 버튼을 클릭하는 방법은 무엇입니까?


25

프로그래밍 방식으로 (jQuery를 사용하여) Drupal 형식의 AJAX 동작이있는 클릭 버튼을 트리거하려고하지만 지금까지 jQuery('#edit-submit').click()아무것도하지 않습니다.

실제 마우스를 클릭 의도 한대로 그 버튼 작동합니다. 어떻게 작동시키는 아이디어가 있습니까?


# edit-submit 버튼이라면 $ ( 'form'). submit () 만 할 수 있습니까?
— cam8001

그것은 나에게도 효과가 없었다. AJAX 이외의 방식으로 양식을 게시하거나 아무 것도 수행하지 않으며 양식 작성기의 일부 설정에 따라 다릅니다.
— 다니엘

답변:


40

jQuery('#edit-submit').mousedown() -분명히 큰 차이가 있습니다.


3
나를 위해 작동하지 않습니다
— ram4nd

이 솔루션은 저에게 효과적이었습니다. 버튼을 클릭하면 아약스 호출이 실행되었지만 .click () 또는 변형은 .mousedown ()이 완벽하게 작동하지 않았습니다.
— Eric Goodwin

양식 요소에 ID 선택기를 사용하지 마십시오. AJAX 콜백 중에 양식이 다시 작성되면 모든 요소의 ID가 변경되고 jQuery 선택기가 더 이상 작동하지 않습니다.
— Yuriy Babenko 2016 년

정확히 에릭이 말한 것. 왜 차이점이 있는지 알고 싶습니다 ... 심하게 이것은 의미가없는 것 같습니다.
— Johnathan Elmore

@JohnathanElmore mousedown()는 click()이벤트의 "첫 번째 부분"일 뿐이며 mouseup()발생 하면 완료됩니다 . 링크를 클릭 한 다음 링크 영역 밖으로 마우스를 놓으면 click()일반적으로 연결이 해제되지 않으며 링크를 따르지 않습니다. 아마 아약스 호출은 mouseup()해고를 막을 수 있지만 이것은 단지 추측에 불과합니다 ...
— pamatt

7

실제로는 추측 할 필요가 없습니다.

Drupal 동작을 사용해야합니다

Drupal.behaviors.yourFunctionName = {
    attach:function (context, settings) {

       // Your code goes here....

    }
}

그러면 설정의 ajax 속성에 액세스 할 수 있습니다.

Drupal.behaviors.yourFunctionName = {
    attach:function (context, settings) {

       console.log(settings.ajax);

    }
}

구성에 따라 콜백 함수 이름, 선택기 ID 및 트리거 이벤트 이름과 같은 다양한 속성이있는 트리거 요소 목록이 표시되어야합니다.

그런 다음 관련 정보를 사용하여 이벤트를 트리거 할 수 있습니다.

// $(selector).trigger(eventName);
// for example...
$('#edit-product-id-15', context ).trigger('change');

2
Drupal 프로젝트에서 작업중인 Draffal이 아닌 프론트 엔드 개발자를 위해 생성 된 요소와 인터페이스하는 방법을 발견하는 흥미로운 기술을 제공하기 때문에이 답변이 마음에 듭니다. +1
— Lester Peabody

6

다음과 같이 ajax 제출을 작성하십시오.

 $form['button'] = array(
    '#type' => 'button',
    '#value' => 'Click',
    '#ajax' => array(
      'callback' => '_kf_reading_user_points',
      'wrapper' => 'reading-user-points',
      'method' => 'replace',
      'event' => 'click',
    ),
  );

function _kf_reading_user_points(&$form, &$form_state) {
  // Something within the callback function.
}

그러면 jquery .click () 이벤트가 drupal ajax 형식으로 작동합니다.


내가하려고 할 때 당신이 너무 샘플 콜백 함수를 게시 할 수 있습니다, 그 기능 콜백하지 않을
— Crazyrubixfan

1
콜백 함수를 추가했습니다 :)
— Leopathu


3

필자의 경우 위의 권장 솔루션이 효과가 없었지만 .mousedown ()으로 언급하면 ​​다음과 같은 아이디어가 나에게 도움이되었습니다 (Drupal 7).

$('#custom-submit-button').click(function() {
  $('#ajax-submit-button').trigger('mousedown');
});

"이유"에 대한 유용한 배경 정보가 있습니다. #ajax_prevent 의 Form API Reference에 있습니다.


click () 래퍼가 필요하지 않았지만 아약스 방지에 대한 링크가 핵심이었습니다!
— Ryan Hartman

2

더 나은 노출 필터 모듈을 살펴보면 $ (. ctools-auto-submit-click ')을 찾아 클릭을 통해 AJAX 양식을 제출합니다.

<?php
// ... near line 190 of better_exposed_filters.js

// Click the auto submit button.
$(this).parents('form').find('.ctools-auto-submit-click').click();
?>

clickdown 이벤트는 저에게 도움이되었지만 mousedown 이벤트는 그렇지 않았습니다.
— aross

0

submit폼 에서 이벤트 를 트리거해야합니다 . Click및 mousedown버튼 이벤트가 작동하지 않습니다.


그것이 처음에 시도한 것이며 올바르게 작동하지 않는 것 같습니다. 내가 어떻게 여기 왔는가.
— aross
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.