JQuery selector not working while javascript DOM works fine

Question

I am having troubles using JQuery to select the correct element. Using javascript DOM is working fine, but with JQuery I can not seem to get the correct element...

This is working fine (the 'medium' length is 1, the 'small' length is 0) :

var medium = document.getElementById("Ribbon.Documents.WorkflowButtons.Workflow" + button + "-Medium");
var small = document.getElementById("Ribbon.Documents.WorkflowButtons.Workflow" + button + "-Small");

alert("Medium: " + jQuery(medium).length + " - Small: " + jQuery(small).length + " - State: " + workflowButtonState);

While this is not working (both lengths are equal to 0, which is not correct):

var medium = jQuery("#Ribbon.Documents.WorkflowButtons.Workflow" + button + "-Medium");
var small = jQuery("#Ribbon.Documents.WorkflowButtons.Workflow" + button + "-Small");

alert("Medium: " + jQuery(medium).length + " - Small: " + jQuery(small).length + " - State: " + workflowButtonState);

Another not working example is when using .html()

Working (returns the html):

var button = document.getElementById("Ribbon.Documents.WorkflowButtons.Workflow" + buttonId + "-" + state);
$(button).css("display", "none");
alert($(button).html());

Not working (.html() return NULL)

var button = $("#Ribbon.Documents.WorkflowButtons.Workflow" + buttonId + "-" + state);
$(button).css("display", "none");
alert($(button).html());

Any idea why this is happening? I am executing this on the same page. So the same HTML elements etc. results should be the same, no ?

I have verified the "document.readyState" being equal to "complete"

PS: I have used two syntaxes: jQuery and $. This was to make sure there were no other issues.

Thanks !

I think the error is due to dot in the name of your id. Try this : http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot — , Sep 10 '12 at 08:20
Ye, it's the same answer anyway. Sorry mate :) Thanks for helping anyway!! — Frederik Prijck, Sep 10 '12 at 11:54

score 1 · Accepted Answer · answered Sep 10 '12 at 08:36

Periods have a special meaning in jQuery. So you need to escape them with a slash. Unfortunately, the slash is also the escape character for Javascript strings, so you have to use double-slashes:

jQuery("#Ribbon\\.Documents\\.WorkflowButtons\\.Workflow" + button + "-Medium");

JQuery selector not working while javascript DOM works fine

1 Answers1