edit quantity without redirecting to another page

Question

we have a marketplace site. each seller/vendor have their own account....

we are displaying list of sellers products , qty, sku, price...etc in their account....

http://prntscr.com/8vgul0

we are using this code to display those information : http://pastebin.com/CvQkXZ2r

we have a edit button next to "Qty", if we click on that edit button, its redirecting to another page and than seller edit the information and save it.

we are using following code to edit :

<img src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>" data-type="<?php echo $products->getTypeId(); ?>" alt="<?php echo $helper->__('Edit')?>" title="<?php echo $helper->__('Edit')?>" class="mp_edit"/>

what we need is if we click on "edit" button, then it should display text field as like in the image and update and cancel button below.

edited question :

i am using this code for onclick event on image and call javascript function:

<img onclick="updateField(this, '. $product_id .'); return false"; src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>"

javascript function which i defined in onclick of image.

<?php $url='Mage::getUrl('module_name/index/updateField/');' ?>
<script type="text/javascript">

function updateField(image, product_id)
{
    new Ajax.Request('<?php echo $url ?>', {
        method: 'post',
        parameters: { id: fieldId, field: $(button).previous('input').getValue() }
    });
}
</script>

i Make function in controller that i define in java script ajax url.

public function updateFieldAction()
{
    $fieldId = (int) $this->getRequest()->getParam('id');
    $field = $this->getRequest()->getParam('field');
    if ($fieldId) {
        $model = Mage::getModel('modulename/model')->load($fieldId);
        $model->setField($field);
        $model->save();
    }
}

design file = http://pastebin.com/hhWrn1gk &

controller file = http://pastebin.com/MBtE2hcS

but i am not getting solution....

Answer 1

I am not sure if this will work for you or not. For input text box on edit click you will need to change code as per below.

    <!--    edit qty -->
<td>
    <?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>
    <input type="text" id="qty_<?php echo $product_id;?>" name="qty" value="<?php echo (int) Mage::getModel('cataloginventory/stock_item')->loadByProduct($products)->getQty(); ?>" style="display:none"/>
    <span class="label wk_action">
        <img onclick="updateField('<?php echo $product_id; ?>');return false;" src="<?php echo $this->getSkinUrl('marketplace/images/icon-edit.png'); ?>"/>
    </span>   
</td>


<?php $url = Mage::getUrl('module_name/index/updateField/'); ?>

<script type = "text/javascript" >

    var $wk_jq = jQuery.noConflict();

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

        $wk_jq(qtyId).toggle()

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

        new Ajax.Request('<?php echo $url ?>', {
            method: 'post',
            parameters: {id: product_id, qty: $qty}
        });
    }
</script>

I didn't tried it but you might be need to change as per your requirement and will need to change in controller file as well.