I have a scenario where user click on Add Address button and Address Detail Modal dialog window is appeared,
It have 4 elements two text boxes for address detail info and two button Add and Cancel.
I am able to click on cancel and Add button in Model Dialog Window directly, but unable to locate text boxes inside it.
Below is code for text box in Modal Dialog Window.
input id="Address" class="form-control" type="text" value="" name="Address" data-toggle
="tooltip" data-placement="bottom" data-bind="value:Address, ValidationMessage: Address"
data-original-title="" title=""
How to access modal box element as Model Dialog window is part of same window
so Alert and Window switching methods might be not useful in that case ?
Please any advice?
Update Sample code that i am trying.
// Click on Address link It open Model window
driver.findElement(By.xpath(".//div[#id='member_78121']div/table/tfoot/tr/td/div/button")).click();
here i am giving wait condition.
//Inside modal window
//TextBox first
driver.findElement(By.id("AddressLine1")).sendKeys("plot no-23");
//textbox second
driver.findElement(By.id("AddressLine2")).sendKeys("plot no-23");
//Add button
driver.findElement(By.id("Add")).click();
// driver.findElement(By.id("Cancel")).click();
here i am able to click on Add or Cancel button if you comments text boxes code but
i am getting error for textboxes "element is not visible"
This is Add button code for reference
button id="Add" class="btn btn-default" value="Add" type="button" title="" name="Add"
data-toggle="tooltip" data-placement="bottom" data-bind="click:$parent.SaveAndCloseAddressPopup, Tooltip:$parent.SaveAndCloseAddressPopup"
data-original-title="Save changes and close"
// Click on Address link It open Model window
driver.findElement(By.xpath(".//div[#id='member_78121']div/table/tfoot/tr/td/div/button")).click();
here i am giving wait condition.
//Inside modal window
//TextBox first
driver.findElement(By.id("AddressLine1")).sendKeys("plot no-23");
//textbox second
driver.findElement(By.id("AddressLine2")).sendKeys("plot no-23");
//Add button
driver.findElement(By.id("Add")).click();
// driver.findElement(By.id("Cancel")).click();
here i am able to click on Add or Cancel button if you comments text boxes code
but i am getting error for textboxes "element is not visible"
this is Add button code for reference
button id="Add" class="btn btn-default" value="Add" type="button" title="" name="Add" data-toggle="tooltip" data-placement="bottom" data-bind="click:$parent.SaveAndCloseAddressPopup, Tooltip:$parent.SaveAndCloseAddressPopup" data-original-title="Save changes and close"
driver.findElement(By.id("AddressLine1")).sendKeys("plot no-23");
this try this
driver.findElement(By.id("Address")).sendKeys("plot no-23");
as your sample code snippet for input box is
input id="Address" class="form-control" type="text" value="" name="Address" data-toggle
="tooltip" data-placement="bottom" data-bind="value:Address, ValidationMessage: Address"
data-original-title="" title=""
here you can clearly see id of the input tag is Address not AddressLine1
Related
What I am trying is, to disable the action of close in ng-dialog pop up until any other button is clicked.I want to do that until I give some text on input in pop up and click on save button the pop up should not be closed either by into (*) mark
Suppose you have a template of pop up like below :
<button type="button" ng-click="closeThisDialog('button')" ng-disabled="demoForm.$invalid" class="btn btn-default pull-right">x</button>
<br>
<form name="demoForm">
<h3>Close button disabled untill no input</h3>
<p>Here input field is required so untill input box is not valid you cannot close the dialoug.</p>
<p>Once you enter the input close btn will be enabled</p>
<input ng-model="confirmValue" required/>
<br>
<br>
<button type="button" ng-disabled="demoForm.$invalid" ng-click="closeThisDialog('button')" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-default">Save</button>
</form>
You can add form in your pop-up template just shown in above template.
Now as per your requirement user should not close the popup until he didn't enter any input so there is validation in form.
Just disable close button until form is not valid.
Check out this demo
You can refer more here in doc of ng-dialog.
the easiest way of having control over ngDialog via buttons is to change the default boolean of closeByDocument and showClose to false. Then you can only use buttons to exit.
--- HTML ---
<div class="btn-group menuSection">
<div class="menuGrid" ng-repeat="main in mains">
<button type="button" class="btn btn-default btn-sm btn-block"
ng-value="main" btn-radio="main" ng-model="$parent.selectedMain"
ng-click="setDish();"/>
{{main}}
</div>
<div class="menuGrid">
<input type="text" class="form-control input-sm"
ng-model="mainOtherText" ng-show="selectedMain == 'Other'"
placeholder="enter other here"/>
</div>
test : {{mainDish}}
</div>
--- JS ---
$scope.setDish = function(){
if ($scope.selectedMain == 'Other') {
$scope.mainDish = $scope.mainOtherText;
}
else {
$scope.mainDish = $scope.selectedMain;
}
};
I have a grid of radio buttons for selecting menu items, the last of which is 'Other'. When 'Other' is selected, a textbox shows up where the user inputs another item. My goal with the ng-click function is to update the variable mainDish with the value in the other textbox when 'Other' is selected.
This code works, however, the problem arises in that the variable mainDish only updates when the radio button is unselected.
Example - when a button is first clicked, it will have no affect on the variable mainDish, but then when another button is clicked mainDish is updated to the value of the first button clicked.
Any ideas on to why this is happening or ways I could fix it?
EDIT:
As per comment, I'll explain my code a bit more. I have a menu, a list of meals that the user picks from. This list is populated by the ng-repeat command grabbing from an array of meals and creating a radio button for each. The last item in the array is an item called 'Other'. When 'Other' is selected, a textbox appears so the user can input their own dish.
What I want: I want the variable mainDish to be assigned the value of the 'Other' textbox when the 'Other' radio box is selected. For all of the other items, the value of mainDish is just the value of the radio button, but this is not the case with 'Other'.
What I have: It works! But in an odd way. The variable mainDish is only updated when the radio button is deselected. Every time you click a new radio button, the variable mainDish gets assigned the value of the previous button. This is the problem I need help solving.
The problem is that ng-click fires before the ng-model code that updates the scope. If you change it to use ng-change, that will fix it. You also need to add ng-change to your text box to update the scope as the user types.
<div class="btn-group menuSection">
<div class="menuGrid" ng-repeat="main in mains">
<input type="radio" name="dishes"
class="btn btn-default btn-sm btn-block"
ng-value="main"
ng-model="$parent.selectedMain"
ng-change="setDish();"/>
{{main}}
</div>
<div class="menuGrid">
<input type="text" class="form-control input-sm"
ng-model="mainOtherText"
ng-show="selectedMain == 'Other'"
ng-change="setDish();"
placeholder="enter other here"/>
</div>
test : {{mainDish}}
</div>
Here is a working example: http://jsfiddle.net/bnzwx94b/2/
I have an ng-form="step1" which is populated with data from db.
When the user changes some thing in the input boxes or selects a different radio btn, I want to display a Update Button.
This button will be hidden at first.
How to do this?
Thanks for Help
use $dirty function of angularjs
example
<input type="button" class="btn btn-primary" value="update" ng-show="changedetect.$dirty" />
My understanding with forms, is that if the form has an ng-submit action associated with it, then pressing the Enter key would invoke that action, typically mimicking the click of the form's "submit" button. I have a form that does not have have a button, but a custom image of a button within a div tag and the div tag has the ng-click action. When I press Enter, nothing happens. What am I missing?
Make your button type submit and add a class attribute and style your button to make it an image like:
<form ng-submit="someAction()">
<button type="submit" class="submitbutton">Submit</button>
</form>
And do style your button in css like:
.submitbutton {
background:url('....') // your custom image
}
Then your custom image will act as the submit button and invoke the form action when click the enter key.
It worked for me by adding ng-submit, ng-controller & button type as submit
<form ng-submit="func()" ng-controller="MyController">
<button type="submit">Submit</button
</form>
if your form contains md-autofocus - remove it.
worked for me.
For Angular 13:
<form (ngSubmit)="search()">
<input type="text" id="inputword" />
<button type="submit" id="send" class="btn btn-lg btn-primary">Search</button>
</form>
Live Demo
Consider the following form:
<form>
<div>
<label>Status: </label>
<button ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id" btn-radio="status.id">
{{ status.name }}
</button>
</div>
<div>
<label>Name: </label>
<input type="text" ng-model="job.name">
</div>
</form>
When focus is on the name field, and Enter is hit, Status is set to "All Good" for some reason. Live Demo
Why is this happening? How could I stop this side effect?
From the ngForm docs:
This is because of the following form submission rules in the HTML
specification:
If a form has only one input field then hitting enter in this field
triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit]
then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons
or input[type=submit] then hitting enter in any of the input fields
will trigger the click handler on the first button or
input[type=submit] (ngClick) and a submit handler on the enclosing
form (ngSubmit)
Default type for the button element is "submit" (<button></button> === <button type="submit"></button>). Hence, when you hit enter, the first button is submitted.
To remedy, just put type="button" on your buttons.
<button
ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id"
btn-radio="status.id"
type="button"
>
{{ status.name }}
</button>