Found 8895 Articles for Front End Technology

How to get a style property on the matched element using jQuery?

David Meador
Updated on 15-Jun-2020 09:14:33

304 Views

To get a style property on the matched element, use the css() method. You can try to run the following code to get a style property on the matched element using jQuery:Live Demo $(document).ready(function(){   $("#button1").click(function(){     alert($('div').css('left'));   }); }); This is demo text. Get

How to handle jQuery AJAX success event?

David Meador
Updated on 17-Feb-2020 07:46:43

860 Views

To handle jQuery AJAX success event, use the ajaxSuccess() method. The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.Here is the description of all the parameters used by this method −callback − The function to execute. The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.Let’s say we have the following HTML content in result.html −THIS IS RESULT...ExampleThe following is an example showing the usage of this method −Live Demo           jQuery ajaxSuccess() method     ... Read More

What are jQuery AJAX Events?

David Meador
Updated on 17-Feb-2020 07:44:49

256 Views

Ajax requests produce a number of different events that you can subscribe to. Let’s check the two types of events.There are two types of events:Local EventsThese are callbacks that you can subscribe to within the Ajax request object.$.ajax({    beforeSend: function(){       // Handle the beforeSend event    },    complete: function(){      // Handle the complete event    }    // ......  });Global EventsThese events are broadcast to all elements in the DOM, triggering any handlers which may be listening. You can listen for these events like so −$("#loading").bind("ajaxSend", function(){    $(this).show(); }).bind("ajaxComplete", function(){    $(this).hide(); ... Read More

How would you unbind all jQuery events from a particular namespace?

David Meador
Updated on 17-Feb-2020 07:38:13

151 Views

To unbind jQuery events from a particular namespace, use the unbind() method. The event.namespace property is used to return the custom namespace when the event was triggered.ExampleYou can try to run the following code to learn how event namespace works and how you can unbind the jQuery events from a namespace −Live Demo $(document).ready(function(){     $("p").on("custom.myNamespace",function(event){         alert(event.namespace);     });     $("p").click(function(event){         $(this).trigger("custom.myNamespace");     });       $("button").click(function(){         $("p").off("custom.myNamespace");     }); });   Click me Click the button to remove namespace. Clicking the above button removes the namespace.

How to use GET method to send data in jQuery Ajax?

Amit D
Updated on 17-Feb-2020 07:35:37

3K+ Views

The jQuery.get( url, [data], [callback], [type] ) method loads data from the server using a GET HTTP request.Here is the description of all the parameters used by this method −url − A string containing the URL to which the request is sentdata − This optional parameter represents key/value pairs that will be sent to the server.callback − This optional parameter represents a function to be executed whenever the data is loaded successfully.type − This optional parameter represents type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text".Assuming we have the following PHP content in result.php file −ExampleHere's the code ... Read More

How to load external HTML into a

David Meador
Updated on 17-Feb-2020 07:37:03

20K+ Views

To load external HTML into a , wrap your code inside the load() function. To load a page in div in jQuery, use the load() method. Firstly, add the web page you want to add.Here’s the code for new.html −     This is demo text. ExampleThe following is the  code snippet for the file which adds the above page, $(document).ready(function(){        $('#content').load("new.html"); });

How to use POST method to send data in jQuery Ajax?

Amit D
Updated on 15-Jun-2020 08:52:44

4K+ Views

The jQuery.post( url, [data], [callback], [type] ) method loads a page from the server using a POST HTTP request.Here is the description of all the parameters used by this method −url − A string containing the URL to which the request is sentdata − This optional parameter represents key/value pairs or the return value of the .serialize() function that will be sent to the server.callback − This optional parameter represents a function to be executed whenever the data is loaded successfully.type − This optional parameter represents a type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text".Let’s say ... Read More

What is the difference between jQuery.load() and jQuery.get() methods in jQuery?

Ricky Barnes
Updated on 17-Feb-2020 07:17:43

379 Views

jQuery load() methodThe load( url, data, callback ) method loads data from the server and places the returned HTML into the matched element.Here is the description of all the parameters used by this method −url − A string containing the URL to which the request is sent.data − This optional parameter represents a map of data that is sent with the request.callback − This optional parameter represents a function that is executed if the request succeedsAssuming we have following HTML content in result.html file:THIS IS RESULT...ExampleThe following is the code snippet showing the usage of this method.            ... Read More

What is the difference between jQuery.load() and jQuery.ajax() methods in jQuery?

Ricky Barnes
Updated on 17-Feb-2020 07:23:14

277 Views

jQuery ajax() methodThe jQuery.ajax( options ) method loads a remote page using an HTTP request. $.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.Here is the description of all the parameters used by this method −options − A set of key/value pairs that configure the Ajax request. All options are optional.Assuming we have the following HTML content in result.html file −THIS IS RESULT...ExampleThe following is an example showing the usage of this method. Here, we make use of success handler to ... Read More

What is jQuery.ajaxSetup() method in jQuery?

Amit D
Updated on 15-Jun-2020 08:50:16

192 Views

The jQuery.ajaxSetup() method sets global settings for future AJAX requests. Here is the description of all the parameters used by this method-Let’s say we have the following HTML content in result.html file,THIS IS RESULT...The following is an example showing the usage of this method. Here we make use of success handler to populate returned HTML:           The jQuery Example                              $(document).ready(function() {                         $("#driver").click(function(event){                // Do global setting.                $.ajaxSetup({                   url: "result.html"                });                                    $.ajax( {                   success:function(data) {                      $('#stage').html(data);                   }                });             });          });                             Click on the button to load result.html file:                        STAGE                                 Live Demo

Advertisements