Technical Notes

Posts

Handling Change Events in jqGrid

Handling Change Events in jqGrid In this tutorial, we'll explore how to handle the change event in jqGrid to dynamically update another column based on the selected value. This approach is useful when you need to update related data based on user selections. Example Scenario Let's say we have a jqGrid table with two columns: Country and State. When the user selects a country, the State column should dynamically update to show the relevant states for the selected country. Implementation We'll use the dataEvents option in the colModel configuration to handle the change event. HTML Structure First, let's set up our basic HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H...

Passing User Input to the Server with jQuery AJAX

Passing User Input to the Server with jQuery AJAX Many times, you collect input from the user and pass that input to the server for further processing. jQuery AJAX makes it easy to pass collected data to the server using the data parameter of any available Ajax method. Example This example demonstrates how to pass user input to a web server script, which sends the same result back, and we print it: <html> <head> <title>AJAX Input Example</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#driver").click(function(event){ var name = $("#name").val(); $("#stage").load(...

Handling JSON Responses with jQuery's getJSON()

Handling JSON Responses with jQuery's getJSON() There are situations where a server returns a JSON string in response to your request. The jQuery utility function getJSON() parses the returned JSON string and makes it available to a callback function, which is the first parameter of the function. Syntax Here is the simple syntax for the getJSON() method: [selector]. getJSON(URL, [data], [callback]); Here is the description of all the parameters: URL: The URL of the server-side resource contacted via the GET method. data: An object whose properties serve as the name/value pairs used to construct a query string to be...

Loading Data with jQuery AJAX

Loading Data with jQuery AJAX Using jQuery AJAX to load static or dynamic data is very easy. jQuery provides the load() method to accomplish this task efficiently. Syntax Here is the simple syntax for the load() method: [selector]. load(URL, [data], [callback]); Here is the description of all the parameters: URL: The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database. data: This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. I...

jQuery Hello World example

Hello World jQuery Application In this section, we will create our first jQuery application called "Hello World jQuery". This application will simply display Hello World !! (display due to jQuery) message in the browser. After completing this example, you will be able to include the jQuery library in your application and use it to perform simple functions. Let's start developing the Hello World application in jQuery. Setting up jQuery Click on the following link to open a page containing the jQuery library script. This file is around 70KB. Save this as "jquery-1.4.2.js". Now we are ready to use jQuery inside your HTML page. Hello World Example (HelloWorld.html) <htm...

How To Make Jquery Ajax Call

Beginner's Guide to AJAX Calls in JavaScript Welcome to my first blog post! When I started working on web development, I needed to call a web service in an HTML page to display data. After searching for examples online, I couldn't find a simple, beginner-friendly guide to get started with AJAX. So, I created one myself. I hope this helps you as well! Making an AJAX Call Here's a straightforward example of an AJAX call using jQuery: $.ajax({ type: "POST", url: "test.htm", data: "param1=value1&param2=value2", success: function() { // Code to execute after the AJAX call succeeds }, error: function() { // Code to execute after the AJAX call fails } }); Understanding the AJAX Call Let's break down the code: type:...