Ways to use jQuery files

The best way for us to use the JQuery library is to attempt to load the jQuery hosted at Google. By this you have the latest jQuery files. But it can fail in following situations:

1. Your web application is an intranet application and depending on the user rights of the person logged into the computer, they may not be able to access internet
2. Maybe this Google file is blocked for you

We have few options here:

• Connect to the Microsoft hosted version of jQuery (again if internet is down, it breaks)
• Try to work out the code in such a way that it first checks the internet and then if not available, checks the local version (which is the best)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='/path/to/your/jquery on your server' type='text/javascript'%3E%3C/script%3E"));
}
</script>

jQuery - .bind and .live functions

.bind function is used in jQuery to have an event attached to a form element. But what happens if you have the same element name (for eg: CSS name) happening more than once in a page, and that too getting added to a page dynamically? In such a situation, .live is handy. It will propagate the event to the dynamically added new elements.

Here is an example:
<div class="clickhere">click event to be added using jQuery</div>
$('.clickhere').bind('click', function() {
  alert('i am clicked');
});


This will attach the click event to the div stated above and on click user gets the message "i am clicked".
Now what happens if you dynamically add few more elements to page which has the same class? Event wont be propagated if you use the bind method.

Lets say:
$('body').append('<div class="clickhere">another dynamic click button</div>');
As the bind event is added above this, the event is not propagated but see how it works if we use live.
$('.clickhere').live('click', function() {
  alert('i am clicked');
});


and later on if you have any no. of new elements created dynamically with same class name, it will all have the same event handler attached.

If you want to remove the event, you can use the .die method.
Say:
$('.clickhere').die('click');
Syntax:
.live/bind (eventType, eventHandler)
.live/bind (eventType, eventData, eventHandler)
eventType - click / keydown etc
eventHandler - function to be executed
eventData - additional data for the event

IE7 rendering issues with more than one user controls on a page with Ajax ModalPopupExtender

IE7 is really great with its issues on CSS styles. Most websites which work fine on IE6 will show issues on IE7. I will do another posting on IE7 rendering and its different solutions (Sorry it is only work around and not solutions).

This is specifically for the issues of Modal Popup with AJAX call on IE7. Normally when we develop websites using Visual Studio (2005 or 2008) we have the flexibility to add up AJAX tool kit, which is really good and has a lot of extender controls. Great to work with. But when we try the ajax tool kit controls we may need to relate the styles in 2 different ways.

1. Using the Skins (Which gives a great deal of customization in server)
2. CSS (as it is ajax enabled, and so without going to server and loading the Skins, it will try to load the CSS from client side scripting)

Scenario:

Now here comes the problem. Let us say that we have a page where we have more than one user control (custom user control) one below the other. Each user control has one or more columns where user can input something and search and maybe having a grid to display the results. Also that each search control (maybe a text box) has an ajax enabled ModalPopupExtender connected which may give the result of data (maybe in a grid) when we type something in the search textbox. In this case, normally what you do is, you will have a ModalPopupExtender hidden on page load and then show it when user clicks on search textbox (by the client side javascript using OnChange of textbox)

Issues:

Notice that in IE7 starts working in a peculiar way. You can see that after page load, you cannot click on the textbox on the bottom user control. But you can if you search on something on top user control. This is funny.

Solution:

IE7 has removed the support of a famous CSS which is "visibility:hidden". Well, what we normally do is, the CSS for the ModalPopup will have the style which has the attribute "Visibility:hidden" which is quite natural and when ever needed we will have the javascript telling "display:inline". As this attribute is not continued in IE7, i will break the rendering of IE7 and will block the area where this ModalPopup is placed. Funny thing is that, it works fine (the Modal is hidden and no issues). But IE7 rendering engine gets confused on seeing this, and will hide it (Anyway) and then blocks the area below the ModalPopupExtender (to the height and width we have specified for the ModalPopup. But as when we type something on the search box and press search, the modal window is shown and the rendering will rearrange the Search result just below the textbox and the issue is gone. That is a big bug and the solution is as mentioned.

Tech Team @ Seguro Technologies

ASP.net with AJAX and issues with the page popup

ASP.net web or application development having ajax has issues with page popup by nature.


The scenario is as follows:
a) You have the project which has ajax - so have script manager in page
b) You have a client side event (maybe by onClientClick) where you call window.open
c) The new page which pops up, you would be having a button which says "window.close" on its client click
d) You click on the button to have the popup coming up and click on the button on popup to close it. Try it few times
e) Maybe after 3-4 times, it would freeze the IE and it will show a blank page


Solution:
a) Either change your buttons from Server Control to normal HTML control which resides outside the script manager
b) In most cases #a is not easy, so try to put a "return false;" on the window.close javascript.


Tech Team @ Seguro Technologies