I'm creating a MVC web application where the user fills out a form and, after clicking the submit button, a view with a PDF is generated containing the user's information. The PDF generator I am using takes a long time to work, so I would like to have a "Please Wait" modal display when the user clicks submit and waits for the next view to be generated.
The purpose of the modal is to discourage the user from clicking the submit button multiple times, and let the user know that their form went through and the app is still working.
I have tried the following code, but the modal isn't displaying:
HTML
<div class="form-horizontal">
<!--the entire form...-->
<div>
<input type="submit" value="Submit" class="btn btn-default btn-lg" id="submitButton" />
</div>
<!-- Modal -->
<div class="modal fade" id="waitingModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<h2 class="modal-realtitle">Thank You for Your Patience!</h2>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".form-horizontal").submit(function () {
$('#waitingModal').show();
});
});
The form is still submitting, but the modal is not displaying. I've also tried this code for the modal:
HTML
<div>
<input type="submit" value="Submit" class="btn btn-default btn-lg" data-toggle="modal" data-target="#waitingModal" data-backdrop="static" data-keyboard="false" />
</div>
<div class="modal fade" id="waitingModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<h2 class="modal-realtitle">Thank You for Your Patience!</h2>
</div>
</div>
</div>
</div>
The code above gets the modal to display, but the submit button no longer does what it's supposed to do. In other words, the modal displays but the form does not submit.
This is the first time I am working with modals and trying to make this happen. Is it possible to make the first piece of HTML to work with some jQuery?
Related
I have a HTML code:
<div class="container">
<div class="row">
#foreach(var post in Model)
{
<div class="col-sm-8">
<div class="row">
<div class="post-body container shadow p-3 mb-3 rounded-3">
<h2>#post.Title</h2>
<p>#post.Description</p>
<button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button>
</div>
<div class="modal fade" id="wholePost">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#post.Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>#post.Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-sm-4">
col2
</div>
}
</div>
I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.
I even don't understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.
You could do it on JS but need to propagate HTML with some additional info
just some concept code for example:
<button onclick="showContent(#post.Id);">Show post...</button>
...
<div class="modal fade" id="wholePost_#post.Id">
JS file
function showContent(id){
$("#wholePost_"+id).show();
}
There are probably some more ways to do it.
The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that's why it keeps opening the modal for your first element.
What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, ... .
I know this is an answered question HERE and I have tried the same solution, however I am not sure how to pass the values to modal popup which is on same page.
I have form where user inputs amount and clicks Pay button and user gets a popup getting a confirmation with the values and currency he/she is using.
I wnat to open popup after clicking a button , hence my code:
<form name="form" class="form-horizontal" action="signupinvestment.php" method="post" onsubmit="return validateForm()">
<button type="submit" class="btn btn-primary"><i class="fa fa-university"></i> Net Banking
<a class="open-my-modal" rel="dialog" data-toggle="modal" data-id="<? $amount_invest=$_GET['amount_invested']; echo $amount_invest;?>" data-prod-id="<? $currency=$_GET['currency'];echo $currency;?>" href="#mymodal" data-target="#myModal" >
<?php echo "<br> $order_id </br>";?>
</a></button>
</form>
<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>
<table class="table table-hover table-bordered" >
<tr style=" background-color:#00AAAD; color:#FFF; ">
<div class="modal-body">
<div id='order-id'></div>
<div id='prod-id'></div>
<div id='sell-id'></div>
</div>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
And my JQuery Code:
$(document).ready(function () {
$('.open-my-modal').click(function(){
$('#order-id').html($(this).data('id'));
$('#prod-id').html($(this).data('prod-id'));
// show Modal
$('#myModal').modal('show');
});
});
I am not sure this $_GET is te right way to access those variables and secondly it doesn't open the popup skips to the next form.
I have rest of the codes, but its lengthy hence didnt pt its same as in the link above.
I know this looks very shabby but had to try before asking. Please help
Your modal is not a separate page, so if you need to get some data from your server (run the php scripts), then you have to add an ajax call to your server and receive that data, that will be passed to your modal via the JavaScript. The JavaScript passes the data to the modal, not the PHP. Because the Modal is not a separate page, and the modal is being opened by the JavaScript.
The only thing, that the JavaScript may lack some data, so you have to add an ajax call, to get that data from you server (php).
if you send that number to your server and after server response, you need the value then the server must put this value into a hidden input and then you show modal and read that data from the hidden input.
but if you need show modal before sending to server button type of form must be button not submit because submit button send data to the server and does not trigger javascript function. in this case, you need to submit the form or sending data to API from your modal.
anyway, you can access to textbox value using jquery.
I have a modal window but when I close the modal my page is blocked. I can not do anything. I need to refresh the page to get everything working again!
The strange is that sometimes everything works well or sometimes everything is blocked!
The button that opens the model:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalCode">Approve</button>
My modal window code:
<!-- Modal-->
<div class="modal fade" id="myModalCode" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form id="formUpdateProgress" >
{!! csrf_field() !!}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Complaint Progress</h4>
</div>
<div class="modal-body">
<label class="control-label">Insert code:</label>
<div id='complaintProgress' style="position: relative;">
<input type="text" name="code" id="code" placeholder="Insert the code here">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- END MODAL -->
When I submit the form, I close the model!
$( '#formUpdateProgress' ).on( 'submit', function(e) {
$('#myModalCode').modal('hide');
});
EXAMPLE:
Modal window in my application:
Then I click Submit, everything works ok, the document is approved but something is locking the page:
Any idea why the page is blocked? Thanks in advance
Similar issues is discussed in here:
How to hide Bootstrap modal from javascript?
Seems that you have some issues in the way how your modal is handling the submit. Perhaps the easiest fix would be as was mentioned in one of the comments from the link above, add the following fix to remove the backdrop:
$('.modal-backdrop').hide();
Alternatively, you may even remove() it. I'd think, modal will re-create it again, if open.
It's looks like you are using bootstrap modal.
Bootstrap open not only modal, but page mask too. So you need to call bootstrap method to close. With code inspector you can find that body got class="modal-open" and extra div with "modal-backdrop fade in"
Just use <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> or yr element with 'data-dismiss="modal"' and all be ok)
function closeModal(name){
$("#"+name).modal('hide');
// I added the next line
$('.modal-backdrop').hide();
}
After I add the $('.modal-backdrop').hide(); everything its ok :)
I'm attempting to fill a modal with dynamic data based on a form input, without a page reload.
Step by step:
1) User will input a name and submit form on admin.php
2) Data is submitted via Ajax (ideally) and processed via editUser.php
3) Data is pulled from a mysqli database and put in a modal content
4) Modal is loaded (While still viewing the admin.php page) with no page reload, but with the dynamic content in the modal.
My code so far:
Form + Ajax:
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
<form id="myForm" action="query/editUser.php" method="post">
Name: <input type="text" name="name" />
<input type="submit" value="Submit Comment" />
</form>
editUser.php:
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<!-- 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">Modal title</h4>
</div>
<div class="modal-body">
--List data based on the form input from before
</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>
My current problem is that I do not know how to show the modal after the form is submitted.
You will notice I currently have no calls to my database, or filling any content on the modal, because that will come later. My goal right now is to make the modal show after the form is submitted (And doing this in a way where it is still possible to fill the modal before it is shown).
I'm stuck, have been trying to figure this out for awhile, and would much appreciate help.
Edit:
Here is a breakdown of what I have, and what I want.
Right now, I've got 2 pages: admin.php and editUser.php
The admin page holds the form on it, that when submitted uses "action" to post to the editUser page, which has the code for my modal.
When the form is posted, I want the modal to be dynamically filled with information (based on the input from the admin page) using a while statement pulling information from a database.
I then want the modal to show as an overlay on the admin page - this should all happen with absolutely no page refreshing.
I KNOW how to fill the modal with information dynamically, I KNOW how to call a modal, but I DO NOT know how to show the modal on my admin page, after submitting a form and then filling the modal that is saved on the userEdit page DYNAMICALLY.
If dialog is the ID of the <div class="modal"> that's going to receive the content,
$('#dialog').modal('show');
e.g.:
$.get(url).then(function(data) {
// fill "#dialog .modal-body" with content based on 'data'
...
$('#dialog').modal('show');
});
So I have two modals which are triggered depending on the button I click
The first one is trigeered like this:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
And it is built this way
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
An the second one is called using a button:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
And it is built the same way:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
When I open the first one, I have no issue.
But when I want to open the second one, it disappear as soon as it has appeared.
I know that:
I have to include only one js bootstrap file
My scripts have to be at the end (for the sake of page rapidity loading)
Do I miss something?
As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
This is an old question, but I had the same issue and found this.
In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.
This means that the second modal will sort of be inside the first, which causes issues.
I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.