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.
Related
I am trying to redirect(303) from one domain to another different domain(payment gateway - EXTERNAL URL) within bootstrap modal pop up on Form POST
Below is the complete code:
<body onload="PostData()">
<!-- start modal-->
<div class="modal-dialog" id="popup" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Payment gateway</h4>
</div>
<div class="modal-body">
<p>You are now leaving this website.</p>
<input type="submit" id="redirectForm" class="hide" onclick="PostData()" />
<form id="form1" target="popup" method="POST" enctype="application/x-www-form-urlencoded" action="https://anotherdomain.com/payment">
</form>
</div>
<div class="modal-footer text-center">
<button type="button" title="go back" onclick="closewindow()">Go Back</button>
</div>
</div>
</div>
</body>
I would submit the form on a button click event:
When I make the POST call the user is not redirected to the payment gateway inside the modal pop up
What's the best cross domain implementation with the usage of Form POST + Bootstrap modal popup + javascript + ASP.NET MVC
I have also tried embedding Form POST inside modal-body but redirection is not happening.
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.
<div class="modal" id="myInquiry" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 id="myModalLabel">Thank you for your feedback:</h4>
</div>
<div class="modal-body">
<label for="inquiry">Feedback:</label>
<textarea class="form-control" rows="5" id="inquiry"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="send">Send</button>
</div>
</div>
</div>
</div>
This is the code I have for my modal footer. I am wanting to click the send button and close the modal. Once it has been closed I want to have an alert window or modal pop up and thank the user for giving their feedback. I am new to web development and am getting stuck on this issue after numerous attempts (after finding different solutions on other questions) but nothing is working.
The modal's div id is 'myInquiry' if that helps.
Thank you!
You need to add an action to your modal Close button, worst way would be like:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="alert('thank you');">Close</button>
you can add the ID to the button and then use jQuery to handle the action, and show something better than this.
You can add jQuery code like this.
$('button#send').click(function() {
alert('Alert Content');
}
Then you can see the alert "Alert Content" when you click the Send Submit button.
Bootstrap modal has a hide.bs.modal event, you can listen to that event and then, when the modal is closed (hidden from user) you can show the thank modal. Here is an example on jsfiddle. Cheers, sigfried.
Maybe you can try adding an
onclick="window.alert('<Your text here>')"
attribute to the button.
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>