0

jEditable を使用して、ユーザーがテーブル内の電話番号と電子メール アドレスを修正し、Enter キーを押すとデータベースを更新できるようにしています。問題は、サーバーから返された応答がクライアントによってテキストとして解釈されているだけであることです。実際には、実行したい JavaScript コードがいくつかあります。

jEditable が機能する方法は、目立たないように「編集可能」アクションを DOM 要素にアタッチすることです。これはうまく機能しています。クライアントが tcpdump を使用してサーバーに送信しているものを監視すると、X-Requested-With: XMLHttpRequest; を使用して、POST が html であることがわかります。サーバーから返されるのは Content-Type: text/javascript です。

問題の Rails コントローラー アクションは verify_email です。すべての検証ロジックは完全に機能していますが、クライアント側の JavaScript はそうではないため、コントローラー アクションを次のように単純化しました。

def verify_email
  respond_to do|format|
    format.js
  end
end

同様に、verify_email.js.erb を単純化して

$(function(){ console.log("hello from verify_email callback")});

ブラウザ コンソールで楽しい挨拶が表示されると思われるかもしれませんが、そうではなく、td の値がテキスト '$(function(){ console.log("hello from verify_email callback")}) に変わります。 ;'

jEditable 機能をテーブル データにアタッチすることは、クラスによって行われます。

$(function() {
    $('.email')
        .editable('http://newserver.us.org:3001/directory/review/verify_email', {
            indicator : '<%= image_tag "wait18trans.gif", :title => "wait" %>',
            tooltip : "Click to edit...",
            }
        })
})

エラーがどこにあるのかわかりません。jEditable を使用しないコントロールと比較しています: 変更時に投稿するチェックボックスがあります:

$(function() {
    $('.checkmark').change(function() {
            $.post("http://newserver.us.org:3001/directory/review/checkmark",
            {"id" : $(this).attr("id")})
        });
});

同じコンソール ログ メッセージを checkmark.js.erb に入れると、楽しい挨拶が表示されます。ワイヤ上では、ヘッダーは同じように見えます。

私の現在の考えでは、jEditable は DOM を微調整してテキスト入力フィールドを挿入し、それを削除します。

次のように、jEditable にコールバックを追加して、何が戻ってくるかを確認しました。

$(function() {
    $('.email')
        .editable('http://newserver.us.org:3001/directory/review/verify_email', {
            indicator : '<%= image_tag "wait18trans.gif", :title => "wait" %>',
            tooltip : "Click to edit...",
            callback : function(value, settings) {
                console.log(this);
                console.log(value);
                console.log(settings);
            }
        })
})

これにより、次のコンソール ログが生成されます。

[Log] <td class=​"email" id=​"2-3--1347-597" title=​"Click to edit...">​$(function(){ console.log("hello from verify_email callback")});
[Log] $(function(){ console.log("hello from verify_email callback")});​
[Log] Object
ajaxoptions: Object
autoheight: true
autowidth: true
callback: function (value, settings) {
event: "click.editable"
height: 35
id: "id"
indicator: "<img alt="Wait18trans" src="/directory/images/wait18trans.gif" title="wait" />"
loaddata: Object
loadtext: "Loading..."
loadtype: "GET"
name: "value"
onblur: "cancel"
placeholder: ""
submitdata: Object
target: "http://newserver.us.org:3001/directory/review/verify_email"
tooltip: "Click to edit..."
type: "text"
width: 202
__proto__: Object

それvalueがjavascriptの文字列であることは役に立ちません。

最終的に、javascript に実行させたいのは、td の ID を更新することです。それで、戻ったときに正しい要素を見つけるために使用するために、jEditable ポストの前に td への参照を取得する必要があるのでしょうか?

4

1 に答える 1