<h4>Select Date Range With Options</h4>

            <div class="well" style="overflow: auto">

               <div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                  <i class="glyphicon glyphicon-calendar icon-calendar icon-large"></i>
                  <span></span> <b class="caret"></b>
               </div>

               <script type="text/javascript">
               $(document).ready(function() {
                  $('#reportrange').daterangepicker(
                     {
                        startDate: moment().subtract('days', 29),
                        endDate: moment(),
                        minDate: '01/01/2012',
                        maxDate: '12/31/2014',
                        dateLimit: { days: 60 },
                        showDropdowns: true,
                        showWeekNumbers: true,
                        timePicker: false,
                        timePickerIncrement: 1,
                        timePicker12Hour: true,
                        ranges: {
                           'Today': [moment(), moment()],
                           'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                           'Last 7 Days': [moment().subtract('days', 6), moment()],
                           'Last 30 Days': [moment().subtract('days', 29), moment()],
                           'This Month': [moment().startOf('month'), moment().endOf('month')],
                           'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                        },
                        opens: 'left',
                        buttonClasses: ['btn btn-default'],
                        applyClass: 'btn-small btn-primary',
                        cancelClass: 'btn-small',
                        format: 'MM/DD/YYYY',
                        separator: ' to ',
                        locale: {
                            applyLabel: 'Submit',
                            fromLabel: 'From',
                            toLabel: 'To',
                            customRangeLabel: 'Custom Range',
                            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
                            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                            firstDay: 1
                        }
                     },
                     function(start, end) {
                      console.log("Callback has been called!");
                      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                     }
                  );
                  //Set the initial state of the picker label
                  $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
               });
               </script>

            </div>

Firstly you have to create to hidden input fields as shown below :

<input type="hidden" name="to" id="to" value="">
<input type="hidden" name="from" id="from" value="">

Secondly you have to update the  function (start, end) highlighted above to the function as shown below :

function(start, end) {
                      console.log("Callback has been called!");
                      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
       $('#to').val(start.format('MMMM D, YYYY'));
       $('#from').val(end.format('MMMM D, YYYY'));
                     }

Hope you like this post……..Please Comment…………!!!!!!!!!

 $.ajax({  
 type: "POST",
 url: "post1.php",
 data: // YOUR DATA TO SEND 
 }).done(function( data ) {

 parsed_data = jQuery.parseJSON(data);
 alert(parsed_data.response1);
 alert(parsed_data.response2);    
});

AJAX USAGE 2 :

 $.ajax({  
 type: "POST",
 url: "post1.php",
 dataType: "json",
 data: // YOUR DATA TO SEND
 }).done(function( data ) {
    
 alert(data.response1);
 alert(data.response2);    
});

Hope you like this post……..Please Comment…………!!!!!!!!!

DROPDOWN MENU DEMO VIEW :

DROPDOWN MENU CODE BEGINS :

<html>
<head>
 <title>Simple Dropdown</title>
 <script src="http://code.jquery.com/jquery.js"></script>
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

<body>
<div style="width:50%; height:30%; border:2px solid #DDDDDD; margin-left:20px; margin-top:20px;">
 <h1>&nbsp;Simple Dropdown Tutorial</h1>
 
<div class="bs-example" style="margin-left:10px;">
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" id="drop4">Dropdown <b class="caret"></b></a>
          <ul aria-labelledby="drop4" role="menu" class="dropdown-menu" id="menu1">
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Action</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Another action</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Something else here</a></li>
            <li class="divider" role="presentation"></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" id="drop5">Dropdown 2 <b class="caret"></b></a>
          <ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu2">
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Action</a></li>
            <li class="divider" role="presentation"></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" role="button" id="drop6">Dropdown 3 <b class="caret"></b></a>
          <ul aria-labelledby="drop6" role="menu" class="dropdown-menu" id="menu3">
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 1</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 2</a></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 3</a></li>
            <li class="divider" role="presentation"></li>
            <li role="presentation"><a href="https://twitter.com/Mycodesstock" tabindex="-1" role="menuitem">Menu Item 4</a></li>
          </ul>
        </li>
      </ul> <!-- /tabs -->
    </div>
</div>

</body>
</html>

Hope you like this post……..Please Comment…………!!!!!!!!!

CODE BEGINS :

<html>
<head>
<title>Modal</title>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

<body>
<h1> Welcome to Modal/ Dialogue open Tutorial<h2>
<!-- Button to trigger modal/dialogue -->
  &nbsp;<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Open Modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
         This is you Modal Body.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</body>
</html>


Hope you like this post……..Please Comment…………!!!!!!!!!

CODE BEGINS :

Hiiii, those who uses wordpress for web developent must be knowing this and those who are new to wordpress. to them I want to tell tell that you can't just use our javascript code in wordpress same as we use in core PHP.
In wordpress all the '$' in jQuery code must me replaced with 'jQuery' and you don't have to include "jQuery js" beacause wordpress itself provides a support for jQuery.
In wordpress , you can't use the javascript code written by you anywhere in rest of your code rather after writing your code anywhere in you website, you have to send that javascript code to wordpress site 'header'.
To perform this function of sending and including a custom javascript code in wordpress , a function namely- wp enqueue script is used. So. in this post I wiil telling how to use wp enqueue script function to make your javascript code work in wordpress.

CODE BEGINS :

Here's the code :

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#saveattribute').click(function(){

//you custom code but here I am sending values to next page
jQuery.ajax({
type: "POST",
url: "abcd.php",
data: $('#attribute_save').serialize()
}).done(function( msg ) {
//alert(msg);
//your code on success
});
})
})
</script>
</head>
<body>
<form id="attribute_save">
<table>
<tr>
<td>Select Style:
<select name="style_att" id="Attr">
<option value="">Select..</option>
<option value="23">men</option>
<option value="53">ringer-t</option>
<option value="52">t-shirt</option>
</select>
</td>
<td><input type="button" id="saveattribute"  value="Save"/></td>
</tr>
</table>
</form>
</body>
</html>

Hope you like this post……..Please Comment…………!!!!!!!!!

CODE BEGINS :

So here is the simple and short JQuery code to do so:

Hiiii, all of you know that image sliders and some image effects makes the look of a site so attractive. So, Here is the code example to show how to slide images through JQuery. The tutorial shown is full customizable and you can set the images to view at once according to your convenience . In this tutorial I have shown just 5 sliding images .

CLICK HERE.

You will also be requiring some images to run this tutorial …so demo images are below and you van download it from here
 
 

CLICK HERE

Creating a Checkbox HTML :

<table id=”table_name”>
<thead>
<tr>
<th><input type=’checkbox’ id=”check_all”></th>
</tr>
</thead>
<tbody>
<tr> <td><input type=”checkbox” name=”ids[]” value=”some id like 1,2,etc”></td> </tr>
</tbody>
</table>

Javascript code to select all checkboxes :

$( document ).on(“click”, “#check_all”,function() {
var checkedStatus = this.checked;
$(‘#table_name tbody tr’).find(‘td:first :checkbox’).each(function () {
$(this).prop(‘checked’, checkedStatus);
});
});

Getting array of ids of checkboxes selected :

$( document ).on(“click”, “#button_id”,function() {
var ids_arr = [];
$(“[name='ids[]‘]:checked”).each(function() {
ids_arr.push(this.value);
});
});
This ids_arr array you are getting is the array of ids checked/ selected. You have to pass this array to the next page through ajax where function or database queries to do with the selected ids is written.

To see How to send data on next page or same page through Ajax , CLICK HERE

 

Hiiii, JQuery itself comes with a tagline that "Write less, Do more". So this tutorial is all about JQuery and ajax data sending and receiving  and it also explains that sometimes we receive an array in ajax response which is bot encoded than how to split that array and use the values in that array .



So Here's the code for this tutorial :

To split a array use :

var array_data=data.split(” “);   //enter the character or space in (“”) around which you wanna split your aaray .

To access that data  use :

jQuery.each(array_data, function(index, value) {
alert(index + ‘: ‘ + value);
});

Complete example for reference :

jQuery(function(){
jQuery(“#comment_form”).show();
//jQuery(“#comment_submitted”).hide();
jQuery(“#do_comment”).submit(function(){
var senddata=$(“#do_comment”).serialize();
//alert(senddata);
jQuery.ajax({
url: urlll,
data:senddata,
type:’POST’,
success: function(data){
//    var response = jQuery.parseJSON(data);
var temp=0;
var array_data=data.split(” “);
//alert(array_data);
jQuery.each(array_data, function(index, value) {
if(value==”[http_code]“){
temp=index+2;
}
if(value==202 && temp==index){
//alert(index);
jQuery(“#comment_submitted”).html(“Comment Submitted”);
}
if(value==403 && temp==index){
jQuery(“#comment_submitted”).html(“Comment Already Posted”);
}
//alert(index + ‘: ‘ + value);
});
//alert(array_data.get(0));
jQuery(“#comment_form”).hide();
jQuery(“#comment_submitted”).show();
var cdata=data;
var array_data=cdata.split(” “);
}
});
return false;
})
});