javascript - 单击编辑按钮后显示更新和取消按钮

Question

我们有市场网站，每个卖家/vendor 都有自己的帐户。他们可以看到产品列表。 sku，他们帐户中的数量。

现在显示如下:图像 1 = http://prnt.sc/8wm25g

如果我点击取消按钮，它会像这样显示:http://prnt.sc/8wm2fv

我需要的是:

a) 如果我们点击编辑按钮，那么只有“更新”和“取消”按钮应该可见，而“编辑”按钮应该隐藏。

b) 稍后如果我们点击“取消”按钮，“更新和取消”按钮应该隐藏，“编辑”按钮应该可见。

<?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>
      <input type = "text" id = "qty_<?php echo $products->getId(); ?>" name = "qty" value = "<?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>" style = "display:none"/>



    <span class="label wk_action" id="edit_link_<?php echo $products->getId(); ?>">
            <img onclick="showField('<?php echo $products->getId(); ?>'); return false;" src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>"/>
        </span>  

        <br/>
        <button id="update_button_<?php echo $products->getId(); ?>" class="button wk_mp_btn1" onclick="updateField('<?php echo $products->getId(); ?>'); return false;" >
            <span><span style="font-size:12px;"><?php echo $helper->__('Update') ?></span></span>
        </button>

        <button id="reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideReset('<?php echo $products->getId(); ?>'); return false;">
            <span><span><?php echo $helper->__('Cancel') ?></span></span>
        </button>

    <script type = "text/javascript" >

            var $wk_jq = jQuery.noConflict();

            function hideReset(product_id) {
                var editLink = "#edit_link_"+ product_id;
                var updateButton = "#update_button_"+ product_id;
                var resetButton = "#reset_button"+ product_id;

                $wk_jq(editLink).show();
                $wk_jq(updateButton).hide();
                $wk_jq(resetButton).hide();
            }
             function showField(product_id)
            {
                var qtyId = '#qty_'+ product_id;

                var editLink = "#edit_link_"+ product_id;
                var updateButton = "#update_button_"+ product_id;
                var resetButton = "#reset_button"+ product_id;

                $wk_jq(qtyId).toggle()

                $wk_jq(editLink).hide();
                $wk_jq(updateButton).show();
                $wk_jq(resetButton).show();

                $qty = $wk_jq(qtyId).val();


            }
            function updateField(product_id)
            {
                var qtyId = '#qty_'+ product_id;

                var editLink = "#edit_link_"+ product_id;
                var updateButton = "#update_button_"+ product_id;
                var resetButton = "#reset_button"+ product_id;
            var url ='<?php echo Mage::getUrl('marketplace/marketplaceaccount/updateField/')?>';

                $wk_jq(qtyId).toggle()

                $wk_jq(editLink).hide();
                $wk_jq(updateButton).show();
                $wk_jq(resetButton).show();

                $qty = $wk_jq(qtyId).val();

                new Ajax.Request(url, {
                    method: 'post',
                    parameters: {id: product_id, qty: $qty},
            onComplete: function (transport) {


                    alert(transport.responseText);
            $wk_jq(qtyId).setValue($qty);

                }
                });
            }

Answer 1

所以在查看之后，我注意到了一些问题。 我没有完全按照您的意愿去做，而是做了一些更改。

1. 更新按钮不应在开始时显示，因为没有要更新的内容。
2. 取消应仅在编辑时显示。
3. 在 ajax 请求期间应禁用更新按钮。

在这里找到 fiddle https://jsfiddle.net/g1v9x1bt/ 以及下面的完整代码。看看它是否对您有帮助。

So after looking at it, there are a few issues I noted.

我没有完全按照您的意愿去做，而是做了一些更改。

1. 更新按钮不应在开始时显示，因为没有要更新的内容。
2. 取消应仅在编辑时显示。
3. 在 ajax 请求期间应禁用更新按钮。

在这里找到 fiddle https://jsfiddle.net/g1v9x1bt/ 以及下面的完整代码。看看它是否对您有帮助。

    <span id="qty_span_<?php echo $products->getId(); ?>"><?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?></span>
      <input type="text" id="qty_<?php echo $products->getId(); ?>" name="qty" value="<?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>" style="display:none"/>


    <span class="label wk_action" id="edit_link_<?php echo $products->getId(); ?>">
            <img width="25" onclick="showField('<?php echo $products->getId(); ?>')" src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>" title="<?php echo $helper->__('Edit') ?>" alt="<?php echo $helper->__('Edit') ?>"/>
        </span>  

        <br/>
        <button id="update_button_<?php echo $products->getId(); ?>" class="button wk_mp_btn1" onclick="updateField('<?php echo $products->getId(); ?>');" style="display:none" >
            <span><span style="font-size:12px;"><?php echo $helper->__('Update') ?></span></span>
        </button>

        <button id="reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideReset('<?php echo $products->getId(); ?>');" style="display:none">
            <span><span><?php echo $helper->__('Cancel') ?></span></span>
        </button>




    <script>
        var $wk_jq=jQuery.noConflict();

        function hideReset(product_id) {
            var qtyId='#qty_'+ product_id;

            var editLink="#edit_link_"+ product_id;
            var updateButton="#update_button_"+ product_id;
            var resetButton="#reset_button_"+ product_id;

            $wk_jq(qtyId).hide();

            $wk_jq(editLink).show();
            $wk_jq(updateButton).hide();
            $wk_jq(resetButton).hide();
        }

        function showField(product_id)
        {
            var qtyId='#qty_'+ product_id;

            var editLink="#edit_link_"+ product_id;
            var updateButton="#update_button_"+ product_id;
            var resetButton="#reset_button_"+ product_id;

            $wk_jq(qtyId).show();

            $wk_jq(editLink).hide();
            $wk_jq(updateButton).show();
            $wk_jq(updateButton).prop('disabled', false);//just in case
            $wk_jq(resetButton).show();

            return false;
        }

        function updateField(product_id)
        {
            var qtyId='#qty_'+ product_id;

            var qty = $wk_jq(qtyId).val();

            var $updateButton = $wk_jq("#update_button_"+ product_id);


            //disable it after start
            $updateButton.prop('disabled', true);

            new Ajax.Request(url, {
                method: 'post',
                parameters: {id: product_id, qty: qty},
                onComplete: function (transport) {
                    $wk_jq('#qty_span_' + product_id).text(qty);
                    hideReset(product_id);
                    $updateButton.prop('disabled', false);
                    alert(transport.responseText);

                    $wk_jq(qtyId).setValue($qty);
                }
            });

            return false;
        }
    </script>