Yui 버튼을 제출하고 파견 조치

StackOverflow https://stackoverflow.com/questions/1944355

  •  20-09-2019
  •  | 
  •  

문제

프로젝트에 Yui 2.7.0과 Struts를 사용하고 있으며 두 개의 제출 버튼이있는 양식이 있습니다. 하나는 저장을위한 것이고 다른 하나는 삭제를위한 것입니다. 양식은 파견에 제출됩니다. OnClick 청취자를 성공적으로 추가했지만 문제는 청취자가 실행되기 전에 양식이 제출된다는 것입니다. 양식을 제출하기 전에 디스패치 매개 변수를 설정해야합니다. 어떻게해야합니까? 아래는 내가 지금까지 가지고있는 것입니다.

<form name="adminUserForm" method="post" action="manage_user.do">
  <input type="hidden" id="dispatch" name="dispatch" value="unspecified"/>
  <!-- other form fields here -->
  <input type="submit" value="Save User" id="saveUser">
  <input type="submit" value="Delete User" id="deleteUser">
</form>
<script type="text/javascript"> 
  function confirmDelete(msg)
  {
    if (confirm(msg))
    {
      return setDispatchMethod("delete");
    }
    else
      return false;
  }
  function setDispatchMethod(methodName)
  {
    dispatchField = document.getElementById("dispatch");
    dispatchField.value = methodName
    return true;
  }
  var onClickSaveUser = function (e)
  {
    return setDispatchMethod('save');
  };
  var onClickDeleteUser = function (e)
  {
    return confirmDelete('Are you sure you want to delete the user?');
  };
  new YAHOO.widget.Button("deleteUser",   {onclick: {fn: onClickDeleteUser }});
  new YAHOO.widget.Button("saveUser",     {onclick: {fn: onClickSaveUser   }});
</script>
도움이 되었습니까?

해결책

문제는 버튼 위젯에 대한 Yahoo의 코드가 클릭 이벤트를 처리하고 프로그래밍 방식으로 양식을 제출하는 것입니다. 이벤트 핸들러는 귀하의 앞에 호출되므로 이벤트 핸들러가 호출되기 전에 양식이 제출됩니다.

다음은 몇 가지 아이디어입니다 (모두 작동합니다).

방법 1

클릭 이벤트 대신 Mousedown 이벤트를 처리합니다 (클릭하기 전에 Mousedown Fires).

var deleteUserButton = new YAHOO.widget.Button("deleteUser");
deleteUserButton.on("mousedown", onClickDeleteUser);

var deleteUserButton = new YAHOO.widget.Button("saveUser");
deleteUserButton.on("mousedown", onClickSaveUser);

//Using this, you can easily stop the form from submitting
//by using YAHOO's event utility (by adding this code, you
//will prevent the click event from firing as well).

YAHOO.util.Event.preventDefault(e);

방법 2

유형 대신 유형 = 링크를 유형 = 제출 (기본값) 대신 사용합니다. 유형 = 제출 인 경우에만 양식을 제출합니다 (양식이 여전히 제출되는지 확인하기에 충분히 테스트하지 않았으므로 양식을 수동으로 호출해야 할 수도 있습니다.

new YAHOO.widget.Button("deleteUser", { type: 'link', onclick: { fn: onClickDeleteUser} });
new YAHOO.widget.Button("saveUser", { type: 'link', onclick: { fn: onClickSaveUser} });

방법 3

코드를 살펴보면 양식을 제출하기 위해 클릭 한 버튼의 이름으로 숨겨진 필드를 생성하는 것을 알았습니다 (해당 버튼 만). 입력 태그에는 이름 속성이 있어야하며, 그렇지 않으므로 추가해야합니다. 그런 다음 서버에서 숨겨진 필드의 값 (귀하의 값 속성)을 확인하십시오.

이러한 방법 중 어느 것을 사용하든 양식을 제출하는 것을 막기 위해이를 사용해야합니다.

YAHOO.util.Event.preventDefault(e);

다른 팁

다음은 쉬운 솔루션입니다

<form>
    <input type="submit" name='dispatch' value="Save User" id="saveUser">
    <input type="submit" name='dispatch' value="Delete User" id="deleteUser">
</form>

숨겨진 입력을 제거 할 수 있습니다

첫 번째 버튼을 클릭하면 Dispatch 요청 변수가 "사용자 저장"으로 설정됩니다.

또는 "사용자 삭제"는 두 번째가 클릭됩니다.

이 질문은 몇 년이되었지만 여전히 Yui 2.9.0을 사용하는 프로젝트를 가지고 있으며 같은 문제를 해결 했으므로 다른 사람이 같은 잼을 발견 할 경우 솔루션을 공유하겠습니다.

이 질문에 대해 주목할 가치가있는 몇 가지. 먼저, Gabriel이 설명하는 문제는 Yui 2.9.0 버튼 클릭 핸들러가 클릭 핸들러가 호출되기 전에 IE9를 통해 문제가되지 않기 전에 양식을 제출하는 문제에 대해 설명합니다. Firefox에서 FF12 이상에서 문제가 발생합니다. Chrome, Safari 및 대부분의 다른 브라우저는 아니지만 YUI 버튼 클릭 핸들러에서 IE의 특별한 사례로 보이는 것을 볼 수있을뿐만 아니라 대부분의 경우 문제가 될 것 같습니다.

또한 가브리엘이 제안한 솔루션 중 어느 것도 마음에 들지 않았습니다. 링크 버튼을 사용하여 제출 버튼에 적용한 모든 사용자 지정 스타일을 무효화했습니다. Mousedown 핸들러를 사용하여 클릭의 사용자 인터페이스 의미 중 일부를 잃고 어떤 이유로 Yui 버튼이 원래 이름을 잃어 버렸습니다. 또는 적어도 서버 측의 게시 된 값에 표시되지 않았습니다. 그러나 Gabriel의 링크 버튼의 정신으로 제출 버튼을 기본적으로 제출하지 않는 입력 버튼으로 바꾸고 숨겨진 입력을 추가하고 양식을 직접 제출했습니다.

...

<form id='form'>
    <input type="button" value="&gt;" id="start_survey">

...

function start_survey (p_oEvent, p_aArgs) {
    var input = document.createElement ('input');
    input.type = 'hidden';
    input.name = this.get ('name');
    input.value = '&gt;'

    var form = YAHOO.Dom.get ('form');
    form.appendChild (input);
    form.submit();
}

new YAHOO.widget.Button ("start_survey", {onclick: {fn: start_survey}});

...

마지막으로 Yui가 클릭시 양식을 제출하고 있기 때문에 또 다른 해결책은 양식 제출 이벤트를 잡고 이벤트 대상이 버튼인지 확인하고 필요한 작업을 수행 한 다음 제출 또는 중지로 보내야합니다. 필요합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top