Ho to detect an alert and accept it, let say we open this site http://www.boloco.com/" and we want to detect the alert popup and click on the button , I used
driver.switch_to.alert.accept
But it said no dialog box.
UPDATE :
Since I popup in this web site does not exist anymore, in our production code we have a dialog that pop up, I search in the source code , I found the dialog box code like this :
<div class="roster-alert modal fade" id="roster-alert" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="OKAY, GOT IT"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<h2>Any recent employee changes?</h2>
<p class="content">Looks like it's been awhile since you last visited. Please take a quick moment to review your staff roster and update any changes.</p>
<button type="button" class="btn btn-primary roster-alert-cta" data-dismiss="modal">OKAY, GOT IT</button>
</div>
</div>
</div>
</div>
Thanks, your help is appreciated.
The problem here is, the pop up is not Java Script alert so you can't use
driver.switch_to.alert.accept
pop up is normal webpage, so to click the close button use the following code, that pop up remain inside the iframe, so first we need to switch to that iframe and then you can click that close button
driver.manage.timeouts.implicit_wait =10
driver.switch_to.frame(driver.find_element(id: '_bftn_iframe'))
driver.find_element(id: 'close').click
Related
I for the life of me cant figure out how to display a modal pop up dialog box after the form has been submitted. The dialog box should only appear after i receive a ViewBag value from the controller and then we can take it from there but i just can`t get the modal box to pop up and the page just navigates to my redirected page. I am also using Umbraco Surface controller instead of the usual MVC controller class.
I have tried to use ViewBags and data-toggle with data-target to modal but to no avail. Still can`t get modal to pop up.
View
<input type="submit" id="submit" name="submit" class="submit btn btn-success" value="Submit" data-toggle="modal" data-target="#MyModal" />
Modal
#if (ViewBag.Status != null)
{
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Successfully Registered</h4>
</div>
<div class="modal-body">
Congratulations!!! you have been registered to our website. You will recieve an email for confirmation.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="location.href='/';">Ok</button>
</div>
</div>
</div>
</div>
}
Controller
public ActionResult SubmitForm(RegistrationModel model)
{
var errors = ModelState.Values.SelectMany(v => v.Errors);
if (ModelState.IsValid) {
// Get the details and save it to model
RegisterUser(model);
TempData["ContactSuccess"] = true;
//SendEmail(model);
// TempData["Success"] = true;
ViewBag.Status = "Success";
return RedirectToUmbracoPage(1144);
// return RedirectToCurrentUmbracoPage();
}
return RedirectToUmbracoPage(1146);
//return RedirectToCurrentUmbracoPage();
}
My Expected result would just be to show the modal pop up and stop the redirection. I know i would need to change the returntoumbracopage return but i just need some help on this.
Without modifying your controller logic I would set the success state in a session. See https://learn.microsoft.com/en-us/dotnet/api/system.web.httpcontext.session?view=netframework-4.8
Alternatively, it would be a better approach to post the data using Ajax and returning a JSON model representing the state of the form submission and updating the page accordingly.
i wanna put data into database through bootstrap modal with ajax. But after submit data button on modal the modal not close automatically. How i can fix this.
Here is code of Bootstrap modal
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is ajax code
<script type="text/javascript">
***
SOme Code Here
****
$.ajax({
type: 'GET',
url : "YOu URL",
data: {},
success: function(feedback){
$('#feedback').html(feedback);
}
});
});
});
</script>
In your success method, you call to close the model by using
$('#yourModal').modal('hide');
Btw, it is advisable to do a http POST rather than a GET for submissions.
The syntax for modal closing seems fine. But I'm not sure if you are targetting right modal element. See if the target id on which you are triggering the modal close code is right. Hope it solves your problem.
I am using codeigniter to create my website. I have a dropdown menu in my first page that contains links like 'Profile', 'Edit' etc. When i click on the link (profile) it should display the bootstrap modal with corresponding user data. Used jquery to get the current id and ajax to retrieve data from database. But, when i tried to load the bootstrap modal with the response data, it displays nothing. What should i do to load the modal with ajax response data.? The response is an array containing user name, address, phone number etc.
Modal HTML
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<div id="UserName"></div>
<div id="Address"></div>
<div id="Phone"></div>
</div>
<div class="modal-footer" id="buttons-box">
<button type="button" class="btn default" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
</div>
your jQuery script
$.get('your_server_script.php', {UserId: 'UserId'}, function (response) {
$('#UserName').text(response.UserName);
$('#Address').text(response.Address);
$('#Phone').text(response.Phone);
$('#MyModal').modal('show');
});
I'm using the standard modal popup from twitter bootstrap ui team without the fade property: http://getbootstrap.com/javascript/#modals
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item=item">{{item}}</a>
</li>
</ul>
<div>Selected Item: {{selected.item}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- modal -->
In chrome and safari (with user-agent = ipad) it loads instantly.
On the iPad it takes more than 2.5 seconds to load. Can anyone point me to how I would start looking into this? I commented out all the css fade elements. Not sure where next to look.
Thanks
Edit: it actually works super fast on a blank page. On a page with about 50 ng-repeat elements it's super slow. My guess is that the ng-repeat elements are being redrawn when this loads? I'll investigate this.
Fixed: The problem was a dropdown in each row which caused it to render slowly. Thanks
I'm putting up a Bootstrap "split button" modal, which looks something like this:
<div class="btn-group">
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
<button class="btn btn-small dropdown-toggle btn-primary" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a></li>
<li><a tabindex="-1" href="/comment/something-else">Do something else</a></li>
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_unhide-people" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/comment/do-another-thing">Do another thing...</a></li>
</ul>
</div>
The thing of interest here is that the "Do the thing" action is presented in two ways: As an action to be taken when the main button is clicked, and as an action to be taken when an item in the dropdown menu is selected. These actions are set up as click handlers on the <a> tags in the split button, via some javascript init-ing.
Both actions work fine in Chrome and Safari. However, in Firefox, the action attached to the button does NOT fire, while the action attached to the link does. Some poking around during execution reveals that the click handler on the button is not firing, although it's definitely getting set up.
Any ideas out there about why this is (happening)? Thanks!
Found it, more or less: Twitter Bootstrap buttons are unresponsive in IE8 had a working approach. Instead of formatting the button as:
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
do it as a pure <A> link with the appropriate button-style classes:
<a tabindex="-1" href="#" class=" btn btn-small btn-primary ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
The appearance is identical, and it works fine in Firefox, IE, and Opera (both platforms). Whew.
I just had the same problem in 2019 (Bootstrap 4.3.1, Firefox Quantum 69.0) and found this post from 2011 that solved the problem for me: just remove the animation for the modal (remove the "fade" class from the parent div). Original post is here: http://chapter31.com/2011/10/27/twitter-bootstrap-modal-not-working-in-firefox/