34.bootstrap grid

lg-larger desktop
md-desktop
sm-tab
xs-mobile


<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12"></div>
<div class="col-md-4 col-sm-3 col-xs-12"></div>
<div class="col-md-2 col-sm-3 col-xs-12"></div>
<div class="col-md-3 col-sm-3 col-xs-12"></div>
</div>

33.modal popup

<div class="modal fade" id="propertyDeleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <span class="modal-title" id="exampleModalLabel">Confirm</span>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
       <div class="modal-body">

          Do you want to delete this property?    

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary yes_btn yes_delete_property">Grant</button>
      </div>
    </div>
  </div>
</div>

 <script type = "text/javascript">
jQuery("#propertyDeleteModal").modal('show');
</script>

32.jQuery excel

https://codepen.io/kostas-krevatas/pen/mJyBwp

<button id="exl">Download</button>

<div class="admin_table_form" id="content">

  <table class='admin_table'>

  jQuery(document).ready(function() {
  jQuery("#exl").click(function(e) {
    e.preventDefault();
    //getting data from our table
    var data_type = 'data:application/vnd.ms-excel';
    var table_div = document.getElementById('content');
    var table_html = table_div.outerHTML.replace(/ /g, '%20');
    var a = document.createElement('a');
    document.body.appendChild(a);  // You need to add this line to work in mozilla
    a.href = data_type + ', ' +
     table_html;
    a.download = 'exported_table_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls';
    a.click();
  });
});

31.jQuery validation

  <script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-         9]{1,3})(\]?)$/;
        return expr.test(email);
    };

   function ValidateName(name) {
        var expr = /^[a-zA-Z ]{3,35}$/;
        return expr.test(name);
    };

    $("#contact_submit").click(function () {
 var email_id = $.trim($('#email_id').val());
 var name     =$.trim($('#contact_name').val());
 var msg     =$.trim($('#message').val());

    // Check if empty of not
    if (email_id  == '' && name  == '' && msg == '') {
       // alert('Please fill all the fields.');
       $('#contact_name').focus();
       jQuery('#fill').text('Please fill all the fields');
       jQuery('#fill').css('display','block');
        return false;
    }else{
jQuery('#fill').css('display','none');
}


  //name validation
    if (name  == '')
{
$('#contact_name').focus();
jQuery('#name_val').text('Please enter name');
jQuery('#msg_val').css('display','none');
jQuery('#name_val').css('display','block');
return false;
    }
    else if (!ValidateName($("#contact_name").val())) {

   jQuery('#name_val').text('Please enter a vaild name');
jQuery('#name_val').css('display','block');
jQuery('#email_validation').css('display','none');
jQuery('#msg_val').css('display','none');
$(':input').removeAttr('placeholder');
            //alert("Invalid email address.");
            return false;
    }
        else {

jQuery('#name_val').css('display','none');
            //alert("Valid email address.");
    }


//email validation
if (email_id  == '')
{
$('#email_id').focus();
jQuery('#email_val').text('Please enter email address');
jQuery('#email_validation').css('display','block');
return false;
    }
    else if (!ValidateEmail($("#email_id").val())) {

   jQuery('#email_val').text('Please enter vaild email');
jQuery('#email_validation').css('display','block');
jQuery('#msg_val').css('display','none');
$(':input').removeAttr('placeholder');
            //alert("Invalid email address.");
            return false;
    }
        else {

jQuery('#email_validation').css('display','none');
            //alert("Valid email address.");
    }

   //message validation
   if (msg  == '')
{
$('#message').focus();
jQuery('#msg_val').text('Please enter a message');
jQuery('#msg_val').css('display','block');
return false;
    }
    else
    {
jQuery('#msg_val').css('display','none');
}
    });
</script>

30.Jquery pdf

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>

<div id="editor"></div>
<button id="cmd">generate PDF</button>


var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

jQuery('#cmd').click(function () {

    doc.fromHTML(jQuery('#content').text(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
         
    });
    doc.save('sample-file.pdf');
});

29.Page refresh

$('#something').click(function() {
    location.reload();
});

28.show and hide div

jQuery('.hide_bedroom').show();
jQuery('.hide_bedroom').hide();

27.Redirction using jquery

jQuery('body').on('click', '.abc_rect', function(event){

  var tenantId = jQuery(this).data("tenantid"); //alert(tenantId);
  var tenantId = parseInt(jQuery(this).attr('data-tenantId'));
  alert(tenantId);
  location.href= '<?php echo $this->baseUrl()?>/requirement/'+tenantId;

});

26.Jquery mouseover and mouseout

jQuery( ".activity_item_li" ).mouseover(function() {
  var licount = parseInt(jQuery(this).attr('licount'));
  var licount1 = licount - 1;
  jQuery(".activity_item_li_"+licount).css('border-bottom','1px solid #f58410');
  jQuery(".activity_item_li_"+licount1).css('border-bottom','1px solid #f58410');
});

jQuery( ".activity_item_li" ).mouseout(function() {
  var licount = parseInt(jQuery(this).attr('licount'));
  var licount1 = licount - 1;
  jQuery(".activity_item_li_"+licount).css('border-bottom','1px solid #efefef');
  jQuery(".activity_item_li_"+licount1).css('border-bottom','1px solid #efefef');

});

25.Jquery next line

        jQuery('.tip_content').append('<a href="javascript:void(0)"><span class="tooltip_message" style="color: #fff;">&nbsp; <?php echo $tip_content;  ?></span></a><i style="    color: #fff;float: right;'+

        'padding: 3px 18px 2px 2px;"class="fa fa-times-circle-o delete_tipicon" aria-hidden="true"></i>');

24.Click function in jquery html

jquery html added from script -click function shuould be like
 jQuery('body').on('click', '.delete_tipicon', function(e){
});

23.Jquery toggle

jQuery('body').on('click', '.user-profile-info', function(event){

if(jQuery( ".user-profile-info" ).hasClass("collapsed")){

jQuery('#user-profile-submenu').css('display', 'block');
jQuery( ".user-profile-info" ).removeClass("collapsed");
}

else
{
jQuery( ".user-profile-info" ).addClass("collapsed");
jQuery('#user-profile-submenu').css('display', 'none');
}
});

22. Document Ready function in jQuery

jQuery(document).ready(function()  {
});

