[Note] jQuery を困らせる製品 - A certain product against the jQuery [jQuery]

突然ですが、jQuery セレクターといえども、指定されたセレクターを解決できずに、降参することがあるよ、という話です。

I'm sure that there are some cases that the jQuery selector can't work as usual and should throw something exceptions, because jQuery doesn't support some strange usages.

自分が経験したのは、ASP.NET Web フォーム用の、某サードパーティ製コントロール コンポーネントの場合。

I experienced one of the situation when I used the control component product by the certain third party, for the ASP.NET Web Form.


When I saw the demonstration, I felt good about the product, and I decided to adopt the product in my next Web App project.


On the other hand, the system users required me to change the appearances of the error controls to attract attention.

jQuery を使って、定型的な実装を組み込みました。

Using jQuery, I incorporated typical implementation.

Page_Validators の中で IsValid が false の Validator の controltovalidate の色を変えるってやつです。

The process I implemented looked for the error controls with watching the IsValid property of Validators in Page_Validators, and set the appearance of the element specified by the controltovalidate property of the Validator as the id.

ところが、特定のコントロールでエラーを発生させると、外観変更部の jQuery セレクターが例外をスローするんです。

But, when the particular control's error occurred, the jQuery selector in above process threw the exception.

ちょっと調べてみたら、マークアップで ControlToValidate 属性に設定したコントロールのクライアント ID と、クライアントの controltovalidate プロパティの内容が違っていて。

After some my trace, I found  there was a difference between the "ControlToValidate" attribute in aspx markup for Validator Control and the "controltovalidate" property in the Client Validator Control.

controltovalidate には、たぶん内部の編集用エレメントの id なんでしょうが、知らない文字列が設定されている。

I didn't know the content of the "controltovalidate"; I thought it should be the client id of the something inner editable element among the component control.


And I found some colons (:) as the letter of the client id string.

jQuery セレクターに渡す文字列の中のコロンはフィルターのプレフィックスですから、id 文字列の中にコロンが含まれるのはまずいですよね。

I knew jQuery selector parses colon as the prefix for the filters, so I understood it was bad situation for jQuery.

こういう状態のエレメントを id から抽出しようとすると、jQuery セレクターはお手上げです。

When the jQuery selector was called with such above id, it should throw an exception.


I accept the secret tricks, but using colon as a letter of the id string of elements is bad.

なお、そういう id を持つエレメントでも、Native JavaScript の getElementById とかだと、ちゃんと取得してくれます。

In addition, the Native JavaScript getElementById method accepts even the elements having such id.

今回のケースでは、空の jQuery セレクターに対して、controltovalidate プロパティで特定されるエレメントを getElementById で取得して追加していくという方法を取りました。

With this case, I took the method that I got the element identified by controltovalidate property with getElementById method and added it into empty jQuery selector.


I am glad that the component made in a third party provides various extensions, but ...

ここだけの話、こっそりつまんねー小細工すんなよ ... と思いました。

However, I never want bad secret tricks of their products.

【Tips】jQueryセレクターで複数のセレクター属性を指定する [jQuery]

ネット上であんまり情報を見かけたことがないので、Tips として掲載します。

jQuery セレクターでは、セレクターに抽出させたい情報を文字列で記述しますが、この際に複数のセレクター属性を設定できます。

以下の例では、class 属性が "myclass" のチェックボックスをすべてチェック状態にします。

$("input[type='checkbox'][class='myclass']").attr("checked", "checked");

マークアップが煩雑化している古い Web システムの保守をするときに、重宝しています。