DISQUS

DISQUS Hello! Just Sayin' More Words is using DISQUS, a powerful comment system, to manage its comments. Learn more.

Community Page

Just Sayin' More Words

A blog by John Sheehan
Jump to original thread »
Author

Custom jQuery Selector for ASP.NET WebForms

Started by John Sheehan · 9 months ago

I’ve built a ton of ASP.NET web sites using WebForms. Unfortunately I don’t have the luxury of rewriting them all using ASP.NET MVC so I’m stuck dealing with INamingContainer and the resulting auto-generated HTML element IDs.
Here are all the ways I know of that people use ... Continue reading »

18 comments

  • There's one problem with any EndsWith selection - the same problem that INamingContainer is trying to solve. If the element is inside a repeater, each will end with the same value. Or, if you have two similarly named elements "Password" / "VerifyPassword" would both match for "Password". I would suggest delimiting by the separator character for some added protection.
  • Rick: Couldn't you then use the .each() function? Also, in a situation like like a repeater it wouldn't be out of order to use a class selector.
    I do agree though, there are a few situations where something like "TextBox1" might happen more than once, such as multiple user controls on one page.

    This is a brilliant solution John, thanks! I can't wait to try it.
  • Items in a repeater shouldn't have the same ID as that's invalid HTML (each ID should only be used once on a page) and as Eric mentioned, that's a great case for using classes. Similar named items is definitely a valid concern. The problem is if I add the underscore ASP.NET generates before the ID, pages without panels/user controls/master pages won't work with this method as they spit out a valid, unaltered ID.

    I'd be fine with INamingContainer if it was limited to repeaters and such. It's master pages and user controls that cause the most problems for me.
  • John, this is pretty cool. Actually I didn't realize you could extend selector filters at all, but that makes sense.

    FWIW, some time ago I updated the component you reference above and have an option to auto generate ALL clientIds on the object. As you mention the downside there is that it sends all those ids to the client when the page is loaded but you do end up with a single object with properties. (serverVars.txtNameId for example) without having to modify server code specifically to add controls. I've used this quite a bit and it works and is worth the overhead on all but really huge forms with tons of controls.

    Ultimately though I've come to prefer marking up controls with pseudo classes rather than IDs. That makes it much easier:

    $(".txtName").blah()

    Still an extra step but an easy and also very explicit one.
  • @John - great idea. I wrote the original StackOverflow item that you discuss as a result of running into this issue while adding jQuery support to DotNetNuke. This selector would definitely simplify things a little.
  • "Since INamingContainer-generated IDs always end in the ID you specify in your ASPX markup, it works."

    What happens when you have two user controls on a page, each with a textbox1? These will be client-ized by msft as something like ctl01_textbox1 and ctl02_textbox1. Which textbox1 will your code select?

    You could tell developers on large projects to communicate with one another and make sure their user controls absolutely never have nested controls with overlapping names, but ...

    (BTW - great blog!)
  • I don't usually need to select just one item in a repeater, so that's not an issue for me. This code would select all matches and act on them all. That might be what you want anyway.
  • You should subscribe to the jQuery list on google groups... people on there are amazing and can give feedback to people of all levels - even if I dont have time to read it most of the time (as its very popular) its still great for posting a quick question like this and seeing what you get back :¬)

    Wish i had more time to actually offer a suggestion too, i dont think you need to extend jQuery to do what you want :¬)
  • I posted a question about this on the mailing list and didn't get a response.
  • You're been voted!!
    Track back from http://webdevvote.com/Tips_And_Tricks/Custom_jQ...
  • Hey John. I just upgraded to jQuery 1.3 and I am receiving an error when trying to use your custom selector. Have you experienced any problems when upgrading to 1.3?

    I will continue to look into the situation myself and let you know if I find anything.

    Thanks.
  • I just figured out how to update this to make it work.

    Instead of using:
    jQuery.extend(
    jQuery.expr[":"],
    {
    asp: "jQuery(a).attr('id').endsWith(m[3]);"
    }
    );

    Use this instead:
    jQuery.extend(
    jQuery.expr[":"].asp = function(a,i,m) {
    return jQuery(a).attr('id').endsWith(m[3]);
    }
    );

    Hope this helps out
  • Thanks Tim. I was actually going to revisit this tonight, so I'll
    include this in any update I post.
  • I noticed that this doesn't work in Internet Explorer when testing (an error like 'attr(...)' is null or not an object. I figured this meant that it was trying to apply endswith on an object that is undefined. I was able to make it work by:

    jQuery.expr[":"].asp = function(a, i, m) {
    return jQuery(a).attr('id') && jQuery(a).attr('id').endsWith(m[3]);
    };

    May perform slightly better if it is formed like this:

    jQuery.expr[":"].asp = function(a, i, m) {
    return (id = jQuery(a).attr('id')) && id.endsWith(m[3]);
    };

    Either way, it works fine in Internet Explorer now.
  • Thanks, I'll make note of this here: http://john-sheehan.com/blog/updated-webforms-c...
  • Thanks for this. I think you should alter it though, so that either the entire string has to match, or it has to end with an underscore followed by the search term. Otherwise it can match other elements which end in the same string.
  • function SelectByID(type, endPart)
    {
    return element = $(type + "[id$=" + endPart + "]");
    }

    seemed to do the trick for me,
    also using _ as leading in the endpart to avoid mismacthes.
  • Recently I made a post about custom jQuery selectors and thought you might find it usefule. It explains how one can create a custom selector WITH parameters:

    http://jquery-howto.blogspot.com/2009/06/jquery...

Add New Comment

Returning? Login