Question

我的jquery spinner小部件似乎在jquery对话框ui-dialog-buttonpane类中不起作用。我的目标是从对话框中选择一个项目数量（通过表单输入），然后添加到购物车。

我已经为对话框和微调器研究了jquery api，但没有什么突出的。是什么打破了我的微调器？注意：为简洁起见，此处不包括“输入”类及其内容。

我的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*/
});

我得到的只是表单输入元素 - 没有微调按钮。我在这里俯瞰什么？非常感谢。

Rails 3.2 - 如何在对话框小部件中添加jquery微调框小部件

0 个答案: