How to upload video using jQuery AJAX.

Upload video file using ajax call, So I have tried with simple ajax call unfortunately I have not getting FILE objects in server side script.

How to send html FILE type object data using ajax on server side script.
I am facing the issues of uploading video file in ajax call, FILE data not getting in server side.

For that reading documents of jquery and plug n play with different scenario then I got final solution and writing demo example of HTML with ajax call for video upload with progress bar.

Please find below HTML for video upload with progress bar:

                        
                        Add Video Message
                    
                

Continue
                

You need to disable progress bar first while on click of continue button it will be display for precessing of video upload. Please refer screenshots



jQuery('#frm_ecard').serializeArray(); using this function get all form data values and added into formdata.

After creating for formdata object initiates ajax request for server side to store video. Formdata used for store key/values of given form.

Below is the jquery ajax call for video upload

Below css I have used for displaying progress bar of processing video upload.

progress {background:#ccc; border: 1px solid #ff5a5f; border-radius: 5px; color: #ff5a5f; font-size: 0.6em; height: 3.8em;line-height: 1.5em;text-indent: 0.5em;}
progress[value]::-webkit-progress-bar {background-color:#ff5a5f;}
progress::-moz-progress-bar { background:#ff5a5f; }
progress::-webkit-progress-value { background:#ff5a5f; }
progress { color:#ff5a5f; }

/* Background Colors  */ 
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ccc !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #ccc !important;
}
/* Foreground Colors   */ 
/* IE10 */
progress {
    color:#ff5a5f;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: #ff5a5f;   
}
/* Chrome */
progress::-webkit-progress-value {
    background:#ff5a5f;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: #ff5a5f;
}

HTML5 Range Slider - onchange v/s oninput events

The behaviour of the input event compared to the change event is not exactly the same in different browsers when applied to a range slider.

A common UI pattern for a range slider is to allow the user to move the slider and display the value of it somewhere on the page, changing the displayed value as the user moves the slider.

I think the expected behaviour in such a case is that the value should display instantly, as the user is moving the slider, rather than the page waiting for the slider to finish moving before the displayed value is updated.

I suppose there could be cases where you prefer a delay over instant results, but I think the expected behaviour is to display the results instantly.

I have share this below code for good experience with onchange event and display value in output tag of html5.
So let us see following code section by section.
1. JavaScript code section

 

var i = document.querySelector('input'),
    o = document.querySelector('output');

o.innerHTML = i.value;

i.addEventListener('change', function () {
  o.innerHTML = i.value;
}, false);

2. Html code section

3. Css code section

 
body {
  padding: 40px;
}

input {
  display: block;
  width: 200px;
  margin: auto;
}

output {
  text-align: center;
  display: block;
  padding-top: 15px;
}

HTML5 Range Slider - Range slider value not changed using keyboard arrow key

A range slider is to allow the user to move the slider using keyboard arrow key up,down..etc and change the value of it somewhere on the page based on key press, changing the displayed value as the user moves the slider using keyboard key.

I think the expected behaviour in such a case is that the value should display while you change the slider using key, as the user is moving the slider using key rather than the page waiting for the slider to finish moving before the displayed value is updated.

I have tried jquery key press event and check key code using JavaScript unfortunately I didn't found the any solution.

I think the expected behaviour is to display the results instantly while you press the key and change the slider.

The behaviour of the input event compared to the change event is not exactly the same when applied to a range slider.

Only solution for this issues is to use onkeydown event using JavaScript and you need to pass this.value in some function so it will take updated value of reange slider.

 
 function updateSlider(slideAmount) {
    var display = document.getElementById("chosen-spacing");
        display.innerHTML = slideAmount;
    }

Add more dynamic repeat block validation using Jquery validate

I already share demo of add more and remove feature of dynamic block of html using jQuery in previous post. Now how to apply validation for all dynamic fields using jQuery validate js

Step 1 : I have used previous blog HTML for jQuery validation of dynamic multiple fields.

You can see in my previous blog post and refer the html (step 1) for same.

Step 3: Add script files of jQuery and jQuery validate js for validation.

Step 2 : I have created  addValidationToSteps() function to validate all repeat fields of recipe preparation steps. Which I called  after page load and add another steps and remove steps.

    $(document).ready(function () {
        $("#totalSteps").val("1");
        addValidationToSteps();  
       });

    $("#addAnotherStep").click(function () {
 //Add repeat block logic 
        addValidationToSteps();
    });

Step 3 : Remove other block except  first block

$(document).on("click", "#removeStep", function () {
        $("#dialog").text('');
        $("#dialog").text('Are you sure to remove this step? This cannot be undone.');
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            width: 400,
            modal: true,
            buttons: {
                "Ok": function () {
                   //add here remove dynamic block logic
  addValidationToSteps();

                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

Step 4 : I want to display each field label as a message (i.e. "Please enter Step Name") instead of this field required default message of jQuery validation. Jquery validate give us rules functionality to add dynamic field html validation as presenting below example.

 
    function addValidationToSteps() {
        $(".recipeSteps input").each(function () {
            var labelMsg = "Please enter " + $(this).attr("placeholder") + ".";
            $(this).rules("add", {required: true, messages: {required: labelMsg}});

        });
        $(".recipeSteps textarea").each(function () {
            var labelMsg = "Please enter " + $(this).attr("placeholder") + ".";
            $(this).rules("add", {required: true, messages: {required: labelMsg}});
        });
        $(".temperature").rules("add", {number: true});
    }

Add More Dynamic Repeat Block using Jquery

Sharing demo of add more and remove feature of dynamic block of html using jQuery

First you need to create HTML which you want to repeat. Please make sure naming of elements should be unique which you are using. I was facing issues of naming which is taking same and block was not properly named. So I thought I will help to others for creating dynamic html add more and remove feature in simple way.

I am presenting demo for preparation steps for recipe. Recipes have multiple steps so this steps need to repeat based on your recipe. I have facing issues of repeat fields counter.

I am repeating preparation steps for recipe using jQuery as below

Step 1 : HTML for repeat preparation steps. I have taken one hidden fields for how many steps want to save database and for which next block name would be. (see in attachment block which I want to repeat)

 



                


Recipe Name: *


                        



Preparation Steps: *




STEP 1 







                                        


                                        




Add another step
                            



 

Step 3 : Add jQuery js and on page loading I have set value of totalSteps value as 1 when I click on add another step it will be increment by 1 and update the value in totalSteps hidden value. (see in attachment after adding repeat block in HTML)

    $(document).ready(function () {
        $("#totalSteps").val("1");
         });

    $("#addAnotherStep").click(function () {
        var addStep = parseInt($("#totalSteps").val()) + 1;
        $("#totalSteps").val(addStep)
        var appendStep = '


STEP ' + addStep;
        appendStep += '



';

        appendStep += '












';
        $("#allSteps").append(appendStep);
        for (var i = 2; i < addStep; i++)
        {
            $("#step_" + i + "_heading").children("#removeStep").remove();
        }
    });

Step 4 : Remove other block except first block

    $(document).on("click", "#removeStep", function () {
        $("#dialog").text('');
        $("#dialog").text('Are you sure to remove this step? This cannot be undone.');
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            width: 400,
            modal: true,
            buttons: {
                "Ok": function () {
                    var removeStep = $("#totalSteps").val();
                    $("#" + removeStep).remove();
                    $("#totalSteps").val(parseInt(removeStep) - 1);
                    var lastStep = $("#totalSteps").val();
                    if (lastStep >= 2)
                    {
                        $("#step_" + lastStep + "_heading").prepend('


');
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

jQuery Chosen plugin - Dynamically populated list by Ajax of multiple selection

Write blog post regarding jQuery Chosen plugin to get multiple selected dropdown values.

Here I am sharing my experience of jQuery Chosen plugin like get multiple selected value from dropdown.

It was little twiky solution for me at moment and their for I had goggling and found good solution so for reason I was thinking like why I should not share to other.

So here I am going to share one of the issue. Which was worked on drop-down populate data using Ajax call but somehow it was not getting multiple values of selected dropdown.

Now time for demo. How to get multiple Category based on category selection Ajax call trigger and show other list of dropdown of jQuery .

Step by step solution:
Step 1 : Add jQuery and chosen jQuery JS file

Step 2 : Call dropdown initialize functions (i.e for Chosen)

Step 3 : HTML for dropdown.you must need to add name as array category[] and add multiple attribute in select element.

 Div of #show_location currently I set as display:none I want to visible state only when selected value of category have product of experience.

                        What are they interested in
                        Sports
   Fashion
   Electronics
   Experiences
   Health &  Beauty
   Home & Garden
   Entertainment
   Babies
   Toys
   Alchohol
   Gift Vouchers
  
            


      Location
    
    VIC
    
    NSW
    
    QLD
    
    WA
    
    SA
    
    TAS
    
    NT
    
    ACT
        
            

Step 4 : Ajax call for get if any product exists for category and show dropdown of state using jQuery show method.

$(document).ready(function(){
 
 jQuery("#category").chosen().change(function(){
 
 categorytext = jQuery(this).find("option:selected").text();   
 categoryval = jQuery(this).find("option:selected").val();   
 
 var options = jQuery("#category option:selected");

 var values = jQuery.map(options, function (option) {
 
  return option.value; //option.text;
 });   
  jQuery.ajax({
    type: "POST",
    url: "home/getexperience",
    data: 'cat_id='+values,
    success: function(data) {
   if(data == 'Experiences'){
    jQuery("#show_location").show();
    }else{
     jQuery("#show_location").hide();
    }
    
   
     },
   error: function(data) {
    jQuery(".f_error").html(data).focus();
   }
  });
    });
 
});

How to auto fill value of drop down when change of other drop down in jQuery select box

jQuery Select box value of drop down not filled/selected in other drop down value. I did R&D for auto fill value drop down based on the other drop down value selection.

I have presenting one demo example for How to change drop down value of shipping country based on billing country while you checked ship to same address.

Step 1 :Create simple HTML drop down for billing and shipping address

                                                Country
                                                AfghanistanAland IslandsAland IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntiguaAntigua and BarbudaArgentinaArmeniaArubaAscension IslandAustraliaAustriaAzerbaijanAzoresBahamasBahrainBaleric IslandsBangladeshBarbadosBarbudaBelarusBelauBelgiumBelizeBeninBermudaBhutan



                                                Country
                                                AfghanistanAland IslandsAland IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntiguaAntigua and BarbudaArgentinaArmeniaArubaAscension IslandAustraliaAustriaAzerbaijanAzoresBahamasBahrainBaleric IslandsBangladeshBarbadosBarbudaBelarusBelauBelgiumBelizeBeninBermudaBhutan



                                

                                    
                                    Ship to same address
                                

Step 2 : jQuey Select box call selectbox() function to the drop down. It will apply custom CSS in particular drop down

$("#bill_country_id").selectbox();
$("#ship_country_id").selectbox();

Step 3 : Change shipping country value based on billing country while you checked ship to same address.

$("#chk_swap_bill_ship").change(function () {
if (this.checked) {
var selectBox = 'bill_country_id_input_'+$("#bill_country_id").val();
$("#ship_country_id_input").val($("#"+selectBox).text());
$("#ship_country_id").children('option').get(0).blur();
$("#ship_country_id").trigger('click');
}
});

1. You need to get text of billing country drop down. It will be store the text in input box which is  applied by jQuery select box code. It would be in your id of dropdown_input  ex.bill_country_id_input

   var selectBox = 'bill_country_id_input_'+$("#bill_country_id").val();
   

2. Now you need to that billing country name in shipping country drown using below code

   $("#ship_country_id_input").val($("#"+selectBox).text());

ship_country_id generating input box for display text in drop down that text box name is in this example as ship_country_id_input using val() function set text of billing country in shipping country dropdown

How to set Facebook app as a Public

App Not Setup: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions
App not set-up for public used - Facebook permissions issues I have faced in my app development.I thought it will be helpful to others so I have written below blogs for set PUBLIC app in Facebook.

I have add one app in developer account in Facebook using below links.

https://developers.facebook.com/

I got API KEY and SECRETE KEY of Facebook to integrate app.

After adding API KEY and SECRETE KEY of Facebook in my code I got logged in Facebook for my app unfortunately having the issues of permissions and its display as development mode. You don't have access on it.

I did number of things to set permissions in Facebook developer account still same issues raise again. Finally I found the solution of Facebook permissions issues for set public app.

 I will shown you how to set permissions for public app as below you will get more idea using attached screenshots.

1. Add email address : Settings tab → Contact Email fields → Add email address → Save.
   

   
   

   Add your contact email address in contact email fields of Settings tab in Facebook If you add your email address in this field then It will be enable option of do you want to make this app and all its live features available to the general public in status and review tab.
   
2. Enable Yes for do you want to make this app and all its live features available to the general public:
   

   Status&Review Tab → Enable Yes → Save in your Facebook development account.
   

jQuery Select box - Ajax response data not populated in drop down

jQuery Select box is very tedious to apply CSS again in the drop down while ajax call. I did R&D for apply CSS and value again in drop down during jQuery Ajax call.

I have presenting one demo example for How to change drop down of state based on country selection.

Step1 :Create simple HTML drop down

Australia
India
United States
United Kingdom

Step2: jQuey Select box call selectbox() function to the drop down. It will apply custom CSS in particular drop down.

$("#country_id").selectbox();
$("#state_id").selectbox();

Change state value based on country selection.I have used ajax call for change state value based on country selection. jQuery select-box provide us onChange event for select value based on selection.You need to tack care for attach and detach method of jQuery select box plugin.
While Ajax call response of Ajax as you need to prepare below.Call your query or prepare data for sate drop down based on your selected country
Ex. ajax.php

$state_str ='';
$state_str.= 'Melbourn';
$state_str.= 'Syndney';
$state_str.= 'Quesland';
$state_str.= 'Victoria';
echo $state_str;

Return above option in Ajax response.
After Ajax response you need to detach drop down of state,It will be remove values and remove drop-down select box CSS and then populate value in that state drop down using val() function.You need to again attach select box in that drop down. So select box jQuery CSS will be apply in Ajax call again.

$("#country_id").selectbox({
 onOpen: function (inst) {
  //console.log("open", inst);
 },
 onClose: function (inst) {
  //console.log("close", inst);
 },
 onChange: function (val, inst) {
  $.ajax({
   type: "GET",
   data: {country_id: val},
   url: "ajax.php",
   success: function (data) {
    $("#state_id").selectbox('detach');
    $("#state_id").val(value);
    $("#state_id").selectbox('attach');

   }
  });
 },
 effect: "slide"
});

Demo Link of jQuery Selectbox https://code.google.com/p/select-box/

How to extend the limitation of session->userdata value in codeignator

I have faced the issues of session user data in codeignator. It consider default storing text value limit as 8000 to 9000 characters.

I was working with array of session where array of session will not store more then 8,9 values in session.

I did number of R&D for extend the storing value in session and also tried with destroying the user session unfortunately I will not success then I get one solution as below.

I checked config file where I got one option as   $config['sess_use_database'] = FALSE

Once enabled, the Session class will store session data in the DB.

$config['sess_use_database'] = TRUE

Note: By default the table is called ci_sessions, but you can name it anything you want as long as you update the application/config/config.php file so that it contains the name you have chosen. Once you have created your database table you can enable the database option in your config.php file as follows:

Make sure you've specified the table name in your config file as well:
$config['sess_table_name'] = 'ci_sessions';

CREATE TABLE IF NOT EXISTS  `ci_sessions` (
 session_id varchar(40) DEFAULT '0' NOT NULL,
 ip_address varchar(45) DEFAULT '0' NOT NULL,
 user_agent varchar(120) NOT NULL,
 last_activity int(10) unsigned DEFAULT 0 NOT NULL,
 user_data text NOT NULL,
 PRIMARY KEY (session_id),
 KEY `last_activity_idx` (`last_activity`)
);

Note: The Session class has built-in garbage collection which clears out expired sessions so you do not need to write your own routine to do it.

Its some tricky solution and help to someone.