3

このサイトは、Google を使用しているときに常に私の質問に対する回答を提供してくれますが、これに対する回答を見つけるのに苦労していたので、登録して挨拶して質問することにしました :)

私はタイムテーブル（htmlテーブルを使用）を持っており、各セルはjquery-uiの選択可能として選択可能としてマークされています。

次に、選択したセルを予約するために POST を使用するボタン付きのフォームがあります。

<form  method="get" action="../test" id="add">
                    <button type="submit" class="btn btn-primary">Book selected period(s)</button>
                </form>

選択可能なシリアル化の例では、数値を適切に選択していることを示しています。しかし、ボタンを押すと（テストにGETを使用）、間違った数字が表示されるようです。たとえば、セル 1 を選択して本をクリックすると、GET で cell_id=1 が表示されますが、セル 1 とセル 2 を選択すると、それらのカウントをループするため、GET は cell_id=1、cell_id=1、cell_id=2 を表示します。 (つまり、1+1 ではなく、1 を数えてから 1+1 を数えます)

これは、5 つのセルを選択すると、5 ではなく 15 の結果 (1+2+3+4+5) が得られることを意味します。これを回避する方法はありますか。これは私がこれまでJavaScriptで持っているものです:

         $( "#selectable" ).selectable({
         filter: ".selectable",
            stop: function() {
                $( ".ui-selected", this ).each(function() {
                    var data = $(this).data();
                    $(data).each(function(key, value){
                        var period_id = document.createElement("input");
                        period_id.setAttribute("type", "hidden");
                        period_id.setAttribute("name", "booking[1][period]");
                        period_id.setAttribute("value", data.period);
                        document.getElementById("add").appendChild(period_id);
                   });

                });
            }
        });

上記のビットでは、他のphpから取得したセルからperiod_idを取得しています。マルチではなく単一のセルを選択すると、意図したとおりに機能します。これに答えるために他のコードが必要な場合は、お知らせください

ありがとう

追加として編集 します。これが私が達成したいことです（私が何を意味するかをより明確に理解するために）。ユーザーにはタイムテーブル グリッドが表示されます。1 つのセルを選択して本を選択すると、booking.php に移動するために選択した期間と日の配列が POST 経由で渡されます。また、複数のセルを選択して予約をクリックするオプションもあります。これにより、予約用の配列として各セルが渡されるため、php はすべてのセル配列をループし、jquery 選択可能変数によって返される部屋/日の ID を使用して複数のセルを予約できます。

4

3 に答える 3

2

非表示の入力要素を使用して思いついたソリューションを次に示します。

Jクエリ

                //Activities Selectable
            $(".selectable-activities").selectable(
                {filter: "li"},
            {
                stop: function() 
                    {//places selected in input box
                        var text = "";
                        $( "#activities-input" ).val(text);
                        $( ".ui-selected", this ).each(function() {
                            var index = $(this).attr("id");
                            text = text + " " + index;
                            $( "#activities-input" ).val(text);
                        });
                    }


            },
            //Clears input box on reload
            {   create: function() {$( "#activities-input" ).val("");}}
            );

HTML

                <fieldset>
                <legend>Environmental</legend>
                <ol class="selectable selectable-activities">
                    <li class="ui-state-default" id="LNTS" >"leave No Trace" Skills</li>
                    <li class="ui-state-default" id="Aqua" >Aquatic Ecology / Study</li>
                    <li class="ui-state-default" id="OutSkill" >Camping Skills / Outdoor Living</li>
                    <li class="ui-state-default" id="Cons" >Conservation</li>
                    <li class="ui-state-default" id="Ento" >Entomology</li>
                    <li class="ui-state-default" id="Farm" >Farming / Gardening</li>
                    <li class="ui-state-default" id="Fores" >Forest Ecology</li>
                    <li class="ui-state-default" id="Geol" >Geology (Earth)</li>
                    <li class="ui-state-default" id="Herp" >Herpetology (amphibians & Reptiles)</li>
                    <li class="ui-state-default" id="Mari" >Marine Science</li>
                    <li class="ui-state-default" id="Natur" >Nature Explosure</li>
                    <li class="ui-state-default" id="Oni" >Ornithology (Birds)</li>
                    <li class="ui-state-default" id="Vet" >Veterinary Science</li>
                    <li class="ui-state-default" id="WildLi" >Wildllife Ecology</li>
                    <li class="ui-state-default" id="Zoo" >Zoology (Animals)</li>
                </ol>
                </fieldset>

                <!--Here is the hidden input-->
                <input type="hidden" name="a" id="activities-input" />
于 2012-06-05T06:31:17.140 に答える
0 
<pre>
     $( "#selectable" ).selectable({
     filter: ".selectable",
        stop: function() {
            $( ".ui-selected", this ).each(function() {
                var data = $(this).data();
                $(data).each(function(key, value){
                    var period_id = document.createElement("input");
                    period_id.setAttribute("type", "hidden");
                    period_id.setAttribute("name", "booking["+key+"][period]");
                    period_id.setAttribute("value", data.period);
                    document.getElementById("add").appendChild(period_id);
               });

            });
        }
    });

予約[1] =>予約[キー]。

于 2012-06-01T10:26:52.153 に答える
0

これを解決する方法は、追加することでした

var count = 0

直前

$( ".ui-selected", this ).each(function() {

次に、各フィールドにはこれがありました

date_id.setAttribute("name", "booking["+count+"][date]");

次に、ループの最後に

count = count + 1

私のために働いたが、アドバイスをくれたみんなに感謝

于 2012-06-21T08:51:25.590 に答える