2012-09-13 1 views
6

나는 기본적으로 jqGrid 편집 양식이 모든 입력 요소에 autocomplete="off" 속성을 부여했기 때문에 jqgrid edit form autocomplete="off" by default, how to change to autocomplete="on"이라는 질문을 게시했습니다. 이것이 웹 브라우저가 jqGrid 편집 양식에 대한 일반적인 자동 채우기 기능을 구현하지 않는 이유라고 생각했습니다. 이 문제를 해결하고 모든 입력 요소를 autocomplete="on" 특성으로 만든 후에도 jqGrid 편집 양식에 대한 자동 채우기가 없습니다.jqgrid 편집 양식이 브라우저 자동 완성 기능을 상실합니다

누구나 자동 채우기가 이러한 양식에 대해 작동하지 않는 이유를 알고 있습니까? 양식은 아약스를 통해 제출되므로 영향을 미치는지 아닌지 잘 모르겠습니다.

나는 단지 이 아니며jQuery's autocomplete()입니다. 나는 현대적인 웹 브라우저 (크롬, FF)에 대한 양식 autofill 기능을 내장에 대해 이야기하고 있습니다.

예를 들어 내 jsfiddle 예제 양식 here으로 이동하십시오. 원하는 양식으로 양식을 작성한 다음 submit을 클릭하십시오. 페이지를 새로 고침하고 다시 채 웁니다. 귀하의 브라우저에는 이 기억되어 있고 처음 채워지는 값은입니다. 이것은 나를 위해 일어나는 일입니다.

반면에 jqGrid 편집 예제 here으로 이동하면. 행을 선택하고 작은 편집 버튼 (연필 모양)을 클릭하십시오. 첫 번째 필드는 변경할 수 없지만 다른 필드는 변경할 수 있습니다. 다른 입력란에 원하는 것을 넣고 submit을 클릭하십시오. 페이지를 새로 고침하고 다시 시도하십시오. 많은 컴퓨터와 FF 및 Chrome에서이 현상이 발생한다는 것은 은 이전 항목 중을 기억하지 않는다는 것입니다.

이것은 문제입니다. 동일한 문제가 발생합니까? 그렇다면 jqGrid 양식을 브라우저의 자동 채우기 기능과 호환 가능하게 만들 수 있는지 알고 있습니까?

감사합니다.

답변

4

, 그들은 모두에 의존 옳은 길에 당신을 도울 수있는 양식 필드 자체의 값을 저장하기 위해 양식이 제출됩니다. jqGrid는 AJAX를 통해 양식을 처리하므로 (업데이트 버튼은 제출 버튼이 아닌 링크 임) 양식 자체는 실제로 제출되지 않으므로 나중에 자동 완성을 통해 나중에 사용할 수 있도록 필드 값을 브라우저에 저장할 수 없습니다.필드 값을 저장하는 브라우저를 강제

한 가지 방법은,는 <form />를 복제, <iframe />을 만들 <iframe />에 복제 <form />를 추가하고, AJAX 양식 제출 프로세스의 일부로서 제출하는 것입니다.

예를 들어 JSFiddle의 수정 된 버전을 예로 들자.

위의 예에서는 '표준 양식'을 작성하고 제출하여 페이지를 다시로드하면 필드가 예상대로 자동 완성됩니다. 'AJAX 양식'을 작성하고 제출하고 페이지를 새로 고침하면 필드가 자동 완성되지 않습니다. 마지막으로 'AJAX + iFrame 양식'을 작성하고 제출하고 페이지를 새로 고침하면 입력란이 자동 완성됩니다.

* 참고 : 위의 예는 Chrome, Safari 및 Firefox에서 테스트되었습니다. Your Milage는 다를 수 있습니다.

$('#iframe_submit').bind('submit', function(e){ 
    e.preventDefault(); // Prevents Standard Submit 

    // Do AJAX Stuff Here... 

    // Create Clone of Form, Append to iFrame and Trigger Submit 
    // This Forces Autocomplete to Register 

    var $clone = $('#iframe_submit').clone(); 
     $clone.attr('id', 'iframe_clone'); // Only One ID Allowed 

     $('<iframe />').appendTo('body').contents().find('body').append($clone); 
     $('iframe').contents().find('#iframe_clone').submit(); 
    }); 

나는이 도움이 되었으면 좋겠 : 완성도를 들어

, 여기에 relavent 코드입니다!

+0

설명해 주셔서 감사합니다! jqGrid가이 기능을 기본 패키지에 추가하거나이를 사용 가능하게하는 옵션이 있으면 멋질 것입니다. –

0

문제에서 정확히 볼 수있는 코드가 있지만. 브라우저에 따라 브라우저 제한으로 인해 전적으로 가능하다고 가정합니다. 그러나 또한. 그것은 몇 가지 중 하나 일 수 있습니다. 양식 요소가 <form></form> 태그로 묶여 있지 않으므로 자동 완성 사용 브라우저는 자동 완성을 원하는 요소를 선택할 수 없습니다.

2 귀하의 요소에 대해 모호한 이름을 사용하고 있습니다. 일반적으로 자동 완성 브라우저는 first_name, firstname, name, email, username, street1, street_one 등 일반적으로 사용되는 양식 요소 이름을 찾습니다.

3 기능이 준비된 문서에서 자바 스크립트를 통해 동적으로 그리드를로드하는 경우 완전히 가능합니다. 자동 완성이 이미 페이지에 자동 완료 할 양식이 있는지 확인했습니다. 그렇다면 브라우저 자동 완성 기능이 문서가 준비되기 전에 실행 중일 수 있습니다. 이 경우을로 밝혀지면 ..이 게시물은 모든 브라우저에서 저장 및 약간 다른 방식으로 양식 필드의 자동 완성을 처리하는 동안

jQuery AutoComplete Trigger Change Event

+0

업데이트 된 질문을 확인하십시오. 시도 할 수있는 예가 있습니다. 예제에서는 이상한 이름을 선택 했으므로 문제는 아닙니다. 또한 당신이 링크 한 jQuery의'자동 완성 (autocomplete) '에 대해서도 언급하지 않습니다. 도와 주셔서 감사합니다! –