update the values without refreshing the page

Question

We are using following code for button, once we enter the value in textfield and click on "update" button, it will update the value , in the mean time it will refresh the page. But it should update without refreshing the page.

we are updating Price, Special price, Attributes, quantity using single update button.

Complete code to update Price

<input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" 
class="ama1" type = "text" 
id = "price_<?php echo $products->getId(); ?>"

<?php echo Mage::getModel('directory/currency')->formatTxt($products->getPrice(), 
 array('display' => Zend_Currency::NO_SYMBOL)); ?>

onkeydown="validateNumbers(event)" name= "price[]" 
value = "<?php echo Mage::getModel('directory/currency')->formatTxt($products->getPrice(), array('display' => Zend_Currency::NO_SYMBOL)); ?>" style = ""/>


<input type="hidden" name="curr_<?php echo $products->getId(); ?>" id="curr_<?php echo $products->getId(); ?>" 
value="<?php echo Mage::getModel('directory/currency')->formatTxt($products->getPrice(), array('display' => Zend_Currency::NO_SYMBOL)); ?>" />


<p id="updatedprice_<?php echo $products->getId(); ?>" style = "display:none;color:red; position:relative; top:16px;">Updated</p>
<br/>


<button style="display:none;" id="price_reset_button_<?php echo $products->getId(); ?>" type="reset" class="cancel" onclick="hideResetPrice('<?php echo $products->getId(); ?>','<?php echo $products->getPrice(); ?>'); return false;">
<span><span><?php echo $helper->__('Cancel') ?></span></span>
</button>

</span>

Script

function hideResetPrice(product_id,priceold) { 

var qtyId='#price_'+ product_id; 
var currprice='#curr_'+ product_id; 
var editLink="#price_edit_link_"+ product_id; 
var updateButton="#price_update_button_"+ product_id; 
var valueprice="#valueprice_"+ product_id; 
var resetButton="#price_reset_button_"+ product_id; 

$wk_jq(resetButton).hide(); 
$wk_jq(valueprice).show(); 
$wk_jq(qtyId).val( $wk_jq(currprice).val()); 
$wk_jq(editLink).show(); 

}


function updateFieldPrice(product_id) 
{ 
var priceId = '#price_'+ product_id; 
var currprice='#curr_'+ product_id; 
var updatedqty = '#updatedprice_'+ product_id; 
var url ='<?php echo Mage::getUrl('marketplace/marketplaceaccount/updateFieldPrice/')?>'; 
$price = $wk_jq(priceId).val(); 
$wk_jq(currprice).val($price); 
new Ajax.Request(url, { 
method: 'post', 
parameters: {id: product_id, price: $price}, 
onComplete: function (transport) { 
//alert(transport.responseText); 

jQuery(updatedqty).show().delay(2000).fadeOut(); 

} 
}); 
}

controllers.php

public function updateFieldPriceAction(){
        Mage::app()->setCurrentStore(Mage_Core_Model_App::ADMIN_STORE_ID);
        $id= $this->getRequest()->getParam('id');
        $customerid=Mage::getSingleton('customer/session')->getCustomerId();
        $collection_product = Mage::getModel('marketplace/product')->getCollection()->addFieldToFilter('mageproductid',array('eq'=>$id))->addFieldToFilter('userid',array('eq'=>$customerid));


        try{
        $upd_price = $this->getRequest()->getParam('price');
        $product = Mage::getModel('catalog/product')->load($id);

        $product->setPrice($upd_price);
        $product->save();

        echo $price = $product->getPrice();
        echo $name = $product->getName();

        $response['message'] = 'Your Product Is Been Sucessfully Updated';
        $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));

        }catch(Exception $e){
        echo "Not Saving"; exit;
        Mage::log($e->getMessage());
        }

      }

code for saving all fields using Button

phtml

<button class="button" title="<?php echo $helper->__('Update') ?>" type="button" onclick="changeaction()"  id="mass_update_butn">
    <span><span><?php echo $helper->__('Save') ?></span></span>
</button>

script

function changeaction() {
    document.getElementById('formmassdelete').action = "<?php echo $this->getUrl('marketplace/marketplaceaccount/massupdatesellerpro') ?>";
    document.getElementById('formmassdelete').submit();
}

controllers

public function massupdatesellerproAction(){
    if($this->getRequest()->isPost()){
        if(!$this->_validateFormKey()){
            $this->_redirect('marketplace/marketplaceaccount/myproductslist/');
        }
        $ids= $this->getRequest()->getParam('product_mass_update');
        $price= $this->getRequest()->getParam('price');

        $i=1;
        foreach ($ids as $key => $value) {
            $i=$i+1;
            $qty = $this->getRequest()->getParam('stock'.$i);
            $selllermpassignproduct=Mage::getModel('mpassignproduct/mpassignproduct')->getAssignProDetails($value);
            $assignqty=isset($selllermpassignproduct['assignqty'])?$selllermpassignproduct['assignqty']:0;
            $newqty=$qty+$assignqty;

            $product = Mage::getModel('catalog/product')->load($value);
            $product->setPrice($price[$key]);

            $product->save();
            $stockItem = Mage::getModel('cataloginventory/stock_item')->loadByProduct($value);
            $stockItem->setData('manage_stock', 1);
            $stockItem->setData('qty', $newqty);
            $stockItem->save();
        }

        Mage::getSingleton('core/session')->addSuccess( Mage::helper('marketplace')->__('Products has been sucessfully Updated from your account'));
        $this->_redirect('marketplace/marketplaceaccount/myproductslist/');
    }
}

Answer 1

In your JS you have this line document.getElementById('formmassdelete').submit(); it tells your browser to submit the form, hence reloading the page.
If you want to do something without reloading the page and still use a controller action you should use Ajax.

Answer 2

The idea is to use AJAX.

If you're using jQuery you can use the following code to trigger your controller:

function changeaction() {
    jQuery.ajax( {
            url : "<?php echo $this->getUrl('marketplace/marketplaceaccount/massupdatesellerpro') ?>",
            dataType : 'json',
            type : 'get',
            data : {"product_mass_update" :pmu, "price": price, "stock": stock},
            success : function(data) {
            }
        });
}

Note: you will have to instantiate the following JavaScript variables with the following values:

• pmu => what corresponds to the product_mass_update parameter in your form
• price => what corresponds to the price parameter in your form
• stock => you will have to update that to add as many parameters as need to match your needs.

Answer 3

I don't see where in the code updateFieldPrice function is called, so I cannot tell you why your page gets refreshed. There is just no code for that. Please post the full code of the form with an "Update" button.