I have downloaded "bootstrap.js", and put in in my assets/javascript directory and I have put this in my rails view:
new.html.erb
Launch demo modal
<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
which is the same code exactly as in the twitter guide.
When I reload the page the modal is there, and doesn't work at all, and when I press the button no animation is shown, the modal just pops up! any suggestion to make it work?
also where do I put the JS code like this one?
$('#myModal').modal('toggle')
Check your /assets/javascripts/application.js.
Does it include this line?
//= require_tree .
Or any line required for boostraps.
Include twitter-bootstrap-rails and jquery-rails Gems in your Gemfile:
gem 'twitter-bootstrap-rails'
gem 'jquery-rails'
then run:
bundle install
then run:
rails generate bootstrap:install
This is should take care where to load bootstrap and jQuery. As for your own JavaScript code put it inside filename.js in /assets/javascripts/
Related
Sorry about the title but in fact I don't know how is question form in my case, So I'm working on project With ASP MVC Core 3.1 I want to show Modal when User Press button, So I took the code copy past from bootstrap website and it showing with me like the picture and here is my code into view
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#staticBackdrop">
</button>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
ria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
and here is my action
public IActionResult Statistics()
{
return View();
}
it sample but I don't know why it showing like this any one can help.
Ok guys here is the problem is my modal be into a view so it happened position problem when I appended into body it works fine. and here is the js code
$(function () {
$('#Btn1').click(function (event) {
$("#staticBackdrop").modal("show");
$("#staticBackdrop").appendTo("body");
});
});
Hu,
probably is CSS issues.
try to write this css code
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
for more info, read this article
https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background
I installed your wonderful program flexible view control for XPage. Everything works great. But unfortunately I could not get her to work in a modal window or picklist. I see only the column headings and info (footer). All rows in table is absend, but info (footer) shows real counts rows (in my case 4).
Could you tell me how to do this?
<!-- Modal -->
<div class="modal fade picklist" 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">x</span>
</button>
<h4 class="modal-title" id="myModalLabel">Choose a record</h4>
</div>
<xc:ccRestView showFooter="true" showFixedHeader="true"
showFilter="true" showInfo="true" showCellBorders="false"
keyIsCategory="false" refreshInterval="0" multiValue="false"
showRefreshButton="true" showFilterText="true" scroller="true"
ordering="true" scrollerCount="500" thisView="ViewBasic"
viewKey="view-definitions"
dataTableClass="tableViewBasic"
rowCallback="ccRestView.defaultRowCallback" filterText="Поиск"
dataTableClassDefault="table table-striped table-bordered">
</xc:ccRestView>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
Oleg - see this blog post for how to get the control working with the Bootstrap modal:
https://xpage.me/2020/04/06/a-flexible-view-control-for-xpages-part-7-modals-picklists/
And you can view a working demo here:
http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewPicklist.xsp
Also, in your source above you are missing the modal-body div. This is a required component inside the Bootstrap modal.
The key to loading DataTables inside a modal is initializing the view AFTER the modal has been rendered, especially when the fixed header is being used.
I can't find anywhere how to click a modal button. The hard part is that all the modals buttons in this website have the same id so when i try the simple click() command it only works for the very first modal of the website.
EDIT
Actually my bad. I can't click modal's buttons.
EDIT 2
I have two pages with the same modal appearing in both. My problem is when i try to hit those buttons in my second page. It seems like it reacts only to fist modal.
<body class="bg ng-scope" ng-app="app">
<div class="ng-scope" autoscroll="true" ui-view="" style="">
<div class="ng-scope" src="'/js/layout/navbar.html'" ng-include="" style="">
<div id="searchContainer" class="container ng-scope">
<div id="resultsContainer" class="container ng-scope ng-hide" ng-show="vm.isAvailable"> </div>
<div class="ng-scope" src="'/js/layout/modals.html'" ng-include="" style="">
<script id="myModalContent.html" class="ng-scope" type="text/ng-template">
<div class="modal fade children-policy-modal ng-scope">
<div class="modal fade articles-modal ng-scope">
<div class="modal fade booking-code-modal ng-scope" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="ng-pristine ng-invalid ng-invalid-required" role="form" name="vm.bookingCodeForm">
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
<button class="btn btn-info btn-sm ng-binding" ng-click="vm.checkBookingCode()" type="submit">BUTTON 1</button>
<button class="btn btn-default ng-binding" data-dismiss="modal" type="button">BUTTON2</button>
EDIT 3
I used the following code
.click('a[data-target=".voucher-code-modal"]')
.waitForElementVisible('button[class="btn btn-default ng-binding"]', 5000)
.click('button[class="btn btn-default ng-binding"]')
and i get the following message
Warn: waitForElement found 9 elements for selector button[class="btn
btn-default ng-binding"]'}. Only the first one will be checked.
And then i get timed out cause of time.
So your xpath should be something like this: .//div[#id='your id' and contains(#style,'display: block')] this will give only those modals..which appear on clicking..also ensure the result count with above xpath should be 1..Please note above xpath is not tried and tested, but something on those lines should give your answer.
I used the following to select a text area inside a modal window
'md-dialog[aria-label="Url Document ..."] textarea[name="description"]'
That makes my setvalue code look like
.setValue('md-dialog[aria-label="Url Document ..."] textarea[name="description"]', 'random string')
Not the nicest line of code, but Page Objects lets you tidy it up.
From what I can work out in your code snippet you'd want something like
.click(form[name='vm.bookingCodeForm'] button[type='submit'])
Based on the live demo in the Bootstrap examples, I've made this fiddle to show a dialog.
Then this fiddle should bring up the dialog on click, but is not working:
<button type='button' data-toggle='modal' data-target='#myModal'>Click here</button>
It may be obvious, but what am I missing from the above-linked live demo?
I had some trouble getting this to work, I'm not entirely sure, but I think that the issue was mainly the 'External Resources' on JSFiddle.
I have added the jQuery CDN to the fiddle, you can find it here:
https://jsfiddle.net/7ww5ra98/1/
Here is the HTML:
<button type="button" data-toggle="modal" data-target="#myModal">Click Here</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">Popup Dialog</h4>
</div>
<div class="modal-body">
<p>Wow, it works!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Reset Password</button>
</div>
</div>
</div>
</div>
Hope you found this useful.
My twitter bootstrap modal window isn't loading properly; it is faded when it loads. Here is an image demonstrating the problem.
I have tried a few things but cannot resolve the issue.
My code is:
<button type=\"button\" class=\"btn btn-danger btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" href=\"#myModal\">
<div id=\"myModal\" class=\"modal fade\">
<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\">Confirmation</h4>
</div>
<div class=\"modal-body\">
<p>Do you want to save changes you made to document before closing?</p>
<p class=\"text-warning\"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>
<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
</div>
</div>
</div>
</div></div>
There's invalid syntax in your code example (HTML and Bootstrap). It seems like you're trying to load a warning button before the modal, but you're missing text for the button as well as the closing button tag. Here's a Bootstrap 3 example that should accomplish what you described:
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" href="#myModal">
Save Now!
</button>
<div id="myModal" class="modal fade">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Edit the button text to read what you'd like. "Save Now!" is just an example for illustration purposes.