Home » JQuery
Category Archives: JQuery
JQuery 2.0 – Notes About the Official Release
jQuery 2.0
The latest news coming from the world of jQuery is the official release of jQuery 2.0.
The new jQuery 2.x library is a significantly smaller file size than the jQuery 1.x series of libraries, but the 2.0 library does not support versions of Internet Explorer prior to version 9.
For the foreseeable future, the makers of jQuery plan to run two separate lines of the jQuery library:
- The jQuery 1.x library will continue to be developed for years to come and will support older browser versions.
- On the other hand, the jQuery 2.x library will support newer browsers and will offer both a smaller file size, and likely modern features that older browsers can not support.
Note: Have a look at this series of articles covering jQuery if you find this post interesting and want to read more about the subject. (more…)
JQuery – Example of Tabs Event Handling
JQuery UI Tab Click Event
If you are working with JQuery tabs and want to extend the functionality of your tabs beyond the basics, then it’s good to know how to handle the JQuery tabs click event.
In this article I will:
- Review how to add event handling to the JQuery tabs when a tab is clicked
- I will show how to load an iFrame contained in a tab when the tab is selected.
If you like this article, please have a look here for further useful articles about JQuery.
JavaScript / JQuery – Click Button by ID
JavaScript Click
In this article I will review how you code a button click event in JavaScript, and how it differs from a button click event in JQuery. I’ll also show some integration of the client-side JavaScript with server-side code in both identifying an ASP.NET button control in JavaScript, and in making the button click event trigger a post-back to the Web server.
Structure of the Example
As you can see in the image above (and the example code below), I’ve coded both a JavaScript and a JQuery button, and have added ASP.NET button controls beside each that will get clicked when the user clicks the JavaScript or JQuery button.
I have written further useful articles about JQuery and JavaScript that are worth having a look at if you are interested in these languages. (more…)
Setting the Z-Index and Page Position of a JQuery Modal Dialog
Modal Dialog Markup
The JQuery modal dialog widget can be a useful tool on most Web pages. If you take a look at its structure in a tool such as FireBug you will see that it consists of a div that grays out the web page’s background, and another div that sits on top and that presents the modal dialog.
If you are adding absolute positioning and z-index markup to your Web page, then you will want to look a little deeper into the properties of your modal dialog widgets and how they interact with other elements on your Web page.
When an area of your page has a higher z-index than your modal dialog does, then the dialog will not be modal for that area, and may even be hidden by the area entirely. For example, if you have a text field on your form that is wrapped in an element with a z-index that is higher than that of your modal dialog, then your modal dialog will not gray out the text field. Even worse, the text field will remain editable which is certainly not desirable behavior.
If you find this article interesting, then take a look at my collection of articles on JQuery and the JQuery Modal Dialog widget.
(more…)
Setting a Time Form Field with a JQuery DatePicker with an ASP.NET DataList in an UpdatePanel
Sometimes you will want to do something very specific on a Web page using a combination of popular technologies. However the interaction of client and server-side languages such as JQuery and ASP.NET can become confusing, especially when the server side language starts adding client-side functionality such as through an UpdatePanel control.
In this article I’m going to review a very specialized case. Here are the key points that I want the code to handle:
- I have an ASP.NET DataList that is showing rows of information.
- One column of repeating information in the DataList contains a separate Date and Time component
- The footer of the DataList is being used to add new rows of information, including a Date and a Time field
- The editable time field should display a JQuery DatePicker widget
- When a date is selected on the JQuery DatePicker widget, the current time should be set to a separate text field that is beside the Date field
- The DataList is running inside an UpdatePanel control to only refresh the DataList when Server communications happens
- The DataList has an edit button which the user can press to make a row editable. This involves a refresh of the DataList so that JQuery has to know to re-attach the DatePicker control to the newly editable date field
This is a lot of functionality to cover in one article and I hope it is clear for you to understand how I want the JQuery to interact with the ASP.NET. To further explain things I will give some example code of both the JQuery and the markup tags of the DataList, and I will explain how to address the requirements step-by-step.
Before I start into in-depth explanations in this article, I’d like to mention that if you are interested in reading more about ASP.NET, please check out my series of articles covering ASP.NET development. I also have written a very interesting series of articles about using JQuery to add functionality to your pages that is worth taking a look at.
