Technical Notes

Posts

Showing posts from March, 2012

JQGrid Custom Validation - How to Check If Email ID Already Exists in jqGrid

How to Check If Email ID Already Exists in jqGrid Validating whether an email ID already exists is a common requirement in web development. In this guide, we'll show you how to implement this validation in a jqGrid using a custom function. Step 1: Define the Grid Column First, define the column for the email ID in your jqGrid. Add the custom validation rule and specify the custom function: colModel: [ { name: 'emailId', index: 'emailId', width: 200, editable: true, sorttype: 'int', editrules: { email: true, required: true, custom: true, custom_func: checkvalid } } ] Step 2: Implement the Custom Validation Function Next, implement the checkvalid function to check if the email ID already ex...

Create a Dynamic Image Carousel with jQuery and jCarousel

Create a Dynamic Image Carousel with jQuery and jCarousel An image carousel is a great way to showcase multiple images in a small space. In this guide, we'll walk you through creating a dynamic image carousel using jQuery and jCarousel. Step 1: Set Up Your HTML First, create a new HTML file and set up the basic structure: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Carousel</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src=...

Creating Tabs with jQuery: A Step-by-Step Guide

How to Create Interactive Tabs with jQuery Tabs are a fantastic way to organize content on your website, making it more user-friendly and engaging. In this guide, we’ll walk you through creating tabs using jQuery, with clear steps and explanations. Step 1: Set Up Your HTML Structure Create a new HTML file and use the following code to set up the basic structure for your tabs: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabs</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script/jquery.tabs.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#div-1').tabs(); }); <...

jQuery Drop-Down Menu Example

jQuery Drop-Down Menu Example Have you ever created the drop-down menu using jQuery? No, let's create a simple drop-down menu using jQuery: Step 1: Create the HTML File Create a new file named suckerfish.html and add the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn how to create a simple drop-down menu using jQuery. This guide includes a concise code example and clear explanations."> <meta name="keywords" content="jQuery, drop-down menu, JavaScript, web development"> <title>jQuery Drop-Down Menu Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js...

How to Create a Toggle Effect for a Div with jQuery

jQuery Toggle Effect Example This guide demonstrates how to use jQuery to create a simple toggle effect. The example includes a button to show or hide a div and a link inside the div to close it. Code Example Here’s a straightforward example of how to use jQuery for toggling a div: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn how to create a simple toggle effect with jQuery. This guide includes a concise code example and clear explanations."> <meta name="keywords" content="jQuery, toggle, JavaScript, web development"> <title>jQuery Toggle Effect Example</title> <script src="https://co...

jQuery Sliding Effects: slideDown, slideToggle, and slideUp

jQuery Sliding Effects: slideDown, slideToggle, and slideUp jQuery provides several methods for creating sliding effects on your web elements. These methods include .slideDown() , .slideToggle() , and .slideUp() . Each of these methods allows you to animate elements with a sliding effect, enhancing the user experience on your website. .slideDown() The .slideDown() method displays the matched elements with a sliding effect. It is used to reveal hidden content with a smooth animation. Example: $('#clickme').click(function() { $('#imageNew').slideDown('slow', function() { // Animation complete. }); }); .slideToggle() The .slideToggle() method is used to either display or hide the matched element with a sliding effect. It toggles the visibility of the element, showing it if it is...

How to Add Horizontal Scrollbar and Checkboxes in jqGrid

Adding Horizontal Scrollbar and Checkboxes in jqGrid jqGrid is a powerful jQuery plugin for creating interactive tables. This guide will show you how to add a horizontal scrollbar and enable checkboxes for row selection in jqGrid. Adding a Horizontal Scrollbar To enable horizontal scrolling in jqGrid, you need to: Set a Fixed Width: Define a fixed width for the grid container. Disable Automatic Resizing: Use shrinkToFit: false to prevent automatic column resizing. Enabling Checkboxes for Multi-Selection To add checkboxes for row selection, follow these steps: Include a Checkbox Column: Use formatter: 'checkbox' in the column model. Enable Multi-Select: Set multiselect: true to allow multiple row selections. ...

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:...