Web Development Articles - Page 1011 of 1049

$(window).load()Use $(window).load(), when you want the code inside it to run only once the entire page is ready (not only DOM).  It executes when the page is fully loaded, including frames, objects and imagesNote: The load() method deprecated in jQuery version 1.8. It was completely removed in version 3.0. To see its working, add jQuery version for CDN before 3.0.$(document).ready()Use the  $(document).ready() method when you want the code inside it to run once the page DOM is ready to execute JavaScript code.

To iterate over arrays and objects in jQuery, use the jQuery forEach() loop. You can try to run the following code to learn how to iterate over arrays and objects −ExampleLive Demo $(document).ready(function(){   $("#button1").click(function(){     var arr = [{subject: "Maths", id:3}, {subject: "History", id:7}];     arr.forEach(function(el, index) {       alert(el.id+" "+el.subject);     });   }); });   Result

To trim a string in jQuery, use the trim() method. It removes the spaces from starting and end of the string.The sample string I am using has spaces −var myStr = "  Hello World    ";Use the trim() method, jQuery.trim(myStr);The following is an example to trim a string in jQuery −ExampleLive Demo $(document).ready(function(){   $("#button1").click(function(){     var myStr = "  Hello World    ";     myStr = jQuery.trim(myStr);     alert(myStr);   }); }); Trim

These codes might help you −$('body').click(function(){ alert('test' )}) var foo = $.data( $('body').get(0), 'events' ).click // you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.  $.each( foo, function(i,o) {     alert(i) // guid of the event     alert(o) // the function definition of the event handler });

To remove a property from a JavaScript object, use the delete keyword. You can try to run the following code to learn how to remove a propertyExampleLive Demo                          var cricketer = {             name:"Amit",             rank:1,             points: 150          };          delete cricketer.rank;          document.getElementById("demo").innerHTML =             cricketer.name + " has " + cricketer.rank + " rank.";          

To check if event exists on element in jQuery, check for the existing events on the element. Here, I have set the div −   This is demo text. Click here! When you click div, then the alert generates which I have set using the div id:$("#demo").click(function() {   alert("Does event exists? - "+hasEvents); });You can try to run the following code to check if event exists −ExampleLive Demo               $(document).ready(function(){       $("#demo").click(function() {         alert("Does event exists? - "+hasEvents);      });      var events = $._data(document.getElementById('demo'), "events");      var hasEvents = (events != null);    });         This is demo text. Click here!

To enable and disable submit button, use the jQuery prop() method. You can try to run the following code to enable and disable submit button using jQuery −ExampleLive Demo               $(document).ready(function() {       $('#register').click(function() {         $(this).prop('disabled',true);         $("#content").show();         setTimeout(function(){           $('#register').prop('disabled', false);         },3000);      });    });               The above button disables for 3 seconds, on clicking.                  

Generally, the forms in HTML uses a single submit button which saves the record when button is pressed. In some cases, we need a form with additional submit buttons such as "accept" or "reject". Those type of buttons usually attempt a state transition while updating the record. A form with multiple buttons has to process your server-side code needs to know which button was pressed. Generally, after submission the destination data is stored in the action attribute where every button leads to same location. To overcome this problem, we use formaction attribute. For each submit button we require a different ... Read More

Yes, you can submit form with multiple submit buttons. Attack a custom click handler to all the buttons and the check which button is clicked.ExampleLive Demo               $(document).ready(function(){       $("#myform button").click(function (ev) {       ev.preventDefault()       if ($(this).attr("value") == "button1") {                     alert("First Button is pressed - Form will submit")         $("#myform").submit();       }       if ($(this).attr("value") == "button2") {         alert("Second button is pressed - Form did not submit")       }     }); });     First Button   Second Button

To create a div dynamically, use the html() method. You can try to run the following code to learn how to create a div dynamically on button click −ExampleLive Demo               $(document).ready(function(){       $("button").click(function(){         $("body").html("This is a new div.");       });     });   Create a new div This is demo text.