Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Sunday, 24 September 2017

Execute JavaScript code after ajax request from the update Panel

Suppose you have an update panel on the Page and you want to execute some java script code after the AJAX request is complete. i.e. After execution of the function => WebForm_DoPostBackWithOptions(

You can achieve this by below code.

//Write this outside -> $(document).ready();


var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
   alert("Your code here!!");
});

Note: There can be some other ways to do this. But this one is compatible to Internet Explorer 8 too.
Posted by on No comments:
Labels:

Write your first jQuery plugin

Below jQuery plugin will help you check, if the DOM element has an attribute ?
It is very basic and straight.


//---------------------------------------
//      calling the plugin
//---------------------------------------

    $(document).ready(function () {
         if ($("input[value='xyz']").hasAttr('checked')) {
            //Do Your Stuff
         }
      } 
//--------------------------------------
//       jQuery plugin
//---------------------------------------

   (function($) {
       $.fn.hasAttr = function(attrName) {
            if($(this).attr(attrName) == undefined) return false;
            else return true;
        }
    }(jQuery));
//---------------------------------------

Understanding this - I will no  go into too much details. I'll just help you start.

1.  This is not compulsory to write. It just helps you use "$" for jQuery and not conflict with other      frameworks.
    (function($) {    }(jQuery));

2. This is the plugin code. It's very straight forward. You have passed an attribute and $.fn.YourName => give a name to your plugin,
  $.fn.hasAttr = function(attrName) {
      //your code
  }

Some more important concepts :-

a. Chaining-  In jQuery we can apply multiple functions giving "," and just appending it.

    Example -  $('#tableid').addClass("abc").attr(id);
    This code will add class to the table html element and then give you id attribute.

    Now, consider this plugin code

     $.fn.addMyClass = function (className){

           $(this).addClass(className);
                //the important part
                 return this; //this returns the handle of the table - for further action.
                //hence chaining can be performed after you plugin is called.
            }
      }

      $('#tableId').addMyClass("abc").attr("id");  //this will do the same thing

b. Default options to the plugin

      $('#tableId').addMyClass({
          ClassName: 'cde'
      });
      //cde will over write the abc class. But if not provided, abc will      be set as class

     $,fn.addMyClass = function (option){
            
             var settings = $.extend({
                  ClassName: 'abc' //default value if nothing is passed.
              }, options);

             $(this).addClass(settings.ClassName); //adding the passed class name
                 return this; //helps chaining
              }
       }
Posted by on No comments:
Labels:

jQuery Filter vs Find

Filter and Find both are nearly similar but there is one difference.


Filter: Looks though the elements at all levels(based on the selector we give), whether it's a child of    some other element or it is itself a parent.

Find: This looks only at the child level.

Example: This will help you understand the difference. And you will realize, how important both are in their own way.

1. Find: This will only select the <div id="Fruits"> inside the <div id="Category">.
$('div').find('#Fruits')
2. Filter: Whereas this will select 2 divs => a) <div id="Fruits"> which is first parent div. b) The <div id="Fruits"> inside the Category div.
    $('div').filter('#Fruits')

HTML :-
<html><body>

<div id="Fruits">
 Fruits
 <div id="Apple">Apple</div>
 <div id="Banana">Banana</div>
</div>

<div id="Category">
 Category
 <div id="Fruits">Fruits</div>
 <div id="Animals">Animals</div>
</div> </body></html>
Posted by on No comments:
Labels:

Pager on Html Table - jQuery Plugin

Hello,

Recently in a project, I needed to put pager on a html table. Now this table was a simple html table populated by jQuery, hence I couldn't use any server control. I searched the internet for available plugins, but they gave so much more :D. My requirement was a simple pager for my html table. So, i developed it. Hopefully, it will be useful to you all.

 #Note: Working model is attached at below link.

Link to download =>  Pager on Html Table - jQuery Plugin

Point to Note (before you use it) :   You should have reference to jQuery on the page. As the code uses jQuery 
1. The html of the table should have a <tbody> tag for my plugin to work directly. This I have kept because that's the standard way.However, you can change the code. *I have explained in below steps [A1]

HTML
<table id="dtExpriments"> 
     <thead><tr><td></td></thead> 
     <tbody><tr><td></td></tbody> 
</table>

2. Html for the Pager :
    Just below the table (or any where you want on the page) put the pager html as below.

HTML
<div id="navContainer"> 
      <ul class="pagination nav navbar-right" id="footerPagination"></ul> 
      <span id="prevFirstLink" style="display: none;"></span> 
      <span id="prevLastLink" style="display: none;"></span> 
</div>

3. Calling the pager :
     #Note - You can call it simply on load or improvise it as per your requirement.
     In my case, I have called it on the click of a button after the table is populated. (see attachment)

JavaScript
$(document).ready(function(){ 
 
     //apply pager plugin on the html Table 
     $('#dtExpriments').applyPager({ 
        ItemsPerPage: 6, 
        MAXPAGES: 5, 
        ContainerDivId: 'navContainer', 
        SpanPrevFirstId: 'prevFirstLink', 
        SpanPrevLastId: 'prevLastLink' 
     }); 
});

//** Appendix **/
A1 :
    If you table doesn't have <tbody> and <thead> i.e. it's simple html table with <tr> only.
    find code like this => $('#' + tableId + ' tbody tr
    in the js file (jQuery_html_table_Pager_plugin_v1.0.js) remove 'tbody' from everywhere.
Posted by on No comments:
Labels:
Subscribe to: Posts (Atom)