Can I eliminate some of these divs. I like to keep my code lean. I understand the 5th one b.c. it is the footer, but what about the other 4.
Here is the code
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Submit</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p>Bookmarks</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the fiddle to run it
https://jsfiddle.net/te4ta7hc/
Let me tell you about the modal window first
Where the modal content is the base which will show after triggering the modal.
Modal Header where we can able to put the heading for our modal window like( Enquiry form).
Modal Body: where the actual content have to be present whatever it may be. Such as Forms, Text contents etc..
Modal footer: where you can add some actions like close button or anything else
So if you want to eliminate the code means you can remove the modal header and footer.. make sure you added button to close modal in modal body
Related
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 have successfully added a modal from external link in my web-app, but now when I click the button to launch the modal the content of the previous modal is launched. I want it to be reloaded every time.
This is the button for launching the modal.
<button href="/forum/flag_post/0838024b-f210-4f4d-ac53-fd4ade12d533" class="btn btn-default" data-toggle="modal" data-target="#myModal">Report</button>
There are mutliple buttons like this and each one has a different href and once I press a button and close the modal, the same modal content is lauched every button. I don't want that. I want the modal content to be loaded freshly from the URL.
This is the modal class:
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
Use JQuery:
<script>
$(document).ready(function(){
$("#modalLinks a").click(function () {
var addressValue = $(this).attr("href");
$(".modalContent").load(addressValue);
});
});
<script>
<div id="modalLinks">
Report
Somewhere
Somewhere too far
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The idea is whenever you click on a link, JQuery update the modal content with ajax.
i'm using angular2 but this modal I did it with bootstrap3. I have the following input in the modal windows
<img id='searchIcon' src="images/search.png" data-toggle="modal" data-target="#myModal">
<div id="myModal" class="modal fade modal-container" role="dialog">
<h1>search</h1>
<input [focus]='true' id='inputSearch' type="text">
</div>
and I would like when I open the modal window to have the input focused (kind of is in pluralsight.com when you click on the magnifier icon).
As you see I tried [focus]='true'but didn't work
This will do
$('#myModal').on('shown.bs.modal', function() {
$("#inputSearch").focus();
});
I believe all you need to do is add autofocus to your input tag like this.
<img id='searchIcon' src="images/search.png" data-toggle="modal" data-target="#myModal">
<div id="myModal" class="modal fade modal-container" role="dialog">
<h1>search</h1>
<input id='inputSearch' type="text" autofocus>
</div>
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'])
I have button:
<div class="form-group pull-right">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
When I move to xs display I would like to change this Send invitations text to some search icon, how can I do this?
You need use css class .hidden-xs & .visible-xs for show & hide in responsive and non-responsive view. Try following code.
<div class="form-group pull-right">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search visible-xs"></i><span class="hidden-xs">Send invitation</span></button>
</div>