How to call a function before leaving page - Jquery beforeonunload

Hi guys, Shraing Code Snippet for Calling a function before leaving page. It may be required for variety of purposes. you can use it to track statistics for user's leaving from a website page to record that page for bounce pages statistics from where user is leaving website mostly. this is just a simple example you can use it for variety of way.

you can share in comments for which purpose you may require this type of code functionality.

**Jquery Code Example -**

    $(window).bind('beforeunload', function(){
      Func_ToInsert_Record();
      Alert('Thanks And Bye!');
    });

**Javascript Code Example -**


    // Anonymous function
    window.onbeforeunload = function(event) {
      var message = '';
      if (window.event) {
        console.log(window.event);
        console.log(event.currentTarget.performance);
        console.log(event.currentTarget.performance.navigation);
        console.log(event.currentTarget.performance.navigation.type);
       
      }
     
      event = event || window.event;
      event.preventDefault = true;
      event.cancelBubble = true;
      event.returnValue = message;
    }

Javascript Event Propagation vs Event PreventDefault

Event Propagation vs Event PreventDefault

Event Propagation

Event Propagation Stops the Event from bubbling or making the event Chain . 

Example : -  A Click Event on a <td> tag will also fire click event on it's parent <tr> and this event chain also continues to parent <table> tag of that <tr> this makes a event chain in order to stop this event Chain propagation we can Use StopPropagation that Prevents this from happening.

StopPropagation ( ) will stop that event from happening on parent (the entire ancestors). When We Use StopPropagation only < td > Event will fire as per our Example above its parent < tr > or            < table > Click event will not fire .

StopPropagation ( ) Tells downward propagation of the event is stopped and also its upward propagation

Event PreventDefault

Event PreventDefault () Prevents the Default Browser Action In Response the Event Triggered . The preventDefault method prevents an event from carrying out its default functionality

Example : If we want to Stop Form Submit on click of Submit Button in form we can use PreventDefault to stop the default form submit behaviour of submit button in form .

As its name tells it just prevent occurence of the default behavior of event like if you need to prevent the click to occur on click event or stop entering of symbols in textbox if its character then make a check it entered character is symbol on keypress press and execute preventdefault ( ) to prevent default behavior of execution of  event on keypress and nothing will enter in textbox if its symbol .

CODE EXAMPLE For StopPropagation

<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
event.stopPropagation();
$('a').text('Click event is going to be executed');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

CODE EXPLANATION For StopPropagation

If you execute the code above, the function executeParent() will not be called and you will not get the javascript alert this time. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event is going to be executed‘ and immediately you will be redirected to google.com. This is because we haven’t prevented the default click action from triggering this time using event.preventDefault() method.

CODE EXAMPLE For PreventDefault

<div onclick='executeParent()'>
<a href='http://google.com'>Click here to visit google.com</a>
</div>
<script>
$('a').click(function(event) {
event.preventDefault();
event.stopPropagation();
$('a').text('Click event prevented');
$('a').contents().unwrap();
});
function executeParent() {
alert('here');
}
</script>

CODE EXPLANTION For PreventDefauls

If you execute the code above, the function executeParent() will not be called and you will not get the javascript alert. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit google.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to google.com. This is because we have prevented the default click action from triggering this time using event.preventDefault() method.

Angularjs Vs Jquery

Answer Angularjs Vs Jquery On Quora 
Angularjs Vs Jquery

jQuery will be used for things like higher level APIs, updating DOM elements, adding classes and wrapping XHR calls up nicely. Angular 1.x actually uses jQuery lite (jQLite) inside itself, or can use the full jQuery library if it's present before Angular at runtime. Using jQuery with Angular will unleash more power to Angular core as it knows you're using it, so it binds onto jQuery and passes you the full jQuery API instead of it's built-in jQLite.Remember that Angular is a data-binding MVVM framework, of which jQuery is not.

See The Major Benefits in Angular JS as Compared To Jquery

Below is Table List of Difference between jquery and Angularjs . See the Point search what that point means then analyze do you need the power or usage of that point in the project . On the basis of that Analyze Which one of them you need in your project

Difference between on and bind in jQuery

The .bind() method registers the event and event handler directly to the DOM element.This method is still very handy when wiring-up event handlers, but there are various performance concerns as are listed below.
Internally .bind() maps to .on() as per current version of Jquery .bind may be removed from future versions at any time. There is no reason to keep using .bind and every reason to prefer .on instead.
The .bind() method will attach the event handler to all of the anchors that are matched! That is not good. Not only is that expensive to implicitly iterate over all of those items to attach an event handler, but it is also wasteful since it is the same event handler over and over again.

Problems

1. The method attaches the same event handler to every matched element in the selection.
2. It doesn’t work for elements added dynamically that matches the same selector.
3. There are performance concerns when dealing with a large selection.
4. The attachment is done upfront which can have performance issues on page load.

