Posts

Showing posts with the label jQuery

jQuery Validator with Loding GIF

Image
I had to add Loding GIF   form submmit but it was not trigger at the exact event due to form validations. However as fallows it can be achieved easy .I use jQuery form validator (not HTML 5) . CSS div#spinner {     display: none;     width:160px;     height: 160px;     position: fixed;     top: 50%;     left: 50%;     background:url(../images/page-loader.gif) no-repeat center ;     text-align:center;     padding:10px;     font:normal 16px Tahoma, Geneva, sans-serif;     margin-left: -50px;     margin-top: -50px;     z-index:2;     overflow: auto; } HTML  <div id="spinner"></div> JS $(document).ready(function() {    $("form[name='registerRefer']").validate({     rules: {        name: {            required: true,        } },                                  submitHandler: function (form) {                                   $("div#spinner").fadeIn("fast");                            

jQery Serialize Form Explicitly

Image
                                                In order to pass the HTML controls without using submit button. HTML  <div class="col-md-12"><button type="button" id="reject" class="form-control  btn-info " onclick="reject()" >Reject</button></div>                       js                                function reject() {                                                var fromdata=$('#detailform');                                           var data = $(fromdata).serialize();  $.post("./index.php?controller=project&action=reject", data, function (o) { } PHP get control values back

jQuery Ajaz to check if returned data object is empty

Image
In one of my jQuery Ajax Request ,I need to check wehter quary  return  empty results. $ . post ( "php/socialbookmark-post.php" , { bookmarkID : $ ( this ). val ()}, function ( data ) { if ( data != "" ) alert ( data ); });   data !== 'undefined' && data !== '' not worked Properly and Stack OverFlow also not given good answer. I observed, If empty data set  returned , the full block will not executed. http://stackoverflow.com/questions/2589558/jquery-to-check-if-returned-data-object-is-empty But refffering to jQuery I able to come up with solid answer. http://api.jquery.com/jQuery.ajax/ By defult we inherit the sucess method (done ) and if empty data set returned it will go (fail).     $.post("./testURL" function (o) {                                       //alert(o.length);                                          if (o.ERROR == null) {                    

Excel PDF CSV Export for jQuery Datatable

Image
The Jquery Data-table has PDF ,CSV ,Excel support which  reduce lot of cording by integrating other open source libraries .  https://datatables.net/extensions/buttons/examples/initialisation/export.html Here I have indicated step by step guide for the integration . Step 1 . JS Imports  dataTables.buttons.min.js  //Provided in \DataTables-1.10.13\extensions\Buttons buttons.flash.min.js            //Provided in \DataTables-1.10.13\extensions\Buttons buttons.html5.min.js          //Provided in \DataTables-1.10.13\extensions\Buttons buttons.print.min.js           //Provided in \DataTables-1.10.13\extensions\Buttons jszip.min.js                       //Please download from http://stuk.github.io/jszip/ pdfmake.min.js                //Please Download from https://github.com/bpampuch/pdfmake vfs_fonts.js                     //Please Download from https://github.com/bpampuch/pdfmake CSS imports  buttons.dataTables.min.css          //Provided in \DataTables-1.10.13\exten

DataTables warning: table id=table - Cannot reinitialise DataTable. For more information about this error,

I have gone trough following error number of time when I'm using Jquery Data table. DataTables warning: table id=table - Cannot reinitialise DataTable. For more information about this error,  I have a combo box in the page which lead re bind the Jquary Datatable ,while  table is already bind with data. Flowing solutions are possible to resolve the issue. Destroy the table before re bind it . $("#table").dataTable().fnDestroy();  If condition                                    if ( $.fn.dataTable.isDataTable('#table') ) { table = $('#table').DataTable(); } else { table = $('#table').DataTable( { } );

jQuery Datatable with the ajax Json String

Image
You  can integrate  jQuery Datatable with the ajax source in following way. Download Realse Packages  https://datatables.net/download/ Import JS and CSS <script src="public/js/jquery.dataTables.min.js" type="text/javascript"></script>  <link href="public/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/> HTML    <div class="col-md-12 table-responsive">                        <!-- <table id="table" class="table  table-bordered table-striped ">-->    <table id="table" class="table table-striped table-hover dt-responsive display nowrap" width="100%" cellspacing="0" >                             <thead>                                 <tr>                                                   <th> Id</th>                                             <th>Na

JQuery Time Picker

Image
This is a good Easy Time  picker Given By  http://timepicker.co/# Interrogate With your Page :  Need To Download Following Files : https://github.com/wvega/timepicker/releases   https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js Header Section :   Load two Files  <script src="public/js/jquery.timepicker.min.js" type="text/javascript"></script>  <link href="public/css/jquery.timepicker.min.css" rel="stylesheet" type="text/css"/> Page  : HTML:  <div class="col-md-2 col-sm-6 col-xs-8" >                            <div class='input-group date' id='divtimeFrom' value="" >                                     <input type='text' class="form-control" id="timeFrom" name="

Send Objects within Object using Json -ASP.net (Sub Objects)

The Client server communication based on Well formed JSON string is an effective method to improve the responsiveness within server and browser communication.The rich client with jQury and JavaScript I have used need to generated in the page load which contain the objects (sub objects)  within object (parent objects). Here I have used the Web service class Within visual Studio to define object structure as a class  . Web service definition  namespace testdefultlogin.webservices {     [WebService(Namespace = "http://tempuri.org/")]     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]     [System.ComponentModel.ToolboxItem(false)]     // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.      [System.Web.Script.Services.ScriptService]     public class clientService : System.Web.Services.WebService     {   SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[<connection_name>&q

Display hidden div in ASP.net page as a modal Dialog

In this approach you can load a content form the database (dynamic content) at the initial . page load to the div which going to display as a dialog  box when reqired .When it is not nessory to show you can hide it using CSS ( display :none). When the popup modal dialog is open ,the  content can be make visible by CSS In the below example I have generated a HTML table from code behind at the page load to the pop up div and display as a modal dialog.I have added dynamic feature (column filter) using jQuery. Using this approach you can avoid the performance delay of using separate .aspx page with i frame to load a dynamic content. aspx page ,,,div            <div  id="projectCreateDiv" style="width:500px ; display :none "  >                            <asp:Table ID="testTable" runat="server"  ClientIDMode="Static" >                            <asp:TableHeaderRow TableSection="TableHeader" >     

ASP.net with tinymce editor - ReferenceError: tinyMCE is not defined

In the context of ASP.net C#   tinyMCE can be bind to server side  text areas .However you have to use suitable request validation method considering the security level expected      <asp:TextBox ID="textArea" ClientIDMode="Static" name="elm1" class="elm1" runat="server"                      TextMode = "MultiLine" TabIndex="4" ></asp:TextBox> In that context you can use class name of the text are and bind editor for all the text areas within same page using following parameters.Mode define the specific text areas to be selected and editor selctor select them from the class name. < script type = "text/javascript" >      tinyMCE.init({          mode: "specific_textareas",          editor_selector: " elm1",  However if you want to use tinyMCE  for specific text ares as well as doing some client side functions in jQuery or JavaScript you have to use ID