jQuery 아약스 요청이 번거롭다

Question

아약스 요청이 있습니다. 사용자가 편집 링크를 클릭하면 항목의 ID를 가져 와서 양식에로드 된 해당 항목의 데이터로 페이지를 새로 고칩니다.

내 문제는 : 이것은 ajax 호출 전에 나타나는 경고와 함께 작동합니다. 경고를 생략하면 아약스 오류가 발생하지만 (ID가 게시 됨에도 불구하고) PHP 페이지가 다시로드됩니다. 또한, 그것은 성공 콜백으로 newDoc 물건을 넣을 때만 작동합니다. 전체 콜백과 동일한 라인과 페이지가 다시로드됩니다. 더욱이 이것은 Firefox에서만 발생합니다.

jQuery('a.edit').on('mousedown', function (e) { 
    e.preventDefault(); 
    var id = jQuery(this).attr('data-title'); 
    alert('test'); 
    jQuery.ajax({ 
     url: document.location, 
     data: { 
      id: id 
     }, 
     success: function (data) { 
      var newDoc = document.open("text/html", "replace"); 
      newDoc.write(data); 
      newDoc.close(); 
     }, 
     error: function() { 
      alert('error'); 
     } 
    }); 
}); 

어떻게해야합니까?

편집 : 타이밍 문제 여야합니다. 나는 편집 링크를 잠시 동안 누르고 있으면 모든 것이 정상적으로 작동한다는 것을 알았다. 내가 짧은 클릭을 할 때, 그것은하지 않습니다. 그래서 setTimeout()에서 Ajax를 래핑하려고 시도했지만 도움이되지 않았습니다. 다른 아이디어?

Answer 1

속성은 URL의 부분에 대응하여,

jQuery.ajax({ 
    url: location.href, 
    data: { 
     id: id 
    }, 
    success: function (data) { 
     var newDoc = document.open("text/html", "replace"); 
     newDoc.write(data); 
     newDoc.close(); 
    }, 
    error: function() { 
     alert('error'); 
    } 
}); 

location

구조화 목적, document.location 대신 location.href 사용하려고. location.href은 단일 문자열의 전체 URL입니다.

Answer 2

알 수 있습니다.

문제는 Firefox가 mousedown 이벤트를 처리하는 방식입니다. 마우스 단추를 놓으면 바로 아약스 호출을 중단하는 것 같습니다. 이벤트를 으로 변경하고을 클릭하면 모든 것이 정상입니다.

jQuery('a.edit').on('click', function() { 
    var id = jQuery(this).attr('data-title'); 
    jQuery.ajax({ 
     url: document.location, 
     data: { 
      id: id 
     }, 
     success: function (data) { 
      var newDoc = document.open("text/html", "replace"); 
      newDoc.write(data); 
      newDoc.close(); 
     } 
    }); 
});