The on() method as being “overloaded” with different signatures, which in turn changes how the event binding is wired-up. The .on method bring a lot of consistency to the API and hopefully makes things slightly less confusing.

Cons 1. Brings confusion because the behavior changes based on how you call the method.

Create News Feed In PHP

Code To Create A Simple News Feed In PHP

Use Ajax & Jquery To Fetch & Populate News Feed . Make Ajax Call From Page Control Will go to specified PHP page through ajax call then fetch data in that PHP page and send data to callback to Ajax Call

See A simple Example below :-

HTML PAGE CODE

<html>

<head>

//Required CSS  / JSS Files

</head>

<body>

<div id="news"></div>

//Click Button Below To Fetch News Feeds

<input type="button" onclick="GetNews()" value="Get News Feed" />

<script>

    function GetNews()

    {

        $("#news").load("path_to/AjaxFetchData.php")

    }

</script>

</body>

</html>

AjaxFetchData.php File Code

//Sql Query To Fetch News Feed From Database

$con= Initialize it with connection Details for database

$sql = "Select Top 50 from TblNews";

$result = $result=mysqli_query($con,$sql);

while($row =  $result->fetch_assoc())

{

    echo("<div class='NewsFeed'>");

    echo("<div class='title'>" . $row['title'] . "</div>");

    echo("<div class='body'>" . $row['body'] . "</div>");

    echo("</div>");

}

Parse Json file In Jquery Ajax

See Running Demo Here -Demo For Parsing Json File In Jquery


Json File Data

 [
    {
        "alignment1": "TM"
    },
    {
        "alignment2": "TLBR"
    },
    {
        "alignment3": "BL"
    },
    {
        "ruleTimer": "6"
    },
    {
        "music": "Enable"
    },
    {
        "rule1": "Rule 1"
    },
    {
        "rule2": "Rule 2"
    },
    {
        "rule3": "Rule 3"
    },
    {
        "rule4": "Rule 4"
    },
    {
        "ID1": "p7ZsBPK656s"
    },
    {
        "name1": "Disfigure - Blank [NCS Release]"
    },
    {
        "ID2": "__CRWE-L45k"
    },
    {
        "name2": "Electro-Light - Symbolism [NCS Release]"
    },
    {
        "ID3": "J2X5mJ3HDYE"
    },
    {
        "name3": "DEAF KEV - Invincible [NCS Release]"
    },
    {
        "color1": ""
    },
    {
        "color2": ""
    },
    {
        "color3": ""
    },
    {
        "color4": ""
    },
    {
        "color5": ""
    }

]

Index.html Code 

 <!doctype html>
<html>
<head>

    <title>How to Parse a JSON file using jQuery</title>
   
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <a href="data.json" target="_blank">Open JSON file</a><br />
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {
           
            //after button is clicked we download the data
            $('.button').click(function(){

                //start ajax request
                $.ajax({
                    url: "data.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {
                       
                        //data downloaded so we call parseJSON function
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few itemscons
                        console.log("data is - "+json);
                       
                       // $.each(json, function(idx, obj) {

//$.each(obj, function(idx, obj) {
//console.log("one-"+obj+" "+idx);
//$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");
//});
//});


function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            //alert("Object " + index);
            Iterate(value);
        }
        else {
             alert(index + "   :   " + value);
             $('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");
        }
    });

};

Iterate(json);
                       
                      //  $('#results').html('Plugin name: ' + json.alignment1);
                    }
                });
            });
        });
    </script>

</body>

</html>

Parse Json file In Jquery Ajax With Object Under Object

See Running Demo Here -Demo For Parsing Json File In Jquery


Json File Data

 [
    {
        "alignment1": "TM"
    },
    {
        "alignment2": "TLBR"
    },
    {
        "alignment3": "BL"
    },
    {
        "ruleTimer": "6"
    },
    {
        "music": "Enable"
    },
    {
        "rule1": "Rule 1"
    },
    {
        "rule2": "Rule 2"
    },
    {
        "rule3": "Rule 3"
    },
    {
        "rule4": "Rule 4"
    },
    {
        "ID1": "p7ZsBPK656s"
    },
    {
        "name1": "Disfigure - Blank [NCS Release]"
    },
    {
        "ID2": "__CRWE-L45k"
    },
    {
        "name2": "Electro-Light - Symbolism [NCS Release]"
    },
    {
        "ID3": "J2X5mJ3HDYE"
    },
    {
        "name3": "DEAF KEV - Invincible [NCS Release]"
    },
    {
        "color1": ""
    },
    {
        "color2": ""
    },
    {
        "color3": ""
    },
    {
        "color4": ""
    },
    {
        "color5": ""
    }

]

Index.html Code 

 <!doctype html>
