I want to Trigger boot-strap model on click of disabled text-box or text Area
I have tried it but it works fine with text box if the text box enabled
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
Disabled elements don't fire click event on all the browsers, or all the inputs.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Try this:
<span class="disabled">
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
</span>
Javascript:
$('span.disabled').on('click', function(event) {
$('#myModal').modal('show');
});
OR if you want to collect the target from the input:
$('span.disabled').on('click', function(event) {
var modal_target = $(this).find('input').data('target');
$(modal_target).modal('show');
});
Related
The script fails with this error.
Error: element (".WONDERESC") still not displayed after 30000ms
Tried different combinations for Xpath, (relative, fixed, text()} and CSS selectors, but the button not clicked. The sign-in button div in the code block:
<div>
<div class="WONDERBSC" role="form">
<div>
<div class="WONDERJ1B" data-automation-id="userName">
<div class="TOM-Label WONDERP1B"
title="Username">Username</div>
<input type="text"
class="TOM-TextBox WONDERM1B" aria-label="Username">
<button type="button" class="TOM-Button WONDERN1B"/>
</div>
</div>
<div>
<div class="WONDERJ1B"
data-automation-id="password">
<div class="TOM-Label WONDERP1B" title="Password">Password</div>
<input type="password" class="TOM-PasswordTextBox WONDERM1B" aria-label="Password">
<button type="button" class="TOM-Button WONDERN1B"/>
</div>
</div>
<button type="button"
class="WONDERESC"
data-automation-id="goButton">Sign In</button>
</div>
</div>
Kindly suggest the workarounds - the other conditions are also meeting- visibility-true, display-block, opacity not zero.
Thanks,
Tan
If element is not displayed then you have to make it visible
Case 1
The element takes some time to be visible automatically
In this case, you can use webdriver wait
WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("xxxx"));
Case 2
Element is visible after some interaction like mouse movement or click or type
Then you have to perform that action with selenium. For mouse movements you can use action classes
As it was told in the comments, you are using invalid selectors.
Assuming you have the latest WebdriverIO v6, the following works like a charm
// open page
browser.url('https://impl.workday.com/wday/authgwy/accenture_dpt2/login.htmld?redirect=n')
const form = $('[data-automation-id="authPanel"] [role="form"]')
// make sure form is visible
expect(form).toBeVisible()
// define form data
const formData = [{
id: 'userName', value: 'test'
}, {
id: 'password', value: 'password'
}]
// fill form
formData.forEach(f => {
form.$(`[data-automation-id="${f.id}"] input`).setValue(f.value)
})
// submit form
form.$('button[data-automation-id="goButton"]').click()
// make sure error message exist
const errorMessage = $('[data-automation-id="alertMessage"]')
expect(errorMessage).toBeVisible()
expect(errorMessage).toHaveTextContaining('Invalid user name or password')
I add a Radio button with the function appendChild to the opener window. That works fine in Firefox and Chrome, but not in Microsoft Edge.
From the first HTML page I call with form Action a new targed window. Inside this window I placed a Javascript that insert with appendChild a new Radio Button on the first opener Window. The Code works fine in Firefox and Chrom. In MS Edge it has an error with the appendChild command.
Part of HTML Code from the first Window
//Position of Radio button
</td><td id="logos">
<input type="radio" name="logo_radio" value="test5.jpg" checked>test5.jpg<br>
<input type="radio" name="logo_radio" value="malvorlagenfeuerwehr04.jpg">malvorlagenfeuerwehr04.jpg<br>
</td></tr>
//Calling now window with a button:
<input name="logo_test" type="button" onclick="document.formLogo.submit();" Value="Neues Logo laden">
<form name="formLogo" enctype="multipart/form-data" action="add_logo.php" method="post" accept-charset="ISO-8859-1" target="_blank">
<input type="hidden" name="id" value="{$_POST['id']}">
<input type="hidden" name="eintrag" value="$eintrag">
</form>
Javascript function in the second Window:
<script type="text/javascript">
try {
var newRadioButton = document.createElement("input");
newRadioButton.setAttribute('type','radio');
newRadioButton.setAttribute('name','logo_radio');
newRadioButton.setAttribute('value','$file_new');
var obj1 = window.opener.document.getElementById("logos");
obj1.appendChild(newRadioButton);
}catch(err) {alert(err.message);}
</script>
IE returns a error message "SCRIPT 65535: invalid argument"
Manny thanks for your help.
I found the solution. The new Radio element have to create into the opener window:
var newRadioButton = window.opener.document.createElement("input");
I have a form with a radio-button group:
<form name="search" class="form-inline" asp-controller="controller" asp-action="action" method="get">
<div class="btn-group" data-toggle="buttons">
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("AM")" onclick="document.search.submit()">
<input type="radio" name="time" value="am" autocomplete="off">AM
</label>
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("PM")" onclick="document.search.submit()">
<input type="radio" name="time" value="pm" autocomplete="off">PM
</label>
</div>
</form>
#ActiveTime:
public string ActiveTime(string time)
{
if (ViewData["time"].ToString() == time) { return "active"; }
return "";
}
Relevant section of controller\action:
string time = ( (String.IsNullOrEmpty(HttpContext.Request.Query["time"].ToString())) ? "am" : HttpContext.Request.Query["time"].ToString() ).ToUpper();
ViewData["time"] = time;
Clicking the AM or PM label will submit the form, but doesn't include the radio button's value. What am I missing?
It is not sending the value of the radio button because when user clicks on the label, the browsers javascript engine will execute the onclick event handler you wired up on that element. Your current handler will execute this code document.search.submit() which submits the form immediately, even before bootstrap library could adjust the radio button state.
You can solve the issue by hijacking the click handler and set the radio button value yourself and then submit the form (all in javascript).
Another option i would try is, to remove the form submit behavior from the radio button selection/click event. What if user want to change his selection ? I would create a separate "Submit" button for the form submission.
I also noticed you have onclick handler registered two times on your element. clean that up.
I have got some hidden buttons on the page. When I click on text input, one of these buttons shows on the page. Before:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
After click on second input:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit">Save</button>
</div>
So I try to interact with second button by next selectors in my test:
static content = {
submitButton { $("button.submit") }
}
but I have next error:
isorg.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
If I write:
static content = {
submitButton { $("button.submit", 1) }
}
it works, but I need to work with one first visible button on the page. What is wrong?
Unfortunately there is no css selector to find visible elements but you can use displayed property of Navigator and its findAll() method to find the button that is visible:
static content = {
submitButton { $("button.submit").findAll { it.displayed } }
}
I have a Form and i want to disable the entire form on click of a Button ,please see this code
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm" encType="multipart/form-data"
action="" method="">
<table>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"
</table>
<button dojoType="dijit.form.Button" type=button onClick="console.log(myForm.getValues())">
Get Values from form!
</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButton"
value="Submit">
Submit
</button>
<button dojoType="dijit.form.Button" type="reset">
Reset
</button>
<button dojoType="dijit.form.Button" onClick="callMe()">
Disable IT
</button>
</div>
I have written a function callMe to disable this
function callMe()
{
dijit.byId('myForm').disabled=true;
}
Dijit forms do not have a property "disabled", but rather you have to overwrite the onSubmit event:
dijit.byId('myForm').onSubmit = function () {
// If we return false here, the form will not be submitted.
return myMagicEnabledFlag;
};
Note that you cannot use dojo.connect as you have to modify the return value of the event and not just connect to it.
For disabling the entire form elements, use the "getChildren()" function of the dijit form, which would return the array of all the field widgets of that corresponding form. Then, you need to disable the widgets of that array. See below sample:-
dijit.byId('myForm').onSubmit = function () {
var widgets = dijit.byId('myForm').getChildren();
for(var i=0;i<widgets.length;i++) {
widgets[i].set('disabled', true);
}
//if you need to prevent the form submission & just disable, return false,
//else ignore the following return stmt
return false;
};