양식 제출에 PJAX 허용

묘사

제출은 보기에 그렇게 복잡하지 않다.몇 가지 일을 하다
1. 폼에 연결된 제출 이벤트를 허용합니다. 링크에 있는 클릭 이벤트와 매우 비슷합니다.
2. 성공적인 콜백을 두 가지 방법으로 나누고 페이지 교체 부분과 상태 변경 부분을 다음과 같이 한다.
3. 422개의 상태 코드를 우아하게 처리합니다. 이 코드는 오류가 아니지만 페이지를 변경해야 합니다.
또 하나의 작은 변화는 세션 추출을 시도하기 전에 서버의 결과를 <div>에 포장하여 서버가 세션으로 되돌아오지 않도록 하는 것이다.
간소화할 수 있는 것이 있으면 저에게 알려 주세요.

토론 #1

, 나는 이것이 pjax의 좋은 방향이 아니라고 생각한다.
PJAXing simple get 링크는 안전하고 성능이 저하되며 후퇴 버튼과 함께 사용할 수 있습니다.
양식 제출이 항상 다운그레이드되는 것은 아니며 post양식에 문제가 발생할 수 있습니다.

토론 #2

문제 없음 Josh,
니가 결정해.나는 그것이 우리에게 매우 효과가 있다고 생각하지만, 우리는 행위 정의가 명확하고 매우 간단한 때 형태로만 그것을 사용한다.
물론, 나는 POST의 문제가 어디에 있는지 알 수 있다. 특히 그것들에 문제가 생겼을 때, 당신이 비AJAX (즉 비멱 등의 요청을 중복해야 할 때) 로 되돌아오기를 원할 때.
AJAX 폼을 PJAX에 집적하는 좋은 방법에 대한 생각은 없나요?
이제 (위의 변경 사항이 있음) 우리는 아주 좋은 시스템이 생겼다. PUT의 user에 두 개의 역사 기록 항목이 생길 것이다. users/ID/edit과 users/ID이다.그래서 후퇴 버튼이 잘 작동하고 모든 것이 잘 통합되어 있다.만약 PJAX가 폼을 지원하지 않는다면, 우리는 이러한 요청을 위해 자신의 역사 기록 관리를 내놓을 수 있습니까?

토론 #셋

Pjax는 pushState에게 당신이 할 수 없는 특별한 일을 하지 않습니다.만약 당신이 pushState표에 자신의 행동을 정의한다면, 그것은 매우 잘 작용할 것이다.실제로, 우리는github에서 여기저기서pjax를 사용하지 않았다.일반 도메인 이름 형식.일부 지역, 예를 들어 트리 슬라이더에서 우리는 pushState을 직접 사용하여 애니메이션의 시간을 더욱 잘 제어한다.

토론 #4

네, 건배합시다.그럼 끄겠습니다.

토론 #5

네, 이 방면에 관심이 있습니다.
1. $.pjax과 type: 'POST'을 분해할 수 있다. #59 참조
2. 올바른 리디렉션 # 처리이것은 매우 까다롭지만, 나는 약간의 생각이 있다.
3. submit개의 대표단을 늘리는 것을 고려한다.나는 이런 간단한 물건이 대부분의 표에 적용되는지 모르겠다.적어도 일을 간단하게 해야 한다.

$(document).on "submit", "#form", ->
  $.pjax
    type: this.method
    url: this.action
    data: $(this).serializeArray()
    container: "#container"
  false

토론 #6

오류를 처리하는 데 어려움이 있다고 생각합니다. 둘 다

입니다.

422 오류, 즉 검증 질문

이 PR은 콘텐츠를 업데이트하지만 history.state을 업데이트하지 않고 관리하는 방식입니다.나는 이것이 유효한 기본값이라고 생각하지만, pjax의 범위를 초과할 수도 있습니다.

