JQuery selector not finding ID

Question

Beating my head against a selector issue and hoping someone has some insight. Context is that I am developing a Mediawiki extension that is adding on some enterprise specific functionality to the edit page. Latest GA MediaWiki contains JQuery 1.11.3.

In this snippet, I am trying to add a section with a dynamically created table. Most of the code is working, so I have some confidence that JQuery is loading adequately in the environment. The selector leading up to the alert statement, which tries to find a text box if searchable, is not working. The text box does show up on the page and IE and Edge both show the ID as what is shown in comments. The selector always comes up with length zero. I wonder what I am missing. Is it the way I am handling various quote syntaxs? You can see I tried to simplify the "source" aspect by using an array source, rather than the JSON source I want to use, so use "Charl" as the test phrase if you try to test.

function addProviders(subjectType, data) {
var title = mw.config.get("wgTitle");
var html = '<div class="mw-portwizard-sourcelist" id = "mw-portwizard-sourcelist"></div>';

if (!$('#mw-portwizard-sourcelist').length) {
    $(".templatesUsed").after (html);
}

html = '<div tabindex="0" id="mw-portwizard-sourcelistcontent" class="mw-editfooter-toggler mw-icon-arrow-expanded ui-widget" role="button"><p>Sources available for this page:</p></div>';
$('#mw-portwizard-sourcelist').html(html);
html =  '<table id="mw-portwizard-sourcetable"><tbody></tbody></table>';
$('#mw-portwizard-sourcelistcontent').html(html);

var tbody = $("#mw-portwizard-sourcetable").children('tbody');
var table = tbody.length ? tbody : $("#mw-portwizard-sourcetable");
mw.log ("table:" + table);
//TODO: use jquery data to hold the type
//html += '<input type="hidden" value="' + type +'" name="mw-portwizard-sourcetype" id="mw-portwizard-sourcetype" />';

//TODO: Make this WORK!
$.each(data, function(index,value) {
    var html = "<tr id='" + value.PortWizard.id +"-row'><td>" + value.PortWizard.url + "</td><td>" + (value.PortWizard.searchable ? '<input type="text" id="' + value.PortWizard.id +'-text" value="' + title + '">' : title) + "</td></tr>";
    table.append(html);

    if (value.PortWizard.searchable) {
        $selector = "#" + value.PortWizard.id + "-text";
//      $selector = "#en.wikipedia.org-text";en.wikipedia.org-text
        $prompt = $selector + ":" + $($selector).length; 
        alert ($prompt);
        $($selector).autocomplete({ 
/*            source: function(request, response) { 
                     new mw.Api().get( {
                        action: 'PortWizard',
                        provider: value.PortWizard.id,
                        subjectType: 'search',
                        query: request.term                         
                  }).done( function (data){
                      response(data);
                  });
            },*/
            source: ["Charles De Gaulle Airport", "Charlie Brown"],
            minLength :3
        });
    });
}

html += "<button type=\"button\" onclick=\"getPageContent(event,'" + subjectType + "')\">Get Text</button>";

$('#mw-portwizard-sourcelist').append(html);

}

Thanks,

Jason

The ID I am testing with is "en.wikipedia.org". It is part of a JSON response which also includes attributes like URL (a string), searchable (a Boolean), and validated (also a Boolean). Great question which makes me wonder if the periods in the value create this issue and I need to rethink my naming convention. — IowaJason, Oct 28 '15 at 01:24

score 1 · Accepted Answer · answered Oct 28 '15 at 01:29

According the jQuery's documentation for selectors, you need to escape . with two backslashes \\.

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

So instead of

$selector = "#" + value.PortWizard.id + "-text";

You should change it to this

$selector = "#" + value.PortWizard.id.replace(/\./g, "\\\\."); + "-text";

Thanks. Another http://stackoverflow.com/questions/739695/jquery-selector-value-escaping article showed details on how to do this robustly. — IowaJason, Oct 29 '15 at 21:59

score 0 · Answer 2 · answered Oct 28 '15 at 02:34

Not a good idea to use meta-characters in a selector. @Griffith has correctly shown how to deal with them if they do exist in a selector. As an alternative, instead of using the selector #<id> you can the form [id=<id>] and quote the value <id> as follows:

$('[id="en.wikipedia.org"]')......

This is something you can do easily while constructing the selector string:

$selector = "[id='" + value.PortWizard.id + "-text']";

$('[id="en.wikipedia.org"]').html(function(_, html) {
    return html + ' FOUND';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="en.wikipedia.org">TESTING</div>

JQuery selector not finding ID

2 Answers2