I am VERY new to Watir, trying to test a popup window and am unable to get my script to click the Cancel Target button. When running the script, I get an error: element not visible (Selenium::WebDriver::Error::ElementNotVisibleError. This is the script I am using:
browser.div(:class => "modal-footer").button(:class => "btn btn-danger").click
Below is the code:
<div class="modal hide fade" id="target_modal" data-bind="with: target">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text: BusinessName"></h3>
</div>
<div class="modal-body">
<div class="row">
<div class="span3">
<label for="FirstName">First Name</label><input id="FirstName" type="text" data-bind="value:FirstName" />
<label for="LastName">Last Name</label><input id="LastName" type="text" data-bind="value: LastName" />
<label for="Email">Email</label><input id="Email" type="text" data-bind="value: Email" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bind="click: saveTarget">
<i class="icon-white icon-ok"></i>
Save Target
</button>
<button class="btn btn-danger" data-dismiss="modal">
<i class="icon-white icon-remove"></i>
Cancel Target
</button>
</div>
</div>
Any help would be greatly appreciated. Thanks!
I assume that this popup is part of the page (ie just an div tag overlaying the rest of the page), rather than a new browser window popup.
My guess is that Watir is trying to click the button before the popup finishes being displayed. Explicitly telling Watir to wait for the button may solve the problem:
cancel_button = browser.div(:class => "modal-footer").button(:class => "btn btn-danger")
cancel_button.when_present.click
I got it to work. Justin Ko's 1st answer got me thinking and this worked:
cancel = browser.div(:id => "target_modal")
cancel.div(:class => "modal-footer").button(:class => "btn btn-danger").i(:class => "icon-white icon-remove").click
Related
I am wanting to Edit Article in the database with ASP .Net Core with Repositoy, everything is fine, but when I enter and press edit, the Article ID will change to 0, below is the code
View
#model Megatron.ViewModels.ArticleFacultyViewModel
#{
ViewData["Title"] = "Edit Article";
}
<div>
<form asp-action="EditArticle">
<partial name="_StatusMessage" model="#ViewData["Message"]" />
<div>
<div class="form-group row">
<div class="col-2">
<label asp-for="Article.Title" class="col-form-label"></label>
</div>
<div class="col-5">
<input asp-for="Article.Title" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-2">
<label class="col-form-label">Type of contribution</label>
</div>
<div class="col-3">
<button hidden class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ImportFileCollapse" aria-expanded="false" aria-controls="ImportFileCollapse">
</button>
<button hidden class="btn btn-primary" type="button" data-toggle="collapse" data-target="#TextAreaCollapse" aria-expanded="false" aria-controls="TextAreaCollapse">
</button>
<button id="button-collapse" class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="ImportFileCollapse TextAreaCollapse">
Switch to Editor
</button>
</div>
</div>
The problem is you are not binding the Id of the article when you submit the form in your html. So, the EditArticle post action receives no Id, and subsequently shows a zero.
I need to make a Modal for editing a player, and I made one, but whenever I click button "Change" it doesen't open my modal. I don't know where am I supposed to send the right ID
this is my jquery
var data= 0;
$('.btnEdit').click(function () {
$('#myModalEdit').modal("show");
});
$('#myModalEdit').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
data= button.data("playerId");
});
To be precise, when I click Change it does enter the first function, but doesn't open modal. I would really need help. If you need more info, please write what, and I will post it.
Modal code:
<!--Modal-->
<div id="myModalEdit" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ucinak igraca</h4>
</div>
#Html.HiddenFor(Model => item.IgracId)
<div class="col-md-6">
#Html.LabelFor(Model => item.ImeIPrezime)<br />
#Html.LabelFor(Model => item.OdigraneMinute)<br />
#Html.LabelFor(Model => item.PostignutiGolovi)<br />
#Html.LabelFor(Model => item.ZutiKarton)<br />
#Html.LabelFor(Model => item.CrveniKarton)
</div>
<div class="col-md-6" style="margin-bottom:5px;">
#Html.DisplayFor(Model => item.ImeIPrezime)<br />
#Html.EditorFor(Model => item.OdigraneMinute)<br />
#Html.EditorFor(Model => item.PostignutiGolovi)<br />
#Html.EditorFor(Model => item.ZutiKarton)<br />
#Html.EditorFor(Model => item.CrveniKarton)
</div>
<div class="modal-body" id="modal-body">
<div id="greska"></div>
</div>
<div style="align-content:center">
<br />
<button type="button" class="btn btn-primary" data-dismiss="modal" id="sacuvaj">Sacuvaj</button>
<button type="button" class="btn btn-primar" data-dismiss="modal" id="odustani">Odustani</button>
</div>
</div>
</div>
</div>
<!--Modal-->
Button code:
<button type="button" class="btn btn-primary" data-igracId="#item.playerId" id="Edit" data-target="#myModalEdit" data-toggle="modal">Izmjeni</button>
Could you please Add class "btnEdit" to your Button
like this
class="btn btn-primary btnEdit"
Your button is missing the class btnEdit so related click event not getting executed
replaace
<button type="button" class="btn btn-primary" data-igracId="#item.playerId" id="Edit" data-target="#myModalEdit" data-toggle="modal">Izmjeni</button>
with
<button type="button" class="btn btn-primary btnEdit" data-igracId="#item.playerId" id="Edit" data-target="#myModalEdit" data-toggle="modal">Izmjeni</button>
And make sure script gets exexutes html rendering done
Sometimes when dynamic html is rendered events are not mapped
if its case ADD onclick="$('#myModalEdit').modal('show');" to you BUTTON
How do I align label element vertically with button.
I am using this hack to make a file button look like the regular bootstrap buttons
Twitter Bootstrap Form File Element Upload Button
The trouble is the button is no longer vertically aligned properly with the the regular buttons. (If I replace the label element with regular button element it looks correct but then of course it does not work.
<div style="padding:0.25em">
<button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
Select All
</button>
<button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
UnSelect All
</button>
<label class="btn btn-outline-secondary">
Browse
<input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
</label>
</div>
Using a margin utility class (mt-2) seems to work..
<div class="container">
<div style="padding:0.25em">
<button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
Select All
</button>
<button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
UnSelect All
</button>
<label class="btn btn-outline-secondary mt-2">
Browse
<input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
</label>
</div>
</div>
https://www.codeply.com/go/kFHG1BDI1E
I'm building an asp.net web application. In the login page, the username and password text boxes are required and I get a really nice message when the user tries to validate without filling both the boxes, as shown below:
But when I add an onserverclick event handler to the submit button, this functionality no longer works - nothing happens if the user validates with empty text boxes. Here is the code for the login form.
<fieldset>
<%--Input--%>
<div class="form-group">
<label for="UsernameTextBox" class="col-lg-2 control-label text-right">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="username" required id="UsernameTextBox" runat="server">
</div>
</div>
<div class="form-group">
<label for="PasswordTextBox" class="col-lg-2 control-label text-right">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" placeholder="password" required id="PasswordTextBox" runat="server">
</div>
</div>
<%--Buttons--%>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary btn-lg" onserverclick="Login_Click" id="LoginBtn" runat="server"><i class="glyphicon glyphicon-ok"></i>
</button>
<button type="reset" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-repeat"></i>
</button>
</div>
</div>
</fieldset>
I have just been trying this out. When I put a break point on the button server side function and click, I see it hit the break point, if I then click the button again the Required message comes up.
MSDN for onserverclick states "This event causes a round trip to occur from the client to the server and back. It is deliberately different from the client-side OnClick event."
https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx
The button gets setup with an onclick attribute which will be doing the postback and bypassing the browser required validation.
<button onclick="__doPostBack('ctl00$MainContent$btnSubmit','')" id="MainContent_btnSubmit"> Submit </button>
I found that if you use a standard asp:button then the required validation fires.
<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" />
I want the input group to be aligned to left, as it is, and "Add new" button aligned to right of the row.
<div class="row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
</div>
</div>
In action: Bootply
As you can see, input group and "Add new" button are stacked vertically, although they're in a single row.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
</div>
<div class="col-lg-6">
<button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
</div>
</div>
Separete the col-lg-6 and input-group from the div
Bootply : http://www.bootply.com/W8ao9A0a4r
See below. I moved the add new button code right next to your search button. The input is to the left and the add new button is to the right of that. If you want the add new button to hug the right side of the browser, let me know.
<div class="actions row">
<div class="input-group col-sm-6">
<input type="text" class="form-control" placeholder="Search by a substring in good's name..">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="filter()">Search</button>
</span>
</div>
<div class="col-sm-6">
<button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
</div>
</div>