2009-10-26 4 views
21

これは、ほとんどの人気のある開発者がajaxでカスタムオートコンプリートを望んでいたため、これについて検索エンジンのキーワードの任意の組み合わせを検索することは本当に難しい。ブラウザのオートコンプリート/保存されたフォームがajaxリクエストで機能しない

ほとんどの開発者は、ajaxによるdbの結果を得るためのカスタムオートコンプリート、またはセキュリティ上の理由からブラウザの自動補完を無効にする方法や、別のオートコンプリートエクステンダを使用したいと考えています。

しかし、私はオートコンプリートについては言及していません。私は単純な通常のブラウザのオートコンプリートやブラウザーで保存されたフォームをIEやFFのいずれかで探しています。これは、テキストボックスにテキストを入力する際に​​ドロップダウンの最近の選択のように動作します。

ログインフォームには、ユーザー名やパスワードなどのフォームを簡単に入力するだけです。フォームが送信された後(フォームデータポスト)、ブラウザはオートコンプリートまたはイベントを保存し、FFはパスワードとともに保存するように求めます。

ここで、ajax経由で送信されたログインについて考えてみましょう。フォームデータは、POSTメソッドによって送信されなかったため単にIEまたはFFで自動的に保存されません。私はかなりそれがajaxとpostメソッドのためだと確信しています。

このようにDotNetNukeのようなCMSは開発目的で5人のユーザーのログイン用のユーザー名とパスワードを入力するのが本当に難しいです。イベントカスタムまたはエクステンダなしでユーザーが自分のフォームデータをブラウザに保存できるようにします。別の例として、ユーザは、同じ電子メールを見て、ウェブサイトまたはドメイン全体の任意の電子メールフォームに記入することができる。

これを回避するにはどうすればよいですか? 検索に適したキーワードは何ですか?

CallMeLaNN

+0

... – CallMeLaNN

+0

:http://stackoverflow.com/questions/9201858/how-to-store-to-browser-auto-完全オートフィル - 使用中のajaxコール - の代わりに私は一般的な解決策を望んでいますが、ただFFで動作するものではありません。 – JoeCool

+0

あなたは答えを見つけましたか?私は同じ問題を抱えています。乾杯 – Mango

答えて

4

私は同じ問題を抱えています。 FireFoxのためにAJAXポストを行う前に、JavaScriptを使って提出した隠れたiframeを追加して解決できました。 Chrome/IEで動作するものはまだ見つかりませんでした。

+0

Chrome 46は最終的に間違った動作を修正しました。 https://stackoverflow.com/a/33113374/810109 – mkurz

2

私は同じ問題に直面して、少しだけ検索しました。あなたがログインページを持っているなら、これを解決する最も簡単な方法は以下の解決策だと思います。我々は、ajaxを介して提出されたログインを考慮すると、ブラウザのいずれも、ユーザー名とパスワードフィールドのオートキャンプ機能を覚えていないか、提供していない。しかし、JavaScriptのサブミット機能(おそらくそれは古いバージョンのブラウザと互換性がない)を使用すると、すべてのブラウザがIE以外のユーザー名とパスワードを保存することを提案します。しかし、私はIEのためにユーザー名とパスワードを保存するために提供するために別のJavaScriptのトリッキーを見つけました。

私のログインページでは、私はユーザー名とパスワードを処理し、Ajaxリクエストでサーバーサイドに送信しました。ログインが成功すると、以下の方法でフォームを送信しました。ユーザーがログインに失敗したことを示します。 [EDIT]

下のリンクをチェックしてくださいので、リンクが壊れているリンク先のページでは、この問題についての固定ページが

があり、私はあなたに別のリンクを与えることはできません私の評判の下記の見積もりを検索してください:

固定ページをご覧ください。

もちろん、この方法は、送信するフォームのためにデフォルトページにログインセクションがある場合は適合しません。これにより、ページが点滅します。私は誰かがそれについて考えを持っているのだろうか?

1

ajax($ .postメソッド)を介してフォームを実際のバックエンドスクリプトに送信する邪魔にならないjs jQueryコードと、iFrame経由でダミースクリプトに送信するので、ブラウザは送信されたデータを後で保存しますオートコンプリート。

これはクロムの下ではうまくいきます。どんなフィードバックも大歓迎です!

var formframesindex = 0; 
function onSubmitAjax(evt){ 
    var $form = $(this); 
    var framesubmitting = $form.hasClass('framesubmitting'); 
    var action = $form.attr('action'); 
    var original_action = action; 

    if(!framesubmitting){ 
     $.post(action,$form.serialize()+"&ajax=1", function(responseText,message,request){ 
      formResponseHandler(responseText); 
     }, "json"); 


     formframesindex++; 
     var formframe = $("<iframe name='formframe_id_"+(formframesindex)+"' id='formframe_id_"+(formframesindex)+"' class='formframe' src='/fakeformreceiver.php'></iframe>"); 
     $('body').append(formframe); 
     var target = $form.attr('target'); 
     $form.data('originaltarget',target); 
     $form.data('originalaction',original_action); 
     $form.attr('target','formframe_id_'+formframesindex); 
     $form.attr('action','/fakeformreceiver.php'); 
     $form.addClass('framesubmitting'); 
     $form.submit(); 

    } else { 
     var current_target = $form.attr('target'); 
     var original_action = $form.data('originalaction'); 
     var original_target = $form.data('originaltarget'); 
     var $frame = $('#'+current_target); 
     setTimeout(function(){ 
      if($frame && $frame.length){ 
       $frame.remove(); 
      } 
      $form.attr('action',original_action); 
      $form.attr('target',original_target); 
      $form.removeClass('framesubmitting'); 
     },100); 
    } 
    return framesubmitting; 
} 
私はここでほとんど同じ質問をしてきたイムはまだ解決策を探して
+0

Chrome 46では、間違った動作が修正されました。これ以上のiframeの回避策は必要ありません。 https://stackoverflow.com/a/33113374/810109を参照してください。 – mkurz

関連する問題