I need to disable the button based on the selected row of t:dataTable.
This is the javascript method I'm calling on the row selection event
(the button should be disabled if an item in the selected row has a tooltip... it's ugly, but it was the easiest thing to do):
function processUpdateButton() {
if (!$(".selectedRow").length
|| $(".selectedRow").children().find(".tooltip").length){
$(".Update").button({disabled:true});
} else {
$(".Update").button({disabled:false});
};
}
This is the JSF commandLink:
<h:commandLink id="update" styleClass="Update iconButton"
action="#{myBB.update}"
value="#{gui['button.update']}"
tabindex="301"/>
Setting disabled attribute to the button works. The button is greyed out and if I hover the mouse over it, the cursor doesn't change as it does for other links. The problem is, that I can still click it and the method in the backing bean is called. Is there some way to prevent that?
Here's the rendered disabled button:
<a id="mainForm:update"
class="iconButton ... ui-button-disabled ui-state-disabled"
onclick="return myfaces.oam.submitForm('mainForm','mainForm:update');"
href="#" role="button" aria-disabled="true" disabled="disabled">
<span class="ui-button-text">Update</span>
</a>
I should probably remove the onClick attribute, but I don't know how I would be able to reenable it again.
Of course I can check the condition on the server after clicking the Update button, but that's the last resort. It would be nice if I could completely disable the button generated by JSF only from javascript without call to the server.
So I've found the solution. I copied the onclick attribute to another attribute on disabling button and vice versa:
var onclick;
if (!$(".selectedRow").length
|| $(".selectedRow").children().find(".tooltip").length){
$(".Update").button({disabled:true});
onclick=$(".Update").attr('onclick');
$(".Update").attr('onclick2',onclick);
$(".Update").removeAttr('onclick');
} else {
$(".Update").button({disabled:false});
onclick=$(".Update").attr('onclick2');
$(".Update").attr('onclick',onclick);
$(".Update").removeAttr('onclick2');
};
As you can see the generated html code is not a button but hyperlink. So you need to remove the link from link tag. Could try follows:
$(".Update").removeAttr('href');
Related
I am using Java and chromedriver. So far I used the following code to simply click on a button, then a small window popped up and I clicked another button. Interestingly I had not to change to any frame. All worked fine. Here is the code:
// click on button
driver.findElement(By.xpath(hyperlink_take_order)).click();
// a second small window popped up and I clicked another button
driver.findElement(By.xpath("//a[contains(text(),'accept')]")).click();
So far I used xpath to identify the buttons I need to click.
From time to time there is an additional checkbox (sometimes multiple checkboxes) on the second small window which I all need to click on. I tried to find them via xpath but found out that xpath did not work here. All I get in HTML is something like this:
The number in the brackets [] in this case 17232 vary each time, therefore I cannot find a name I can use for the checkbox. I read many articles on stackoverflow and found this peace of code which also did not work.
// click on button
driver.findElement(By.xpath(hyperlink_take_order)).click();
// a second small window popped up
try
{
driver.switchTo().frame(driver.findElement(By.tagName("iframe")));
System.out.println("change to iframe worked");
List<WebElement> CHECKBOXlist = driver.findElements(By.xpath("//input[#type='checkbox']"));
for(WebElement checkbox : CHECKBOXlist)
{
System.out.println("there was a checkbox");
System.out.println(checkbox.getAttribute("name"));
checkbox.click();
}
driver.switchTo().defaultContent();
}
catch (Exception e)
{
System.out.println("there was no checkbox");
}
driver.findElement(By.xpath("//a[contains(text(),'accept')]")).click();
<div class="md-checkbox product-service md-theme-whitebackground">
<div tabindex="0" class=md-checkbox-container">
<input name="service[17232]" tabindex="-1" id="service_17232" type="checkbox" value ="1" />
</div>
<label class="md-check-label" for="service_17232">This one is blue</label>
</div>
Do you have any idea how I can simply click on all (sometimes multiple) checkboxes on the second small window? Thanks
I have below html code snippet for radio button .
<label for="exceptionTrue">
<span/>
<span class="check" style="background: #F3565D;"/>
<span class="box"/>
Yes
</label>
HTML displayed is the same if the radio button is selected or if not selected in the page.
Element is in span class='check' if the radio button is selected and is in span class='box if not selected.
Since the html code is present in page if the radio button is selected or not selected.So i cannot user verifying if class='check' .
.Any idea how i can verify this...I have tried is.Selected and it doesn't work
Well I don't see a problem here, you know how this radio button works and you just need to implement this verification. Find your radio button element and than:
if (element.getAttribute("class").equals("check")){
return true; }
else {
return false; }
This is just an example, you can adjust this to your code.
EDIT: When I read your question again it's really unclear so I'm not sure if this helps. You need to provide more details on this.
I am trying to click on some button (which becomes enabled after all of the fields are fill in):
<div class="savCancelContainer">
<input type="button"
value="Save"
translatekey="ACTVITY_DETAILS_SAVE_BUTTON"
class="translate" id="submitActivityDetails"
style="background-color: rgb(0, 125, 195);">
The programmers of the web-page have changed it for some reason, and now my code is no longer working correctly (the button doesn't get clicked on):
driver.findElement(By.id("submitActivityDetails")).click();
I also tried finding it by xpath, with no success.
Is there any way to click the button using the Id and Value attributes together?
Any other ideas?
Similar pages and dialogs are still working fine...
You need to create a xpath which will contain both the attribute:
//input[#id='submitActivityDetails'][#value='Save']
And Click event can be triggered in the following way:
driver.findElement(By.xpath("//input[#id='submitActivityDetails'][#value='Save']")).click();
Lemme know if it helps!
Additionally you can use css seelctor to perform that action too.
[id='submitActivityDetails'][value='Save']
Hi
I want to set focus on <h:inputText> element whenever rich:panelBarItem is opened.
I have:
<rich:panelBar>
<rich:panelBarItem onenter="setFocus();">
<h:inputText value="#{bean.value}"/>
</rich:panelBarItem>
</rich:panelBar>
it works fine when I open it with mouse click, but does not work first time when first panelBarItem is automatically opened.
How should I set focus on first opened panelBarItem? I really would like it to be some event(I could not find) on rich:panerBarItem or rich:panelBar.
You can call your method after page load to set focus to field. Something like
<script>
//call after page loaded
window.onload=setFocus();
</script>
or
<body onload="setFocus();">
Here is my what I have
<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">
So in my jsp file, I use javascript and jQuery to manipulate the content of those two div dynamically. For example, if I click on changeA, the function createTableA() will dynamically manipulate <div id=A></div> and append a table to it. So my question is if I click on changeA, then click changeB, how can I manipulate the history so that if I click the back button, I go back to the content of Table A
I've been using the jQuery History plugin for just this sort of thing and it's been working pretty well for me.
Each "page" is referenced by a hash in your URL. That way "changing pages" doesn't refresh the page, but does store the page state in history and allow for bookmarking.
EDIT
I'll expand on the example given in the link to apply more for your situation.
function loadTable(hash)
{
if(hash == "ChangeA")
createTableA();
if(hash == "ChangeB")
createTableB();
}
$(document).ready(function() {
$.history.init(loadTable);
$("input[id^='Change']").click(function(){
$.history.load(this.attr('value'));
return false;
});
});
What the above code does is sets an event handler on all input tags whose id begins with 'Change' so that when those buttons are clicked, loadTable is called. If you change your buttons to look like this:
<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">
clicking button A will put this http://www.example.com/yourpage.html#ChangeA in the address bar and load table A, also adding that table change to the browser history.
The native 'location' object has a 'hash' property that you could use for navigation in AJAX/JS applications.
You could use History plugin or Address plugin.
Address plugin gives more flexibility and recommended for more complex apps.
You should check out Ben Alman's Back Button and Query Library Great api for mucking with the browser history and has some great examples to get you started.
YUI also has a browser history manager: YUI3: http://developer.yahoo.com/yui/3/history/ or YUI 2: http://developer.yahoo.com/yui/history/