Wednesday, April 6, 2011

Sizzle Selector Engine Error

I'm attempting to use jQuery and ASP.NET. I am pasting the server control "ClientID" into a jQuery selector and I'm getting an error (with no error text) from the Sizzle selector engine.

My selector looks like this...

$('#ctl00_ContentPlaceHolder1__phProfileHeader__filProfileImage')

Is it the length that might be causing the problem? I've re-checked the control ID several times in the client code and everything seems fine. So what's the deal? I use the same strategy in several other places and they work fine.

From stackoverflow
  • I don't get any errors. I don't think is jQuery related. Can you pass the error?

    $(document).ready( function(){
        console.log( $('#ctl00_ContentPlaceHolder1__phProfileHeader__filProfileImage'));
    });
    

    Returns the div.

  • That's pretty strange. Something that I have seen used when dealing with those long ASP.NET generated IDs is jQuery's content filters. For example, this one will look for element's who's id attribute ends with "filProfileImage":

    $("[id$=filProfileImage]")
    

    Try that and see if it helps.

    http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue

    redsquare : Will be ultra slow as it will parse each element rather than use the native getElementById
    Nick Riggs : I wasn't aware this question had to do with performance. I should also mention that this solution helps with code maintainability. For example, if the control filProfileImage is wrapped in another server control someday, the id will change to: ctl00_ContentPlaceHolder1__phProfileHeader__someNewPanel__filProfileImage Which means if you are using an exact ID in your JS, you have to hunt it down and change it. As long as the id of the server control filProfileImage doesn't change, this answer should always work - no matter where you move it in your aspx file.
  • Are you sure the error is happening in Sizzle?

    I would check to see what you get with

    document.getElementBy('ctl00_ContentPlaceHolder1__phProfileHeader__filProfileImage');
    

    just to make sure the dom is available. Not that sizzle should care, but...

    Please post your error message.

    Cheers

0 comments:

Post a Comment