How to upload image file with ajax

jQuery("form#add-group-form").submit(function(e){
        e.preventDefault();
        var formData = new FormData(jQuery(this)[0]);
       
        jQuery.ajax({
            type:"POST",
            url:jQuery(this).attr("action"),
            data:formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(response){
                alert(response);
            }
        });
    });

How to work async in jQuery ajax | Does it have something to do with preventing other events on the page from firing?

Yes, async to false means that the statement you are calling has to complete before the next statements of your function can be called. If you set async: true then that statement will begin it's execution the same time and the next statement will be called regardless of whether the async statement has completed yet.

jQuery('body #pricegroup-products-container').on('click', '.saveimage' , function (e) {
        var returnHtml = '';
        jQuery.ajax({
            type: "POST",
            async: false,
            cache: false,
            url: url,
            data: {id: '12345'},
            dataType: "html",
            success: function (response) {
                returnHtml = response;
            }
        });
        alert(returnHtml);
    });

How to set wait/process bar/blur div using css html

Html

Add following code in you html

<div class="wait"></div>

Css

Add following code in you css

.wait{
 background: #fff url("../img/waiting.gif") no-repeat scroll center center;
 bottom: 0;
 left: 0;
 opacity: 0.5;
 position: fixed;
 right: 0;
 top: 0;
 z-index: 1;
}

Simple Ajax add to cart in magento

list.phtml page in template

<form class="product_addtocart_form" action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
 <?php if(!$_product->isGrouped()): ?>
                         <label for="qty" class="qtylabel" style=""><?php echo $this->__('Qty') ?>:</label>
 <input type="text" class="form-control qtybox" name="qty">
 <?php endif; ?>
 <button type="submit" class="link_cart"><span><i class="fa fa-shopping-cart" style="margin-right: 5px;"></i><?php echo $this->__('Add to Cart') ?></span></button>
 </form>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.product_addtocart_form').submit(function(event){
            event.preventDefault();
            var $this = jQuery(this);
            jQuery($this).parents('li').append('<div class="ajax_loader"></div>');
            url = jQuery(this).attr('action');
            console.log(jQuery(this).serialize());
            url += '&isAjax=1';
            var data = jQuery(this).serialize();
            data += '&isAjax=1';
            jQuery.ajax({
                    url : url,
                    dataType : 'json',
                    type : 'post',
                    data : data,
                    success : function(data) {
                        getcartdata($this);
                    }
                });
            setTimeout(function(){
                //getcartdata($this);
            },1000);
        });
    });






    function getcartdata($this){
        jQuery.ajax( {
            url : "<?php echo Mage::getBaseUrl().'getcitys/index/getcartdetail'; ?>",
            dataType : 'html',
            type : 'get',
            success : function(data) {
                jQuery('.ajax_loader').hide();
                jQuery('.block-cart-header').html(data);
            }
        });
    }
</script>

Make in controllers/IndexController.php

public function getcartdetailAction() {
        $block = $this->getLayout()->createBlock('checkout/cart_sidebar');
        $block->setTemplate('checkout/cart/sidebar_header_ajax.phtml');
        echo $block->toHtml();exit;
 }


view.phtml page in template
 

productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                try {
                    this.form.submit();
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }

                if (button && button != 'undefined') {
                    button.disabled = true;
                }
            }
           
        }.bind(productAddToCartForm);

Replace above code To below code


productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                if(!url){
                    url = jQuery('#product_addtocart_form').attr('action');
                }
                var data = jQuery('#product_addtocart_form').serialize();
                data += '&isAjax=1';
                try {
                    jQuery('.product-shop').prepend('<div class="ajax_loader">&nbsp;</div>');
                    jQuery.ajax({
                          url: url,
                          dataType: 'json',
                          type : 'post',
                          data: data,
                          success: function(data){
                                getcartdata(this);
                          }
                    });
                    setTimeout(function(){
                        getcartdata(this.form);
                    },1000);
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }
            }
        }.bind(productAddToCartForm);

Write Bottom in view page

<script type="text/javascript">
    function getcartdata($this){
        jQuery.ajax( {
            url : "<?php echo Mage::getBaseUrl().'getcitys/index/getcartdetail'; ?>",
            dataType : 'html',
            type : 'get',
            success : function(data) {
                jQuery('.ajax_loader').hide();
                jQuery('.block-cart-header').html(data);
            }
        });
    }
</script>

JQuery serialize() function with $.ajax() post for bigger HTML forms

JQuery provides a very useful function jQuery.serialize() which encodes a set of form elements as a string for submission, and is very useful while we are dealing with huge HTML forms. Basically it will combine your values of form element and then you can post it on any server side scripting page.

For example, suppose you have a very long form with many fields and you want to post it with the help of $.ajax() function, you need to add just few lines of code for jquery from with ajax, no need to add id attribute to any form elements, just have to give id to form itself as follows:

<form name="frm_details" id="frm_details" method="post">
<input type="text" name="name" value="jems">
<input type="submit" name="submit" value="submit">
</form>

The above form will have all the fields like text boxes, text areas, select boxes, radios etc. having only name attribute, just as our usual html form. Now the JQuery code will be as follows:

<script>
 $(function() {
   $("#product_details").on("submit", function(event) {
      event.preventDefault();

      $.ajax({
         url: "somefile.php",
         type: "post",
         data: $(this).serialize(),
         success: function(d) {
           alert(d);
         }
      });
    });
  });
</script>

How to called codeigniter helper function using JQuery AJAX?

You need to make a request via controller, then call that function through that controller, something like:

$("#id").change(function()
{       
 $.ajax({
     type: "POST",
     url: base_url + "controller_name/your_function", 
     data: {val: $("#your_val").val(),currency_id: $("#your_cur").val()},
     dataType: "JSON",  
     cache:false,
     success: 
          function(data){
            $("#your_elem").val(data.price);
      }
});

Then on your controller:

public function yourfunction()
{
   $data = $this->input->post();
   $price = format_price($data['val'],$data['currency_id']);
   echo json_encode(array('price' => $price));
}