1

jquery スピナー ウィジェットが、jquery ダイアログの ui-dialog-buttonpane クラス内で動作しないようです。私の目標は、ダイアログから（フォーム入力を介して）アイテムの数量を選択し、カートに追加することです。

ダイアログとスピナーの両方で jquery API を調べましたが、目立ったものはありません。スピナーを壊しているのは何ですか? 注: クラス 'entry' とその内容は、簡潔にするためにここには含まれていません。

私のHTML：

<div id="storeItemZoom">
    <% @products.each do |product| %>
        <div id="itemBoxZoom" data-id="<%= product.id %>" data-brand="<%= product.brand %>">
            <table>
                <tr>
                    <td><%= image_tag(product.image_url )%></td>
                    <td><span><%= sanitize(product.description) %></span></td>
                </tr>
            </table>
            <div class="price_line">
                <span class="price"><%= number_to_currency(product.price)%></span>
                (<%= product.portion_size%> <%= product.unit_of_measure%>)           
            </div>
            <div class="itemMagnify" data-id="<%= product.id %>">
            </div>
            <div class="btnQty" data-id="<%= product.id %>">
                <label for="spinner">Quantity:</label>
                <input id="spinner" name="value" size="1" value="1" min="1" max="100" data-id="<%= product.id %>"/>
            </div>
        </div>
    <%  end %>
</div>

私のJavascript：

$(document).ready(function(){

$('#storeItemZoom').hide();
$('#itemBoxZoom').hide();
$('.btnQty').hide();
$("#spinner[data-id='" + prodvarid + "']").hide();

//Rollover Magnify
$('.entry').mouseover(function(){
    prodvarid = $(this).data('id');
    prodvarbrand = $(this).data('brand');
    //$("#spinner[data-id='" + prodvarid + "']").spinner();

    $("#itemBoxZoom[data-id='" + prodvarid + "']").dialog({
        autoOpen: false,
        show: 400,
        modal: true,
        title:  prodvarbrand,
        minWidth: 800,
        close: function(event, ui){
            $(this).dialog("destroy");
            $('#storeItemZoom').css("display","none");
        },
        buttons: [{
            text: "Add to Cart",
            click: function() {
                $.ajax({
                    type: "POST",
                    url: '/line_items',
                    beforeSend: function(xhr){
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
                    data: {product_id: prodvarid, remote: true},
                    dataType: "script"
                });
                $(this).dialog("destroy");
                $('#storeItemZoom').css("display","none");
            }
        }]
    });
});

$('.itemMagnify').click(function(){
    $("#itemBoxZoom[data-id='" + prodvarid + "']").dialog('open');
    var qty1 = $(".btnQty[data-id='" + prodvarid + "'] input").spinner();
    $(qty1).prependTo($('.ui-dialog-buttonset'));
    $(".btnQty[data-id='" + prodvarid + "'] label").prependTo($('.ui-dialog-buttonset'));
});
/*End Rollover Magnify*/
});

私が得るのはフォーム入力要素だけです - スピナーボタンはありません。私はここで何を見落としていますか？とても有難い。

4

0 に答える 0