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');
});
Related
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 created a form within pop up I am using bootstrap pop up modal as the form is a bit long so once submitted the message is shown at the top of the form and when user submit's the form it stays at the bottom what I am looking here is when user submits the form it scroll to top so user can see the message though.
Is this possible? as of it is a pop up modal I am using please review my code below and figure if im doing something wrong.
$(document).ready(function() {
$('.reg-form').on('submit', function(e) {
$('#register').on('shown', function() {
$(this).scrollTop(0);
});
$('.load').fadeIn(500);
var formData = new FormData(this);
});
});
Here is the html for y pop up modal
<div id="register" class="modal" role="dialog">
<button type="button" class="close" data-dismiss="modal">
<img class="svg" src="<?php echo base_url(); ?>assets/images/modal-close.svg">
</button>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Register With Us</h4>
</div>
<div class="modal-body">
//here is my form
</div>
</div>
</div>
</div>
yes, it's possible! just put it:
$('#register').animate({'scrollTop':0},800);
and I see you have wrong event name there, shown should be shown.bs.modal but nevermind that because you just have to change that line with my code above.
$("#regsiter").scrollTop(0);
Add the above line in submit function. You don't need to put it in on shown function.
Simplest is
window.scrollBy(-10000, -10000);
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?
Been trying to use modal to create a notification window which notifies the user that the record was successfully created. The idea is that a session confirm is set to yes at the end of the query, and on return to the form page, a modal will pop up for a fixed amount of time, i.e. 2 seconds, notifying the user that the record was successfully added to the table.
Ive been playing around with w3 tutorials but no luck, biggest struggle is trying to understand how to call the modal automatically on page load. This type of modal is perfect, but im unsure how to get rid of the button and automatically load & close on timer.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal_sm&stacked=h
Within an IF statement. Code on the php page, to feature the modal below:
<?php
$confirmation = strip_tags($_SESSION['confirm']);
if ($confirmation == 'yes') {
echo '<div id="confirm_msg">';
echo 'Record has been successfully created.';
$_SESSION["confirm"] = 'No';
echo '</div>';
}
?>
Ideally, id like to swap the #confirm_msg with an automatic modal, that closes after a few seconds.
i think you can set your modal to be loaded at the same time of your body page which mean whenever you run that page it will open up with an open modal follow this link How to make modal dialog open at page load in bootstrap
and then after that you can set a period of time that you want your modal to be loaded How to automatically close Bootstrap 3 modal after time period
when it closed direct it to the location you want
To display the modal form, only when the user has returned from the mysql update qry page & session confirm = yes. No auto-timer implemented. But modal works perfectly.
<?php
$confirmation = strip_tags($_SESSION['confirm']);
if ($confirmation == 'yes') { ?>
<script>
$(document).ready(function(){
$('#myModal').modal('show')
});
</script>
<div class="container">
<div class="modal" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Notification</h4>
</div>
<div class="modal-body">
<p>The record has been created successfully.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong