How to Integrate Jquery toastr plugin

In this post, I would like to show how to integrate jquery toastr plugin within your web page. Toastr is a jquery plugin. By using toastr notification you are able to show messages with several notification like Success,Error,Info and Warning.

The main features of jquery toastr are:-

  1. It can be placed anywhere into your web page.
  2. Four built in toastr messages types which is Success,Warning,Info and error.

In this tutorial  i am using CDN link of jquery toastr. You can also download library and include it.  Please find below the sample of code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Toastr Notification Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet" type="text/css" />

</head>
<body>
<h3>JQuery Toastr Notification Example(click any button)</h3>
<input type="button" value="Success" id="success" style="background-color: #70f160; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Error" id="error" style="background-color: #af5959; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Info" id="info" style="background-color: #5eb5ad; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>
<input type="button" value="Warning" id="warning" style="background-color: #f7e652; width:150px; height:60px;font-size: 20px;font-weight: bold;"/>

<script>
$(function () {
$('#error').click(function () {
toastr.error("Error Message", "Title", { /* title is optional*/
timeOut: 1000,
extendedTImeout: 0,
showMethod: 'fadeIn', /*fadeIn, slideDown and show*/
showDuration: 300, /* in milisecond */
showEasing: 'swing', /*swing, linear*/
hideMethod: 'fadeOut', /* hide, fadout, slideUp */
hideDuration: 1000,
hideEasing: 'swing',/*swing, lineary*/
closeEasing: false,
progressBar: false,
positionClass: 'toast-top-right',
titleClass: 'toast-title',
})
});
$('#info').click(function () {

toastr.info("Info Message", "Title");
});
$('#warning').click(function () {
toastr.warning("Warning Message", "Title");
});
$('#success').click(function () {
toastr.success("Successs Message", "Title");
});
});
</script>

</body>
</html>

After running above code you will see the interface as showing below.

Jquery Toastr
Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – let us know. We’d love to help!

How to Validate Form Inputs using Jquery Validation Plugin

Here we will see how jquery validation plugin validate your form. Jquery validation is a client side validation, which performs through browser. It makes easy to validate your form inputs, without reload the page.

Let see how to implement this. In this example I am using CDN link of jquery validation. Please find below the code.

<html>
<head>
<title>Jquery Validation Example</title>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;
border-collapse: collapse;
}
.error{
    color:red;
  font-size: 11px;
}
</style>
<h3>Jquery Validation Example</h3>
<formid="myform">
<tablealign="center"cellpadding = "5">
<tr>
<td>Name</td>
<td><inputtype="text"size="40px"name="name"/></td>
</tr>
<tr>
<td>Email</td>
<td><inputtype="text"size="40px"name="email"/></td>
</tr>
<tr>
<td>Mobile</td>
<td><inputtype="text"size="40px"name="mobile" /></td>
</tr>
<tr>
<td>Adress</td>
<td><inputtype="text"size="40px"name="address"maxlength="100"/></td>
</tr>
<tr>
<td>File</td>
<td><inputtype="file"name="employeefile" /></td>
</tr>
<tr>
<tdcolspan="5"align="center">
<inputtype="submit"value="Register"/></td>
</tr>
</table>
</form>
<script>
$(document).ready(function () {
/* Email address validation */
jQuery.validator.addMethod("emp_email_valid", function(value, element) {
         return this.optional( element ) || /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
        }, 'Please enter a valid email address.');
    /* Mobile number validation */
    jQuery.validator.addMethod("mobile_number", function(value, element) {
         return this.optional( element ) || /^[0-9]{10}$/.test( value );
        }, 'Please enter a valid mobile number.');
/* File validation */
jQuery.validator.addMethod("extension", function (value, element, param) {
param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
returnthis.optional(element) || value.match(new RegExp(".("+ param +")$", "i"));
}, "Please upload pdf or doc files.");
$('#myform').validate({ // initialize the plugin
rules: {
name: {
required: true,
},
email: {
required: true,
emp_email_valid: true
},
mobile: {
required: true,
mobile_number : true
},
address: {
required: true,
},
employeefile: {
required: true,
extension: "pdf|doc"
}
}
});
});
</script>
</body>
</html>
Jquery validation
Note: Client side validation should only be used to improve user experience, never for security because the javascript performs only in the browser and the browser is runs on the user’s machine.It can be fully controlled by the user.

How to use jquery Data Table with Codeigniter

Jquery Datatable
Jquery Datatable

In this post, I will show how to integrate jquery datatable plugin. DataTables is a table enhancing plug-in to add sorting, pagination and filteration to plain HTML tables with a very less effort. Jquery datatables also support print, pdf export, csv export and other button tools.Jquery also support responsive features to grow and shrink dynamically as page resized or for different screen. Let see with an example.

1.Download jquery datatable plugin. After downloading put all folders and files in a separate directory called assets which contains all your js and css files of jquery datatable plugin.We will link all required js/css files using base_url. Here is directory structure.

2. Next create a view called user_list.php inside application/views directory where we gonna use jquery datatable.To show data Here we will get all users list and will show in table.

<html>
<head>
<title>User Report</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap4.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.bootstrap4.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.dataTables.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.dataTables.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.foundation.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.foundation.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.jqueryui.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.jqueryui.min.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.semanticui.css'); ?>" rel="stylesheet">
<link href="<?php echo base_url('assests/buttons/css/buttons.semanticui.min.css'); ?>" rel="stylesheet">
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;

}
</style>
<h3>Users Report</h3>
<table id="table" align="center" cellpadding = "5" border="2" class="table table-striped display nowrap table-bordered" cellspacing="0" width="100%" style="position:relative; top:7px;">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?phpforeach($users as $row) { ?>
<tr>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->mobile; ?></td>
<td><?php echo $row->address; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#table').DataTable({
"ordering": false,
dom: 'lBfrtip',
buttons:[
'copy','pdf','print','csv'
],
});
});
</script>
<scriptsrc="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/dataTables.buttons.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/dataTables.buttons.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.flash.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.flash.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.html5.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.html5.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap4.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.bootstrap4.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.colVis.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.colVis.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.foundation.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.foundation.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.jqueryui.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.jqueryui.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.print.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.print.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.semanticui.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/buttons.semanticui.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/pdfmake.min.js')?>"></script>
<scriptsrc="<?php echo base_url('assests/buttons/js/vfs_fonts.js')?>"></script>
</body>
</html>

Thank you for reading this post. we hope you like this Post, Please feel free to comment below, your suggestion. if you face any issue with this code let us know. We’d love to help!