500 오류 또는 "pjax"오류(예를 들어 응답에 #container이 없는 경우).

GET 요청에 대해 pjax는 다시 요청'un-ajaxed'(즉 집합 window.location)를 통해 거래를 진행한다.

은 GETs

이 아닌 사람에게는 쉽지 않습니다.

이렇게 하면 취할 수 없을 수도 있습니다. 예를 들어 두 개의 POST!=POST 하나.

이 문제를 해결할 수 있는 유일한 방법은 서버에 정확한 것을 설정하는 것입니까?(jquery조차도 방향을 바꿀 줄 모른다).나는 이전에 이것을 여러 번 만난 적이 있다.

빌딩 안

(http://edifice-rails.com/) HTTP 헤더를 설정하는 사용자 지정 응답 프로그램을 사용하여 이 문제를 해결합니다.개인적으로는 이런 방법이 싫습니다(https://github.com/rails/pjax_rails/blob/master/lib/pjax.rb#L10-25) 몇 가지 이유가 있다.

은 rails ujs와 <form data-remote="true">에 대해 정상적으로 작동하는 것 같다.

토론 #7

사용자 정의 pjax:* 이벤트를 추가하면 이러한 특수한 상황 오류를 더욱 잘 처리할 수 있다고 생각합니다.
예, 서버 측 해커가 필요합니다.X-PJAX-URL 응답 제목 제시 고려.멍청해 보이지만, 당신은 항상 그것을 요청한 URL로 설정합니다.
나는 우리의 응용 프로그램을 위해 data-pjax-remote과 비슷한 일을 할 수 있지만, 나는 그것이 pjax 핵심으로 업그레이드될 것이라고 생각하지 않는다.Chris는 여기서 그런 신기한 것들을 보고 싶지 않았다.하지만 $("form[data-pjax-remote]").pjax()이 활성화를 도와준다면 좋을 것 같습니다.

토론 #8

응답 헤드--네, after_filter의 ActionController::Base을 통해 쉽게 실현할 수 있습니다.data-pjax-remote - 이 PR은 .submit에 연결된 <form>에 불과합니다. 이 .pjax()은 호출됩니다.응용 프로그램에서 다음과 같은 작업을 수행했습니다.

  $('form[data-pjax]').pjax();

이벤트 재구성: 더 귀찮아요.
1. 그래서 그의 행동은 pjax(w/GET)의 현재 잘못된 행위와 다르다?(만약 내가 500의 URL을 되돌려 달라고 요청한다면 pjax는 window.location+로 되돌려 보내기만 하면 됩니다. 그러나 지적한 바와 같이 POST에 대해서는 이렇게 할 수 없습니다.
2. 검증 오류: 이 PR과 pjax의 장점은 동기화(pjax를 사용하지 않음)해서 정상적인 물건을 받은 다음에 .pjax() 호출을 던질 수 있다는 것이다. 그의 행동도 마찬가지다.만약 사람들이 pjax:invalid 이벤트에 귀속되어 자신들의 오류 하이라이트 (또는 기타) 를 스크롤하도록 요구한다면, 당신은 이러한 단순성을 잃게 될 것이다.

토론 #9

은 #95

토론 #10

에서 백스텝을 수행합니다. 필요한 것이 있으면 알려 주십시오.

토론 #11

@tmeasday 당신은 우리가 왕복을 어떻게 처리해야 한다고 생각합니까?그래서 당신은 먼저 양식을 제출한 후에 후퇴를 클릭하고 전진을 클릭하세요.일반적으로 브라우저에서 반복 커밋을 알려 줍니다.아마도 우리는 비슷한 일을 해야 할 것이다.또한 pushState에는 스토리지 제한이 있으므로'대형'양식을 서열화하여 문제를 해결할 수 있을지 모르겠습니다.

토론 #12

네, 까다로운 문제입니다.물론, 당신은 pushState에 키를 저장할 수 있습니다. 이 키는 폼 데이터를 포함하는 로컬 저장소에 인용될 수 있지만, 이것은 pjax에 있어서 너무 복잡하다고 생각합니다.
또는 다시 제출하는 것을 허락하지 않을 수도 있다. 어쨌든 사이트는 자주 파괴되기 때문에 나는 이것이 막대한 손실이 될지 모르겠다.
만약 당신이 흥미가 있다면: 우리는 표준적인 휴식 노선에 의존하고 + 항상 GET개의 후퇴/전진 요청을 하면 이 문제를 해결할 수 있기 때문에 당신은 다음과 같은 행동을 얻게 될 것이다(예를 들어 User에서).
1. /users/ID/edit페이지 클릭
- 봐봐 users#edit- /users/ID/edit은 PJAX 항목입니다.
2. 제출을 클릭하세요.이것은 PUT에서 /users/ID까지 업데이트된 다음에 GET의 /users/ID으로 방향을 바꿉니다.
- 봐봐 users#show- /users/ID은 PJAX 항목입니다.
만약 네가 지금 반격을 한다면 users#edit을 다시 볼 수 있을 것이다. 만약 네가 그곳에서 앞으로 공격하면 pjax는 GET에서 /users/ID을 만들 것이다. 너는 다시 users#show을 볼 수 있을 것이다.엄밀히 말하면 이것은 잘못된 것이지만, 확실히 매우 효과적이다.
그러나 이것은 매우 취약해서 어떠한 비표준 제품에도 적용되지 않으며, 심지어는 간단한 POST에 적합하지 않을 수도 있다.만약 검증 오류가 존재한다면, 그것의 행동도 좀 이상하다.

토론 #13

네, 너무 많이 생각했나 봐요.나는 이런 퇴로를 좋아한다.
최소한post 데이터를 검색 문자열로 서열화하는 문제를 수정해야 합니다.야, 이것은 표에 있어서 좋은 생각이 아니야.
https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js#L220-222

토론 #14

헥타르, 그렇습니다. 저는 심지어 pjax가 그것을 저장하고 있다는 것을 깨닫지 못했고 모든 폼 데이터를 포함하는 GET 요청을 보냈습니다.물론 나의 #show 조작은 모든 추가 쓰레기를 소홀히 했을 뿐이다.
따라서 퇴로는 popstate에서 원시 GET이 요청한 URL에 POST 요청을 보내고 그들의 노선과 충돌하면 pjax+표/비 GET을 사용하지 말라고 알려준다.

토론 #15

@tmeasday$.pjax.submit 6FC6BD65DC435A5E13FDFC8375B22450B6700AC를 사용하여 이 내용을 다음 단계로 승급시켜 주셔서 감사합니다.

토론 #16

헤이@josh 당신은 $.pjax.submit()을 어떻게 사용하는지에 관한 문서를 제공할 수 있습니까?나는 이미 너의 포크 6fc6bd6를 설치했지만, 나는 여전히 매우 기본적인 오류를 만났다. has no method 'submit'.$.pjax.submit()과 $.pjax()은 같은 옵션이 있습니까?

토론 #17

PJAX에서 422개의 오류 페이지를 표시하는 방법:

$(document).on('pjax:error', function(event, xhr, textStatus, errorThrown, options){
  if (xhr.status == 422) {
    options.success(xhr.responseText, status, xhr);
     return false;
  }
 });

https://coderwall.com/p/xfjopa