I have a jsf page and a commandButton inside a form.
<h:form>
...
<h:commandButton action="#{mainViewController.showRelatedPayments()}" id="openpay" onclick="openModal();" value="Tst"></h:commandButton>
...
</h:form>
At the same jsf page i have a modal div..
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Modal titles</h4>
</div>
<div class="modal-body">
....
Dynamic content must be here
....
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I have a javascript file also which includes the openModal() function.
function openModal() {
$('#myModal').modal('show');
}
When i click on the button, it calls the javascript function and the modal div shows up but then the page refreshing and the opening modal disappear..
The button also call my backing bean method:
public void showRelatedPayments() {
LOG.info("creating data for page..");
/*...
...
...
*/
}
What i would do is click on the button call the backing bean method which create data for the modal content and not refreshing the whole jsf page..
Is this possible? Could anybody please help me?
<h:commandButton action="#{mainViewController.showRelatedPayments()}"
id="openpay" onclick="openModal();" value="Tst" />
That code does indeed this:
Open modal dialog.
Invoke command button action to load data.
Reload the whole page.
But you actually want this:
Invoke command button action to load data.
Reload only the modal dialog.
Open modal dialog.
You need to move around the tasks in the desired order and throw in ajax magic to achieve partial page reloads. The <f:ajax> is helpful in this.
<h:commandButton action="#{mainViewController.showRelatedPayments()}"
id="openpay" value="Tst">
<f:ajax execute="#form" render=":relatedPayments"
onevent="function(data) { if (data.status == 'success') openModal(); }" />
</h:commandButton>
And add this to the modal dialog's content which should be dynamically updated.
<h:panelGroup id="relatedPayments" layout="block">
....
Dynamic content must be here
....
</h:panelGroup>
Related
I'm learning on how to popup modal when a page load. For example when I click on a button in home.html that is linked to comment.html, when comment.html load then modal popup. But if I navigate to comment.html without clicking on the button then modal will not popup. Let modal only popup when I click on the button.
home.html
<!-- Another button that linked to comment without mod data-target -->
# I do not want Modal to popup in comment.html when I click on this button
Comment
<!-- Button trigger modal -->
# I want modal to popup in comment.html when I click on this button
<a href="{% url 'site:comment' %}" data-toggle="modal" data-target="#basicExampleModal">
Launch Modal in Comment
</a>
comment.html
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">Save changes</button>
</div>
</div>
</div>
</div>
$(document).ready(function(){
if(localStorage.getItem('popState') != 'shown'){
$("#basicExampleModal").delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$('#basicExampleModal').modal('show');
});
The above code will create a popup Model automatically! Hope you find it useful.
In short:
create a local storage data item (for example item name being: showModalInCommentPage) before navigating to the comments page
on loading comments page check if that local storage data item (showModalInCommentPage) exists
if exists load the modal and remove the local storage data item (showModalInCommentPage)
in home templates file
<!-- If modal should not be shown -->
Comment
<!-- If modal should be shown : create local storage item on clicking the a tag -->
Launch Modal in Comment
in comments template file
<script>
$(document).ready( function() {
var showmodal = localStorage.getItem('showModalInCommentPage');
if (showmodal == '1') {
$('#basicExampleModal').modal('show');
localStorage.removeItem('showModalInCommentPage');
}
});
</script>
For my project, I want to implement a modal. I am using Bootstrap 4. The modal should work as following:
When I press the button in the first .html page, the button should redirect me to a second .html page, meanwhile open a modal in that second .html page as a welcoming.
So the modal in that case is like a welcoming message as a popup box.
To make things clear. The button "code" is in the first .html file, the modal "code" is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Dobrodošli v digitalnem gradbenem delovnem listu.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
</div>
</div>
</div>
</div>
I tried everything. from id's, to trying to relocate the code, to trying to find another solution, with JavaScript, but no luck so far.
A click on your <a> cannot open a modal in another page that is about to be opened. Instead, what you do is you slightly modify the href of your <a>, for example: .
Then, in your JS (that is being loaded with index.html) you can check if there is a 'welcome' in your URL when the user navigates to the page. If there is, you trigger the modal to show. It would look something like this:
$(document).ready(function() {
if (window.location.href.indexOf("welcome") > -1) {
$("#modalLogin").modal("show");
}
});
This way, when the user navigates to index.html the modal doesn't show, but if the user clicks on your button, the modal will be displayed because the URL will contain welcome.
Most of the answers on SO are either about how to activate a modal dialog box or how the dismissal works.
However what I find lacking is how to trigger an action that the default button signifies.
For example,
the default action of this dialog is 'Save'.
Here is the html markup
<!-- 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">Dialog</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-save" class="btn btn-primary btn-save">Save</button>
</div>
</div>
</div>
</div>
If I call $('#myModal).modal('show'), the dialog box will appear.
If I click on the cross on upper right corner or the 'Close' button, the dialog box will be dismissed as expected.
However, when I press 'Save', nothing happens.
I used a round-about way to implement it:
It is written in coffeescript.
$('#myModal).on('click', _.bind(#_handleSave, #))
$('#myModal).modal('show')
Then inside _handleSave,
_handleSaveProfile: (data) ->
return unless data.target.id is 'btn-save'
# Do saving
# ...
I don't think it is the right way because it intercepts every click event.
What is the proper to implement this function?
bind the click event to the button instead of the modal :
$('#myModal').modal('show')
$('#btn-save').on('click', _.bind(#_handleSave, #))
From my login page user clicks on a ForgotPassword link and goes to this page to fill up a form and request a new password
http://localhost:2350/Account/ForgotPassword
Now when they click Save in that page, their request has been created.
So All I need is just a Bootstrap Modal dialog to pop up and say "Your Request Has Been Submitted" and a "OK" button on it, when they click OK it takes them back to login page.
I have never doen Ajax,Popup dialog, etc.. like this. Can you point me to some tutorial code that is not too complex to follow and reproduce? because my modal is really simple, contains no data, just has a static text and an OK button that redirects to login page on it.
You can setup your Bootstrap Modal like this:
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal Example</h3>
</div>
<div class="modal-body">
<p>
This is your body
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitButton" class="btn btn-primary">OK</button>
</div>
</div>
</div>
And in your JavaScript code, you catch the click event of the OK button. Then, call ajax and redirect to login page.
$('#submitButton').click(function() {
// Call AJAX here
$.ajax({
method: "POST",
url: "", // Your URL here
data: "" // Your data here
});
// Redirect here
});
Please check this jsfiddle for more detail.
I'm using Meteor and Iron Router, and I have a modal dialog that won't hide the backdrop when it gets dismissed. To be more accurate, I want that after clicking the dismiss button, the iron router will redirect to another page. The redirection code does work, but the backdrop stays visible. If I remove the routing line - the modal is dismissed and so does the backdrop.
Here is the modal's markup:
<div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
This cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" id="confirm-yes-button">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
Here is the button that toggles the modal dialog:
<button type="button" id="delete-recipe-btn" data-target="#confirm-modal" data-toggle="modal" class="btn btn-primary btn-danger pull-right">Delete</button>
Here is the click event on the 'yes' button of the confirm modal dialog:
'click #confirm-yes-button': function() {
Recipes.remove(this._id);
$('#confirm-modal').modal('hide');
Router.go('/');
}
Why would the routing leave the backdrop visible?
There are multiple solutions to this, depending on exactly how you desire the behavior. If you want the modal to hide first, then change the page, you can use a callback on the modal's behavior.
'click #confirm-yes-button': function() {
Recipes.remove(this._id);
$('#confirm-modal')
.on('hidden.bs.modal', function() {
Router.go('/');
})
.modal('hide');
}
As to your question of why the backdrop is visible - its complicated. The backdrop is only hidden once the "hide" animation completes, and changing the page interrupts/stops this behavior.
One of the solution would be to use jQuery methods to remove backdrop
once the user has been redirected.
Accounts.onLogin(function(){
Router.go('/');
$('.modal-backdrop').remove();
});
However to use this method you need have access to Accounts.login method which can be acquired by adding
gwendall:auth-client-callbacks
package to your meteor project