Leandro Tupone Leandro Tupone - 20 days ago 8
Javascript Question

Jquery Select an attribute with slashs

I'm trying to select an object with JQuery filtering by a value of an attribute that is a unique filename. I can't escape from slashes when the selector is made with a var. I lost 2 hours trying with multiple combinations but I think I'm missing something. Thanks in advance for the light

My HTML:

<table class="table table-condensed" id="CLKPMTable_2"><tbody><tr class="click-row" valuetype="PM" filename="\\server\folder\file1" paymentmethodid="1"><td class="col-md-1"><img width="24" height="24" src="/Content/img/123.png" id="PMURLIMG_"></td><td class="col-md-10" id="PM_FILENAME_">BO OCT</td><td class="col-md-1 text-right"><img width="16" height="16" src="/Content/img/notyet.png" id="PM_STATUS_"></td></tr><tr class="click-row" valuetype="PM" filename="\\server\folder\file2" paymentmethodid="2"><td class="col-md-1"><img width="24" height="24" src="/Content/img/visa.png" id="PMURLIMG_"></td><td class="col-md-10" id="PM_FILENAME_">O SEP</td><td class="col-md-1 text-right"><img width="16" height="16" src="/Content/img/notyet.png" id="PM_STATUS_"></td></tr></tbody></table>


My Javascript:

var filename = "\\server\folder\file1";
var selec = $('tr[valueType="PM"][filename="'+filename+'"]');
alert(selec.attr("paymentmethodid"));


Didn't work neither with:

var filenamescaped = filename.replace('\\','\\\\')
var selec = $('tr[valueType="PM"][filename="'+filenamescaped+'"]');


Also didn't work neither with (from: Jquery official doc to escape chars used in css):

function jq( myid ) {
return myid.replace( /(:|\.|\[|\]|,|=)/g, "\\$1" );
}

var filename = "\\server\folder\file1";
var filenamescaped = jq(filename);


My fiddler to make some test:
jsfiddler

Answer

The value's backslash needs, in this case, to be doubled twice for it to work as a valid selector

var filename = "\\\\\\\\server\\\\folder\\\\file1";
var selec = document.querySelector('tr[valueType="PM"][filename="'+filename+'"]');
alert(selec.getAttribute("paymentmethodid"));
<table class="table table-condensed" id="CLKPMTable_2"><tbody><tr class="click-row" valuetype="PM" filename="\\server\folder\file1" paymentmethodid="1"><td class="col-md-1"><img width="24" height="24" src="/Content/img/123.png" id="PMURLIMG_"></td><td class="col-md-10" id="PM_FILENAME_">BO OCT</td><td class="col-md-1 text-right"><img width="16" height="16" src="/Content/img/notyet.png" id="PM_STATUS_"></td></tr><tr class="click-row" valuetype="PM" filename="\\server\folder\file2" paymentmethodid="2"><td class="col-md-1"><img width="24" height="24" src="/Content/img/visa.png" id="PMURLIMG_"></td><td class="col-md-10" id="PM_FILENAME_">O SEP</td><td class="col-md-1 text-right"><img width="16" height="16" src="/Content/img/notyet.png" id="PM_STATUS_"></td></tr></tbody></table>

Updated

In your particular case the filename value need to be already escaped for the replace to work, as in var filename="\\\\server\\folder\\file1"

Do note the global switch in the replace command so it replace all occurrences

var filename = "\\\\server\\folder\\file1";
var filenamescaped = filename.replace(/\\/g,'\\\\\\\\');
var selec = $('tr[valueType="PM"][filename="'+filenamescaped+'"]');
alert(selec.attr("paymentmethodid"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed" id="CLKPMTable_2"><tbody><tr class="click-row" valuetype="PM" filename="\\\\server\\folder\\file1" paymentmethodid="1"><td class="col-md-1"><img width="24" height="24" src="/Content/img/123.png" id="PMURLIMG_"></td><td class="col-md-10" id="PM_FILENAME_">BO OCT</td><td class="col-md-1 text-right"><img width="16" height="16" src="/Content/img/notyet.png" id="PM_STATUS_"></td></tr><tr class="click-row" valuetype="PM" filename="\\server\folder\file2" paymentmethodid="2"><td class="col-md-1"><img width="24" height="24" src="/Content/img/visa.png" id="PMURLIMG_"></td><td class="col-md-10" id="PM_FILENAME_">O SEP</td><td class="col-md-1 text-right"><img width="16" height="16" src="/Content/img/notyet.png" id="PM_STATUS_"></td></tr></tbody></table>

Comments