Call document OnLoad after an AJAX.NET request

When you use your own JavaScript combined with AJAX.NET, you might bump into the problem that your document OnLoad event is not fired after AJAX requests.
This can be solved by using AJAX.NET's endRequest event.
Please note that i use jQuery, so you will need that in order for this example to work.

var documentReady = function() {
    // here you do all the stuff you would normally do in $(document).ready()
}
 
$(document).ready(documentReady);
 
// This will call the documentReady() function every time an AJAX request is finished
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    documentReady();
});

This can of course be used to call any function after an AJAX request.

2009-08-25: I just found out that you can also use add_pageLoaded() instead of add_endRequest().

/Ruud

jQuery removeOptionByValue plugin for dropdown list

I needed to remove an option with a specific value from a select element with JavaScript.
It seems that jQuery lacks something like a removeOptionByValue() method.
I tried to use a selector to remove one option, like this: $("#mySelect option[@value=ToBeRemoved]").remove() but that resulted in an error.
So i wrote a little plugin for it.

This is the example HTML:

<select id="ddlTest"> 
    <option value="">- Please choose -</option> 
    <option value="first">First option</option> 
    <option value="second">Second option</option> 
    <option value="third">Third option</option>
</select>
  
<input id="btnTest" value="Test" type="button">

We would like to remove the option with value "first" when the button is clicked.
This is the javascript i wrote:

(function($) {
    $.fn.removeOptionByValue = function(optionValue) {        
        if ($(this).is("select")) {
            var itemIndex = -1;
            var dropdownId = $(this).attr("id");
            
            $("#" + dropdownId + " option").each(function() {
                itemIndex++;
                if ($(this).val() == optionValue) {
                    $("#" + dropdownId)[0].remove(itemIndex);
                }
            });
        }
    }
})(jQuery);
 
// Test if it works
$("#btnTest").click(function() {
    $("#ddlTest").removeOption("first");
});

Download the solution as jQuery plugin here: jquery.removeoptionbyvalue.js

/Ruud

Target elements with ids that contain special characters using jQuery

Let's say you have some HTML elements with ids like this one:

<div id="form~myform$div~mydiv[1]#value"></div>

And you would like to target this element using jQuery.
This will not work because of the special characters used in the element's id.
If you execute the following jQuery:

$("div").each(function() {
    var divId = this.id;
    var jQueryFound = $('#' + this.id).length;
        
    alert("Div id is '" + divId + "' and jQuery found " + jQueryFound);
});

The result is: Div id='form~myform$div~mydiv[1]#value' and jQuery found 0.
JQuery cannot find the element id because it contains meta-characters that jQuery parses as part of the selector.
To solve this problem i wrote a method which escapes the special characters so jQuery parses them as part of the id.

var jEscape = function(jquery) {
    jquery = jquery.replace(new RegExp("\\$", "g"), "\\$");
    jquery = jquery.replace(new RegExp("\~", "g"), "\\~");
    jquery = jquery.replace(new RegExp("\\[", "g"), "\\[");
    jquery = jquery.replace(new RegExp("\\]", "g"), "\\]");
    jquery = jquery.replace(new RegExp("#", "g"), "\\#");
    return jquery;
};

Now execute the following code to see that it works:

$("div").each(function() {
    var divId = this.id;
    var escapedId = jEscape(this.id);
    var jQueryFound = $('#' + escapedId).length;
    
    alert("Div id is '" + divId + "' which is escaped to '" + escapedId + "' and jQuery found " + jQueryFound);
});

The result is: Div id is 'form~myform$div~mydiv[1]#value' which is escaped to 'form\~myform\$div\~mydiv\[1\]\#value' and jQuery found 1.

If you want to escape all the possible jQuery meta-characters, expand the method to escape these: ;&,.+*':"!^()=>|/

/Ruud