21 .JAVASCRIPT To JQUERY Conversion

 var uploadSignupPhoto = function() {
      $('thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='application/modules/Core/externals/images/loading.gif'/><?php echo $this->translate('Loading...')?></div>";
      $('EditPhoto').submit();
      $('Filedata-wrapper').innerHTML = "";
    }


     function uploadSignupPhoto(){
      jQuery('#thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='application/modules/Core/externals/images/loading.gif'/><?php echo $this->translate('Loading...')?></div>";
      jQuery('#EditPhoto').submit();
      jQuery('#Filedata-wrapper').innerHTML = "";
    }

20.adding additional icons in jquery (prepend and append)

eg 1.Prepend
jQuery('.quicklinks ul').prepend('<li><a href="/smartmove/renter/create" class="buttonlink menu_user_profile user_profile_edit verified_link" style="background-image: url(application/modules/User/externals/images/verfication_image.png); color: #f58410;" target="">Get Verified</a></li>');
eg 2.Append
jQuery('.layout_user_list_online .ybo_headline').append('<span class="arrow"><img src="application/modules/User/externals/images/next.png"></span>');

19.To prevent other event handlers from executing after a certain event is fired

event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

18.php inside a script

<script>
var viewer_identity='<?php echo $viwer_id; ?>';
</script>

17.jquery css(display none)

jQuery('#msg_val').css('display','none');

16.Appending msg with div

 jQuery('#ynadvmenu_NotifyCount').text('msg');
                         jQuery('#ynadvmenu_NotifyCount').css('display','block');

15.Regex for alphanumeric with at least 1 number and 1 character

/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/

14.Show div in 5 seconds in jQuery

setTimeout(function() {
                            jQuery(".tip").css('display','block');      
              }, 5000)

13.Variable from jquery to php(tpl to controller)

jQuery( ".delete_tipicon" ).click(function() {
var currentdate = new Date();
    var tip_dismiss_time =
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();

 
jQuery(".tip").css('display','none');

    var oData       = new Object();
var dismiss_time    = oData.tip_dismiss_time =tip_dismiss_time;
    alert(dismiss_time);
var formURL    = '<?php echo $this->baseUrl(); ?>' + '/user/index/tipdismisstime';

jQuery.ajax( {
url : formURL,
type: "POST",
dataType: 'json',
data : oData,
success: function (data) {

  alert(data.status);
//location.href = '<?php echo $this->baseUrl(); ?>' + '/members/home';


},
error: function(e){

}
    });
});

/*controller*/

$viewer     = Engine_Api::_()->user()->getViewer();
$this->_helper->viewRenderer->setNoRender(true);
$this->_helper->layout->disableLayout();


$aData = $this->_request->getPost();
$dismiss_time=$aData['tip_dismiss_time'];

12.jquery add attribute(attr)

 jQuery('.dropdown-toggle').attr("aria-expanded","true");

11.jquery removeClass

jQuery( ".custom_225" ).removeClass("menu_core_main");

10.Jquery hasClass

if(jQuery( ".custom_225" ).hasClass("menu_core_main")){
}

9.If data passing through ajax

    var oData           = new Object();
var dismiss_time    = oData.tip_dismiss_time =tip_dismiss_time;
var dismiss_date    = oData.tip_dismiss_date =dismiss_date;
var formURL    = '<?php echo $this->baseUrl(); ?>' + '/user/index/tipdismisstime';

jQuery.ajax( {
url : formURL,
type: "POST",
dataType: 'json',
data : oData,
success: function (data) {

},
error: function(e){

}
    });

8.if no data passing through ajax

var formURL    = '<?php echo $this->baseUrl(); ?>' + '/user/index/gettipdismisstime';

jQuery.ajax( {
url : formURL,
type: "POST",
dataType: 'json',
success: function (data) {

},
error: function(e){
  alert(data);
}
    });

7.jquery current Indian date in dd/mm/yyyy format and time in H:m:s

var d            = new Date();
    var curr_date    = d.getDate();
    var curr_month   = ("0" + (d.getMonth() + 1)).slice(-2);
    var curr_year    = d.getFullYear();
    var current_date =curr_date + ":" + curr_month + ":" + curr_year;
 
    var current_time =  + d.getHours() + ":"  + d.getMinutes() + ":" + d.getSeconds();

6.Jquery click

jQuery( ".reset_to_usa" ).click(function() {
});
jQuery('body').on('click', '.arrow', function(event){
});

5.Deletion from list using laravel and ajax

<a href="javascript:void(0)" id="<?php echo $user['user_id'] ;?>">Delete</a>


<script>
$(document).ready(function(){
    $("a").click(function(){
    var oData       = new Object();
    var user_id= oData.id=this.id;
var base_url = '{{ url("/") }}';
    var url = base_url+"/deleteuser";
 jQuery.ajax({
  headers: {
'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
  },
url:  url,
data: oData,
dataType: 'json',
type: 'POST',
success: function (data) {

if(data.status==true){
jQuery('.user_'+user_id).remove();
}else
{
alert("error");
}

   },
  error: function(e){ // alert('Error: '+e);
   }
});
       });
});
</script>


In controller

  public function deleteuser(Request $request)
   {
  $resultData = array();
 // echo "id";
  $id = $request->input('id');

       try{
       $userobj=new User();
     
       $user_details=$userobj->deleteUser($id);

       $resultData['status'] = true;
     

       }catch (Exception $e) {exit($e->getMessage());
$resultData['status'] = false;
}
      return response()->json($resultData);
   }

4.Link to same page without refreshing or redirecting

href="javascript:void(0)" 

3.Online library for boostrap and js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2.How to include js file in laravel?

<script src="{{ url('/') }}/resources/assets/js/jquery.min.js"></script>