I used fade dialog to display a form, and it can submit the form via ajax to create a new record in database.
And I am trying to refresh my page after ajax success. However, the page do not refresh with using Javascript(E.g. location.replace etc).
Ajax:
function callDatabase(action)
{
var pn = $('#PN').val();
var pp = $('#PP').val();
$.ajax({
type:"POST",
url:"databaseFunction.php",
data:{action: action, pn: pn, pp: pp},
success:function(msg){
window.location.reload();
}
});
}
HTML:
p>
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert Data</button>
</p>
<!-- Modal -->
<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<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="addLabel">Insert Data</h4>
</div>
<form id="insertForm" >
<div class="modal-body">
<div class="form-group">
<label for="PN">ProductName</label>
<input type="string" class="form-control" id="PN" placeholder="ProductName">
</div>
<div class="form-group">
<label for="PP">ProductPrice</label>
<input type="string" class="form-control" id="PP" placeholder="ProductPrice">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="callDatabase('insert')" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
How can I refresh the page after I submitted the form?
You can change 'type=submit' to 'type=button'. Because a form will call submit-Event of form, if you already call ajax to submit, you should cancel submit of form.
Related
Let's say I have the following form:
<form id="evidence-formset" action="{% url 'interpret-criteria' %}" method="post">
<div class="form-group row">
<!-- Some content here -->
<div class="col-auto">
<input type="submit" class="btn btn-primary" value="Calculate" />
<input type="reset" class="btn btn-secondary" value="Reset" />
<input type="submit" class="btn btn-dark" value="Register" onclick="validateRegister()" formaction='https://www.wikipedia.org/'/>
<input type="submit" class="btn btn-link" value="Export results as Excel" formaction="{% url 'export-interpretation' %}" />
</div>
</div>
<form>
And the following JS function (WIP):
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#registerSubmit").submit()
}
And this basic modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Register changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So basically what I want is that when I click the Register button a modal shows, asking for confirmation. If I click again on 'Register' then the input will submit and the webpage should redirect to wikipedia (this is just an example). If I click Close, no form should be submitted and the modal will disappear.
I checked all the previous StackOverflow questions and I couldn't find an answer that worked for me. The closest solution I found is this but it doesn't work.
UPDATE WITH A SOLUTION:
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#myModal").on("click",".btn-primary", function(){
$('#evidence-formset').attr('action', 'https://www.wikipedia.org/').submit();
});
}
remove onclick and add this
$("#evidence-formset").on("submit",function(e) {
e.preventDefault();
$("#myModal").modal();
})
Add ok/cancel to the buttons of the modal
$("#myModal").on("click",".btn-primary", function(){
$("#evidence-formset").submit(); // you can add if (validate(....) in front if you have any validation
});
$("#myModal").on("click",".btn-secondary", function(){
$("#myModal").modal('toggle');
});
I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>
I have a Form and when i submit it I will show or i intercept a Modal confirming the submit that contains a confirmation text. When i click on confirm the submit wont done but it reload the page
Any one have a ideas. thanks
$('#submit').click(function(){
alert('submitting');
$('#form').submit();
});
<form id="form" name="customer_file_update" method="post" action="XXXXXXX" class="form-horizontal">
{# place of fields#}
<button type="submit" id="customer_file_update_save_and_next" name="customer_file_update[save_and_next]" title="Valider le verdict et continuer" class="btn btn-success btn" data-toggle="modal" data-target="#confirm-verdict-modal" onclick="return false;">Valider le verdict et continuer</button>
<button .....>XXXX</button>
</form>
<div class="modal fade" id="confirm-verdict-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-verdict-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-11">
<h5 class="modal-title" id="confirm-verdict-label">XXXXXXXXXXXXXXX</h5>
</div>
<div class="col-md-1">
<button type="button" class="close" data-dismiss="confirm-verdict-label" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
XXXXXXXXXXXXXxXXXXXXXXXXXX ?
<p class="text-danger">
/!\ XXXXXXXXXXXXXXXXXXXXXX!
</p>
</div>
<div class="modal-footer"
Submit
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
</div>
</div>
</div>
</div>
$('#submit').on('click', function (e){
e=e || window.e;
e.preventDefault();
your_code_open_modal;
});
This is my HTML code for the first modal. The submit button is not functioning to open another modal.
<div class="modal fade" id="newModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New record</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="name"
placeholder="Input name of client">
</div>
</div>
<div class="modal-footer">
<button type="submit" onclick="submitForm()" class="btn
btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the HTML code for the second modal when you click the submit button on the first one.
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form action="php/insert_client.php" method="post">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you want to add this client?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="validateForm()">Save</button>
</div>
</form>
</div>
</div>
This is the javascript for the newModal and confirmationModal
function submitForm() {
document.getElementById("newModal").submit();
}
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Based on the JS code you've shown, this function will need to be called in order for your second modal to be displayed:
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Right now, it's not being called until the second modal's Save button is clicked.
when I click modal button is like this.
<button class="btn btn-danger" name="button" title="Hapus" method="get" data-toggle="modal" data-target="#deleteModal{{$objek->id}}" onclick="javascript: {{url('/admin/objek/'.$objek->id)}}"><i class="fa fa-trash-o fa-lg"></i>
</button>
and my modal like this.
<div class="modal fade" id="deleteModal{{$objek->id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
<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="exampleModalLabel">Hapus Objek Wisata</h4>
</div>
<div class="modal-body">
<p>
Hapus data objek wisata dengan nama {{$objek->nama_objek}}?
</p>
</div>
<div class="modal-footer">
<form class="" action="{{url('/admin/objek', $objek->id)}}" method="post">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Tidak">
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="submit" class="btn btn-danger" name="name" value="Hapus">
</form>
</div>
</div>
</div>
</div>
the problem is how to show modal bootstrap with alert message after page reload?
alert message like this, but I want to make this in modal bootstrap like when I click modal delete button.
<script type="text/javascript">alert("Data has been submitted");</script>
thank for your attention.
You can use session data to make the modal open on the page reload.
After submitting the request just add some variable to session like this:
return redirect('route')->with('show_modal', true);
In view.blade.php:
<scirpt>
$(function(){
var show_modal = "{{ session()->pull('show_modal') }}";
if(typeof show_modal !== 'undefined' && show_modal) {
$('#modalId').modal('show');
// This will open up the modal if the variable is present in session as true
// OR you can simply show an alert message!
alert("Data has been submitted");
}
});
</script>
Hope this helps!