Develop Reference

Finding Certain Element Using XPATH with Not Contains

I am trying to search for a specific object inside a html website that the only difference is a disabled="". I have attempted to several attempts but none have been successful.
Problem:
There is two buttons displayed one that is active and the other one is disabled. My goals is to try to find the xpath only for the one that is enabled. I have attached the HTML for both buttons below.
HTML:
<button _ngcontent-skh-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327109">submit </button>
<button _ngcontent-ylw-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327008" disabled="">submit </button>
Xpath:
//*[(contains(#id, 'price-submit-')and not(contains(#disabled," ")))]
This XPATH returns a finding of two elements when I am expecting only one.
Any help would be appreciated.

The problem is your xpath isn't expressing what you really want. You're asking for elements that do not have a disabled attribute whose value contains a single space. Both do not, so both are selected.
It seems like what you really want is the element that has no disabled attribute whatsoever. Try this:
//*[(contains(#id, 'price-submit-')and not(#disabled))]
or
//button[(contains(#id, 'price-submit-')and not(#disabled))]

Javascript returns undefined with asp.net master pages

I'm running into a bit of an issue. My JavaScript function returns "undefined" when using master pages. However, when I'm not using master pages, it works fine. Here is my code:
HTML:
<input id="txtPhoneNumberAreaCode" class="TextBox" runat="server" type="text" onkeyup="GoToNextTextBox(this.id, 3, 'cphMainArea_txtPhoneNumberFirstThree')" />
The Javascript:
function GoToNextTextBox(CurrentTextBox, MaxCharLength, NextTextBox) {
alert(CurrentTextBox.value);//pops up "undefined"
if (CurrentTextBox.value.length == MaxCharLength) {
NextTextBox.focus();
NextTextBox.style.backgroundColor = '#FFFFFF';
}
Again, this works fine when not using master pages. So I'm completely confused.

This is because, you are doing it wrong.
In GoToNextTextBox(), you are expecting a DOM element, but you are passing only its id.
DO this:
<input id="txtPhoneNumberAreaCode" class="TextBox" runat="server" type="text"
onkeyup="GoToNextTextBox(this, 3, 'cphMainArea_txtPhoneNumberFirstThree')" />

When using master pages and user controls the rendered ID of your controls change, but there is a way to stop it.
Let's say you have a Textbox
<asp:Textbox id="txtName" runat="server"></asp:Textbox>
on a standard asp page, it's id will be as you expect, txtName
Now you add a master page, called Site.Master. In your rendered html, the controls name is now different.
cntl1_Site_txtName
I might have the syntax of the new name a bit off, but you can view source and find it for yourself.
There is a way to control that though. There is a property on your page, ClientIDMode.
If i remember correctly it has 3 or 4 options. Auto ID is default I believe.
If you set it to static for that page, then you will no longer get the verbose control IDs, they will be as you expect.
This can be a downfall when using things like Repeaters though. You will not have easy access to specific fields if they do not have the verbose ID

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.

jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});

I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...

In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!

I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.

Primefaces ab method

I'm really getting confused by some code. I'm in the process of converting a giant Scala app over to Java. It's a web-app, and uses PrimeFaces for the User interface. However, there are a few things that are throwing me. One is this code snippet:
<td><button id="search:j_idt30" name="search:j_idt30"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
onclick="PrimeFaces.ab({formId:'search',source:'search:j_idt30',process:'#all',update:'meetingIndices'});return false;"
type="submit"><span class="ui-button-text">Submit</span></button></td>
I've noticed a call to the ab method. I've been hunting for documentation for a few hours now, and I can't seem to find anything. Does anyone know what the ab method does?
The second question is: Can anyone give any insight into the function of this code? I'm trying to work out which bit of Scala code is called, but as far as I can tell it's just an AJAX request to the index.xhtml page.
Edit
<p:commandButton type="submit" value="Submit" update=":meetingIndices" />
I think that is the tag generating the submit button.

One of "My" uses to ab method is to update some components inside javascript code.
some times remoteCommand doesn't fit in the situation.
So I have to update some components at runtime using jQuery selectors (complicated ones not by name or class).
Let's say I want to update all the p:lightBox links in the page (in order to empty the iFrames)
$('.ui-lightbox').each(function() {
PrimeFaces.ab({source:'',update:$(this).attr('id').replace('_panel','')});
}
Hope it helps.

is ID of html controls which called by javascript casesensitive or not

i have this control
<input id="btnBackMP" type="button" value="<" onclick="BackGroup('MP') ;"
disabled="disabled" style="background-color: #BF0000; width: 28px;" />
inside backGroup Function i used this Code Line :
document.getElementById('btnback' + Key).disabled = true;
this line works fine on Web Dev but when i published my site on server (iis 7)
this line stop working till i changed it to the following :
document.getElementById('btnBackMP'+ Key).disabled = true;
any one have idea ?
thanks

Have you changed in calling function argument too since before your are passing 'MP' as argument and using as key
<input id="btnBackMP" type="button" value="<" onclick="BackGroup() ;"
disabled="disabled" style="background-color: #BF0000; width: 28px;" />
and why do not you directly change to this line only :-
document.getElementById('btnBackMP').disabled = true;

Element id is case sensitive. The id must be unique but in theory you could use id="elementa" and id="elementA" in the same document to refer on two different nodes.
This is not recommended
Further details on
https://developer.mozilla.org/en-US/docs/DOM/element.id

The id attribute values are case-sensitive by HTML specifications; see e.g. HTML 4.01 on id. They are thus case-sensitive when used in JavaScript too. Note that the document.getElementById method queries the DOM, which must follow HTML conventions here.
So btnbackMP and btnBackMP are distinct id values. Your code seems to have another error too, as pointed out, but this might be just an issue in formulating the question. (I suppose the last code line was meant to have btnBack not btnBackMP.)