エラー時にJeditable Asyncが元に戻る

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

  •  06-07-2019
  •  | 
  •  

質問

JQueryのJEditableプラグインを使用しており、プラグインにエラーを返し、前の値に戻し、ユーザーにエラーを表示するように指示したいと思います。同期ajax呼び出しを使用してこれを機能させていますが、代わりに非同期コールバックを使用することを好みます。これまでのコードは以下のとおりです。

$("#editbox").editable(submitEdit, { 
     indicator : "Saving...",
     tooltip   : "Click to edit...",
     name : "Editable.EmailAddress",
     id   : "elementid",
     type : "text",
     submit  : "<span class=\"mini_button\">Ok</span>",
     cssclass : "edit_text"
});
function submitEdit(value, settings)
{ 
     var edits = new Object();
     var origvalue = this.revert;
     var textbox = this;
     edits[settings.name] = [value];
     var returned = $.ajax({
                        url: "http://someurl.com/edit/", 
                        type: "POST",
                        /*async: false,*/
                        data : edits,
                        dataType : "json",
                        complete : function (XMLHttpRequest, textStatus) 
                                   {
                                       alert("Setting back to original value " +origvalue);
                                       $(textbox).html(origvalue);
                                   }
                     });

      /*var response = $.secureEvalJSON(returned.responseText);
      if (response.errorMsg != '')
      {    
          $("#ajaxNotify").addClass("ajax_error").html(response.errorMsg); 
          return(this.revert);                     
      }*/
      return(value);
 }

同期の実装もコメントに含めましたが、これはうまく機能します。高サーバー負荷のシナリオでは、バックエンドで編集が完了するまでブラウザーがロックされます。むしろ、これは値を返し、編集が失敗した場合に後で元に戻します。

ありがとう、

編集

ジッターの提案を試みてIE8で動作させた後、 only ボタンをクリックすると、FFとchromeに問題があることに気付きました。フィールドをクリックして、編集してからEnterキーを押すと、すべて問題ありません。コールバックが起動し、値がリセットされます。

フィールドをクリックして編集し、[OK]ボタンをクリックしても検証エラーが表示されない場合、フォームはアクティブなままで、そこに座っています。その部分が実行されるエラーを受信すると、テキスト値は元に戻りますが、フィールドを再度クリックすることはできません。jeditableはバインドされていないようです。

投稿と応答がfirebugで受信されていることを確認できるため、ajaxが起動します。

{＆quot; errorMsg＆quot;：＆quot;＆quot;}

Enterキーを押した場合、すべてのブラウザでこれが完全に機能するのはなぜですか？[OK]ボタンをクリックしても機能しないのはなぜですか？どちらの方法でも同じコードが実行され、ボタンは間違いなくフォームを正しく送信しています。

バインド解除は、ボタンを押したときにのみ発生します。

jeditableを使用してこれらのようなサーバー側検証の問題を処理する例はありますか？

役に立ちましたか？

解決

これは機能しませんか？

...
complete : function (xhr, textStatus) {
  $.secureEvalJSON(xhr.responseText);
  if (response.errorMsg != '') {
    $("#ajaxNotify").addClass("ajax_error").html(response.errorMsg);
    alert("Setting back to original value " +origvalue);
    $(textbox).html(origvalue);
  }
}
...

他のヒント

別の方法があります。jeditableのonerror関数を検討できます。

...
onerror: function(settings, original, xhr) {
  $.secureEvalJSON(xhr.responseText);
  if (response.errorMsg != '') {
    var origvalue = ...;
    $("#ajaxNotify").addClass("ajax_error").html(response.errorMsg);
    console.log("Setting back to original value " + origvalue);
    $(original).html(origvalue);
  }
}
...
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top