<html>
<head>

    <title>How to Parse a JSON file using jQuery</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <a href="data.json" target="_blank">Open JSON file</a><br />
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {
            
            //after button is clicked we download the data
            $('.button').click(function(){

                //start ajax request
                $.ajax({
                    url: "data.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {
                        
                        //data downloaded so we call parseJSON function 
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few itemscons
                        console.log("data is - "+json);
                        
                       // $.each(json, function(idx, obj) {

//$.each(obj, function(idx, obj) {
//console.log("one-"+obj+" "+idx);
//$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");
//});
//});


function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            //alert("Object " + index);
            Iterate(value);
        }
        else {
             alert(index + "   :   " + value);
             $('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");
        }
    });

};

Iterate(json);
                        
                      //  $('#results').html('Plugin name: ' + json.alignment1);
                    }
                });
            });
        });
    </script>

</body>

</html>

How To Use Progress Bar With Ajax Request Jquery

Use The Code Below To Have Progress Bar with %age Complete For Fetching Data

Preview Of Jquery Ajax Loader

HTML CODE 

<div id="progressbar">
    <div class="progress-label">Loading...</div>

</div>

CSS CODE

.progress-label {
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;

}

Javascript / Jquery Code



  $(function () {
      var progressbar = $("#progressbar"),
          progressLabel = $(".progress-label");

      progressbar.progressbar({
          value: false,
          change: function () {
              progressLabel.text(progressbar.progressbar("value") + "%");
          },
          complete: function () {
              progressLabel.text("Complete!");
          }
      });

      function progress() {
          var val = progressbar.progressbar("value") || 0;

          progressbar.progressbar("value", val + 1);

          if (val < 99) {
              setTimeout(progress, 100);
          }
      }

      setTimeout(progress, 3000);

  });

Convert Json Array To Table Format in AngularJS

The Following Code will Split Json Array Into Tabulated Format with Rows

HTML CODE

<div id="div1">
</div>

CSS CODE

#mytable,td{
    border:1px solid blue;
}

Javascript Code

var obj=[
    {
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    },
    {
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    },
    {
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    }
]
var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
    var tr="<tr>";
    var td1="<td>"+obj[i]["id"]+"</td>";
    var td2="<td>"+obj[i]["name"]+"</td>";
    var td3="<td>"+obj[i]["color"]+"</td></tr>";
 
   $("#mytable").append(tr+td1+td2+td3);

}

Output Image

Uncaught TypeError-undefined is not a function

Uncaught TypeError: undefined is not a functionUncaught TypeError: undefined is not a function in datepicker

This error takes my 2 hours today I was developing an asp.net application and I never gone through this error before First time i got this error and it shuffles me for two big hours

You will get number of solutions over forums
But sorry to say all these are workaround to get rid-off that error
very less tried to explain why this error came and what is meaning of this error .

Today after spending my 2 hours on this simple error i decided to write something about solution to this error

CAUSE OF ERROR :Uncaught TypeError: undefined is not a function

This error clearly means this is some function that is undefined in the class from which we are accessing it

Like in my case this error was coming at this line :-

$( "#datepicker" ).datepicker();
or
jquery( "#datepicker" ).datepicker();

The main reason behind this error is Jquery Multiple versions calling . If you are using jquery and you have refrenced multiple versions of jquery like Jquery1.10.2 and Jquery 2.0.1 in same file then mostly this error will come at runtime at that page .

The reason behind why it says Undefined TypeError because when multiple versions of jquery are called on same page then we are having two jquery script running and they are like -

1.  Jquery1_10_2
2.  Jquery2_0_1

and we are using only jquery or a '$' dollar symbol there and when browser is unable to find Jquery there then how can it find datepicker function or any other function that you are using at that time . This is main cause of error

Solution of Error : 

Uncaught TypeError: undefined is not a function

So let's talk about solutions to this error . I tried my best at 1:00 AM at Night to find solution to this error and then share it with my blog readers

Now we need to tell browser that we need to use specific version of juery only if we are using multiple versions of jquery on same page

Otherwise simple solution would be to remove the second refrenced version of jquery if possible

so in order to tell broser that we are using specific version of jquery we need to make some changes to our code

Like in my case i am using following code to put jquery datepicker on my website and i am using
jquery1_11_0 version of jquery
So here is my code i have replaced '$' or jquery with jquery1_11_0 and that's it the problem is solved

CODE -
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
    var jQuery_1_11_0 = $.noConflict(true);
    jQuery_1_11_0(document).ready(function () {
        jQuery_1_11_0('#datepicker').datepicker();

    })
</script>

How To Create Re-sizable Popup Windows using Jquery

CODE FOR HOW TO CREATE RE-SIZABLE POPUPS USING JQUERY


Try the code written below to create resizable popups for your websites you must have internet connection to use jquery files in the code below other wise you can download these files and give them static paths according to your directory structure

CODE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
  </script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>