0

ユーザーがプロセスを完了するために実行する4つのステップのフォームがあります。各ステップは個別の部分です。Ajaxを使用してフォームをユーザーに案内し、プロセスのどのステップに基づいて、どのパーシャルを表示するかを決定したいと思います。クリックされたボタンから、どのステップに基づいているかがわかります。しかし、クリックロジックを追加すると、以下のコードはブラウザで何もレンダリングしません。クリックリスナーを外すと問題なく動作します。

$(function(){
    $("#ask2-btn").click(function(e){
        $("div#ask").html("<%= escape_javascript(render('asks/ask3')) %>")
    });

    $("#ask3-btn").click(function(e){
        $("div#ask").html("<%= escape_javascript(render('asks/ask4')) %>")
    });

});

更新：レンダリングされていないブラウザからの応答は次のとおりです

$(function(){
    $("#ask2-btn").click(function(e){
        $("div#ask").html("<p class=\"lead\">Help with this issue<\/p>\n<ul><li class=\"profile\">Sam Smith<\/li><\/ul>\n<em>\"Expected outcome of the ASK?<\/em>\n    <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n        \n        <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Advice\" />\n        <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Advice\" />\n<\/form>    <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n        \n        <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Introduction\" />\n        <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Introduction\" />\n<\/form>    <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n        \n        <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Support\" />\n        <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Support\" />\n<\/form>    <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n        \n        <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Money\" />\n        <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Money\" />\n<\/form>    <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n        \n        <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Don&#x27;t know\" />\n        <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Don&#x27;t know\" />\n<\/form>")
    });

    $("#ask3-btn").click(function(e){
        $("div#ask").html("<p class=\"lead\">Help with this issue<\/p>\n<ul>\n  <li class=\"profile\">Sam Smith<\/li>\n <li class=\"check\"><\/li>\n<\/ul>\n <hr/>\n <a href=\"/\">Add another ASK<\/a>")
    });

});
4

1 に答える 1

0

これを理解しようと数日間試みた後、HTTP 更新なしでフォームの 4 つのステップをレンダリングするために、(Ajax ではなく) クライアント側で単純に Javascript を使用することにしました。4 つの個別のフォームを使用するのではなく、4 つの個別の div に分割された 1 つのフォームを使用しました。Div の 2 ～ 4 は最初は非表示であり、プロセスの各ステップで「送信」ボタンのクリックをリッスンする Javascript を作成しました。クリック イベントで、フィールド入力から値をコピーし、.text を使用して値を画面に書き込み、データベースに保存されたという印象をユーザーに与えました。

私の経験に基づくと、Rails と Ajax が、Ajax を使用して複数の連続した更新アクションを持つ複雑なフォームを適切に処理できるかどうかはわかりません。

Javascript は次のとおりです。

<script>
    $("#ask1-btn").click(function(e){
        findDescription();
        $("div#ask-list").toggleClass("hidden");
        $("div.ask1").toggleClass("hidden");
        $("div.ask2").toggleClass("hidden");
        e.preventDefault();
    });

    $("#ask2-btn").click(function(e){
        askStep3();
    });

    function askStep3(){
        findContact();
        $("div.ask2").toggleClass("hidden");
        $("div.ask3").toggleClass("hidden");
    };

    function findDescription(){
        var ask_description = document.getElementById("ask-desc-input").value;
        $("li#ask-description p.cname").text(ask_description);
    };

    function findContact(){
        var ask_contact = document.getElementById("ask-contact-input").value;
        $("li#ask-contact").text(ask_contact);
    };

</script>
于 2012-11-24T23:23:53.280 に答える