AJAX

• AJAX Overview
• AJAX Product

FLEX Documentation

• Introduction
• Code Overview
• Back Office
• Loops
• Global Output Tags
• Files
• AJAX
• Navigation
• Products
• Categories
• Pages
• Pagination
• Forms
• Checkout
• Search

An AJAX product call allows for a dynamic integration with the database about a product.

Below is working code written for jQuery. This will inform the user about inventory changes and dynamic price changes in json data.

$(document).on("change","#add-to-cart .form_input",function()
{
    var vals;
    var set =  "";
    var temp;
    if ($(this).hasClass( "input_radio" ))
    {
   	 vals = $(this).parent().find( "input:radio:checked").val();
    }
    else if ($(this).hasClass( "input_dropdown" ))
    {
   	 vals = $(this).parent().find( "select option:selected").val();
    }
    else
    {
   	 vals = $(this).val();
    }
    
    set += encodeURIComponent($(this).attr("name"))+"="+encodeURIComponent(vals)+"&";
    $.ajax({
   	url: "/ajax/field.ajax",
   	data: "pitem="+$("#add-to-cart").find("#pitem").val()+"&"+set,
   	type: "post",
   	success: function(data)
   	{
   	 //replace html
   	 $.each(data.field, function(i, item) {
   		 if ($(".variation_"+i).hasClass( "input_radio" ))
   		 {
   			 temp = $(".variation_"+i+":radio:checked").val();
   			 $(".variation_"+i).closest("li").find(".fields").html(item);
   			 console.log(temp);
   			 $(".variation_"+i+":radio[value='"+temp+"']").attr('checked',true);
   		 }
   		 else if ($(".variation_"+i).hasClass( "input_dropdown" ))
   		 {
   			 temp = $(".variation_"+i+" option:selected").val();
   			 $(".variation_"+i).closest("li").find(".fields").html(item);
   			 $(".variation_"+i).val(temp);
   		 }
   	 });
   	 priceChange();
   	}
    });
});

function priceChange()
{
    var myData = $('#add-to-cart').serializeArray();
    // remove items from myData
    $.ajax({
   	url: "/ajax/check.ajax",
   	data: $.param(myData), // "inp1=val1&inp2=val2"
   	type: "post",
   	success: function(html)
   	{
   	 if (html.status != "error") {
   		 $("span#prodoprice b").html(html.price);
   		 if (html.available == "false") {
   			 $("#add-cart-button").hide();
   			 $("#system_message").html(html.message);
   		 }
   		 else
   		 {
   			 $("#add-cart-button").show();
   			 $("#system_message").html("");
   		 }
   	 }
   	 else
   	 {
   		 $("#add-cart-button").show();
   		 $("#system_message").html("");
   	 }
   	}
    });
}