我们有市场网站，每个卖家/供应商都有自己的账户。他们可以看到产品列表。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);
}
});
}
所以在看了它之后，我注意到了一些问题。我没有完全按照你的意愿去做，而是做了一些改变。
- 更新按钮不应该在开始时显示，因为并没有什么要更新的
- 只有在编辑时才会显示"取消"
- 在ajax请求期间应禁用更新按钮
在这里找到小提琴https://jsfiddle.net/g1v9x1bt/以及下面的完整代码。看看它是否能帮到你。
So after looking at it, there are a few issues I noted.
我没有完全按照你的意愿去做，而是做了一些改变。
- 更新按钮不应该在开始时显示，因为并没有什么要更新的
- 只有在编辑时才会显示"取消"
- 在ajax请求期间应禁用更新按钮
在这里找到小提琴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>