I currently have a form. As per below.
<form action="/process" id="formTest" name="formTest" enctype="multipart/form-data" method="POST">
<input type="text">
</form>
I added a modal to confirm on the submit.
<div class="modal fade" id="bondModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>Test;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="accept" class="btn btn-primary">Accept</button>
</div>
</div><!-- /.modal-content -->
Now if the user submit, the modal of confirmation will be showed, and if the user subsequently choose accept, it will proceed the submit.
The problem is , the subsequent submit never works.
$('#formTest').submit(function(e) {
e.preventDefault();
$('#bondModal').modal('show');
$("#accept").click(function(e) {
$("#formTest").submit();
e.preventDefault();
$('#bondModal').modal('hide');
}
);
} });
The thing is if I change the code to reset instead of submit..it works for reset ..
$('#formTest').trigger('reset');
You've got yourself stuck in a loop.
When you fire the action:
$("#formTest").submit();
You are not submitting the form because you are calling your own function which prevents the default action:
$('#formTest').submit(function(e) {
e.preventDefault();
//do stuff
});
If you want to use the code you have currently you can do 1 of 2 things:
use one() on the submit function so it only fires once. This would require you to rebind on a reset or cancel
$('#formTest').one('submit', function(e) {
e.preventDefault();
//do stuff
});
Or unbind the submit function just before your forced submission.
$('#formTest').on('submit', function(e) {
e.preventDefault();
$("#accept").click(function(e) {
$('#formTest').unbind('submit');
$('#formTest').submit();
});
});
However, I would go a different way, and take the submit button out of the visible markup on the page. Just put an a tag in the form that you fire the open-modal function from upon click. Then you don't need to do any submission in your code, you just have the standard submit and reset buttons in the modal and they carry out their default behavior:
The markup:
<form>
<input type="text">
<a class="open-modal">Submit</a>
<div class="modal">
<h4 class="modal-title">Confirm?</h4>
<p>Test</p>
<input type="reset" class="btn btn-default">Cancel</button>
<input type="submit" class="btn btn-primary">Accept</button>
</div>
</form>
And the code:
$('a.open-modal').on('click', function(e) {
e.preventDefault();
$('.modal').fadeIn();
});
Much simpler. Hope this helps.
The issue is this line:
document.getElementbyname("formTest").submit();
There is no function called "getElementbyname()". It seems you are looking for document.getElementsByName() which returns a NodeList. In that case:
document.getElementsByName("formTest")[0].submit();
However, you can also use the document.forms array:
document.forms["formTest"].submit();
Finally, since your form has an ID, you could also use that:
document.getElementById("formTest").submit();
Related
I have a button which is supposed to trigger a modal with a contact form. Part of the show.bs.modal function is an AJAX call to my DB to get some file details which are then meant to be shown in the modal-body.
The problem is that the modal does indeed open, but with no modal-body content, which means that the JavaScript code to trigger to the AJAX call is not working. I do not see any network activity in the browser debug menu, no call to the PHP file, and even an alert on top of the JS code telling me that that a button was pressed is not triggered. It seems like the whole JS code is circumvented, yet the modal still shows.
The same code works in another project, anyone has any idea as to why this is happening?
Button:
<div class="card-footer bg-light text-center">
<button id="modal_btn" name="modal_btn" type="button" class="btn bg-teal-400" data-toggle="modal" data-target="#modal_contact_form" data-imgid="'.$row['image_id'].'" data-keyboard="true">
<span class="icon-ico-mail4"></span> Anfragen
</button>
</div>
Modal:
<!-- Contact form modal -->
<div id="modal_contact_form" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-300">
<h3 class="modal-title">Kaufanfrage - Artikel #1234</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Abbrechen</button>
<button type="submit" class="btn bg-teal-300">Nachricht Senden</button>
</div>
</form>
</div>
</div>
</div>
<!-- /contact form modal -->
JavaScript:
<script type="text/javascript">
// DISPLAY EDIT RECORD MODAL
$('#modal_contact_form').on('show.bs.modal', function (event) {
//var button = $(event.relatedTarget) // Button that triggered the modal
window.alert("button clicked.");
var imgid = $(event.relatedTarget).data('imgid') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'action=contact&imgid=' + imgid;
$.ajax({
type: "POST",
url: "./assets/ajax/ajax_action.php",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.modal-body').html(data);
},
error: function(err) {
console.log(err);
}
});
});
</script>
try this:
$(document).on('show.bs.modal','#modal_contact_form', function (event) {
// TODO ....
});
Or you can use the onclick button trigger instead of modal show trigger
$("#modal_btn").click(function(event){
// TODO ...
});
Try This
const bsModal = document.querySelector('#exampleModal');
$(bsModal).on('shown.bs.modal', function() {
// YOUR CODE HERE....
})
I'm making event booking system using fullCalendar.js with the backhand of codeigniter, first there is 2 role user and Admin, User can book the event and delete the event but i want to show delete button only Admin and user which book the event. So can anyone please tell me how this can be possible.The delete button in modal box and show on eventClick in Calendar.My Html and javascript are
<div id="calendarModal" class="modal fade">
<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">Event Details</h4>
</div>
</div>
<input type="hidden" id="eventID"/>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
</div>
</div>
//----------------------Javascript-------------------------------
$('#deleteButton').on('click', function(){
// delete button
doDelete();
});
function doDelete(){
$("#calendarModal").modal('hide');
var eventID = $('#eventID').val();
var baseUrl = document.location.origin;
$.ajax({
url: baseUrl+'/mrbs/api/post_api',//
data: 'action=delete&id='+eventID,
type: "POST",
});
$('#calendar').fullCalendar('refetchEvents');
}
Thanks in advance ........:)
You should probably control display of the delete button on the server-side, not in Javascript on the client. That means using Codeigniter when rendering the modal, so for example:
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<?php if ( ... test if user is admin ... ) { ?>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
<?php } ?>
</div>
You should also confirm in your controller method (/mrbs/api/post_api) that the user is an admin before actually doing the delete.
UPDATE
If you want to display only events created by the current user, you should handle that on your server-side event source. You have not posted your Fullcalendar code, but you must have something like:
$('#calendar').fullCalendar({
// ... code
events: "some/path/to/server-side-json",
});
In your some/path/to/server-side-json controller method, check the user id of the user making this query, and only return events created by that user.
Basically, the extension I am working on is supposed to show an alert box when clicked. However the button does it's job by going to the next step "skipping verification" without showing the box as it should.
When the button is clicked, I receiving this back from the console.
$("#usps_skip").click(function() {
console.log("skipCLicked");
var msg = "No address information will be stored with the Contact record if you skip USPS verification. Do you still wish to skip the USPS verification step?";
$('#errorModal .modal-body').html(msg.split('\n').join('<br />'));
$('#errorModal').modal('show');
});
The "skipCLicked" log is showing up in the console, but the actual modal message alert is not appearing. Any suggestions?
Below is my code in the chrome extension.
js code
switch(ObjField.id)
{
//other case code removed since it is not necessary
case "usps_skip":
str_field = str_field + '<button class="btn btn-danger" data-target="#errorModal" name="'+ObjField.name+'" id="'+ObjField.id+'" value="">'+ObjField.label+'</button>';
//str_field = str_field + '<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#errorModal" name="'+ObjField.name+'" id="'+ObjField.id+'" value="">'+ObjField.label+'</button>';
break;
modal / tabs.htm
<div id="errorModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" id="modalSkip" class="btn btn-success" data-dismiss="modal">Skip Verification</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The button works as it should but no message shows, any help would be appreciated.
Edit: console.log("skipCLicked"); is shown via console, so it works up to that point.
Did You try:
$('#myModal').on('shown.bs.modal', function (e) {
console.log('is modal open?'); // does it shown in console? if not then modal is not open.
// do something... like $('#errorModal .modal-body').html(msg.split('\n').join('<br />'));
});
Ps. if console.log('is modal open?') shown in console then You must check why modal is invisible. There can be many reasons, no height/width , to low z-index etc.
On my html page, I got just a simple Bootstrap modal and button to call it:
<button class="btn btn-primary" data-toggle="modal" data-target="#addUpdateGroup">Add group</button>
<div class="modal fade" id="addUpdateGroup" tabindex="-1" role="dialog" aria-labelledby="addUpdateGrouplLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<form name="addUpdateGroupForm" ng-submit="addUpdateGroupForm.$valid && groupCtrl.addUpdateGroup()" novalidate>
<div class="modal-body">
<input type="hidden" ng-model="groupCtrl.group.id" name="groupid" />
<label for="groupname">Group name:</label>
<br>
<input ng-model="groupCtrl.group.name" type="text" name="groupname" id="groupname" required />
<br><br>
<label for="groupcolor">Boja grupe:</label>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
It's a just simple form. The validation is done by AngularJS.
Now...when user submits the form, I'd like for the modal to close, but ONLY if it was valid input.
So I've put the code for closing the modal into the controller:
this.addUpdateGroup = function() {
// Adding a new group
if (typeof this.group.id === 'undefined') {
this.id += 1;
this.group.id = this.id;
this.groups.push(this.group);
// Updating an existing group
} else {
this.groups[this.group.id].name = this.group.name;
this.groups[this.group.id].color = this.group.color;
}
// Clean the form and remove the modal
this.group = {};
$scope.addUpdateGroupForm.$setPristine(true);
$('.modal').modal('hide');
};
But this doesn't follow the best practice of not manipulating the DOM from the controller.
QUESTION: Is there a better way? How would you implement a modal which needs to be shown or hidden when certain function in controller is called?
You are not following Angular best practices. If you havent done so already, review this legendary answer: https://stackoverflow.com/a/15012542/202913 Specifically points 1 - 3 of that post.
That out of the way, you should be using either of the following two libraries. Both of them implement Bootstrap's functionality, but with a native Angular implementation, i.e. it does not rely on the Javascript library of Bootstrap (but does use the Bootstrap's CSS):
angular-ui/bootstrap
angular-strap
Both are excellent, so use whichever library feels more comfortable to your coding style.
I have a modal window that pops up when I want to add a new project to my dashboard. I have gotten it to work with jquery post however, I cannot prevent it from refreshing. What I want to do is after the project is added to the database, show a success message and close the modal window after few seconds and not refresh the page (parent page of modal).
Here is my modal
<div class="modal fade" id="add-project-dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Add a new Project</h4>
</div>
<div class="modal-body">
<h3>New Project:</h3>
<form class="form-horizontal" id="add-project-form" action="/projects/add" method="POST">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Project Name</label>
<div class="col-md-4">
<input id="name" name="name" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="description">Project Description</label>
<div class="col-md-4">
<input id="description" name="description" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="project_state">Project State</label>
<div class="col-md-4">
<input id="project_state" name="project_state" type="text" placeholder="" class="form-control input-md">
</div>
</div>
</fieldset>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="add-btn" class="btn" type="submit">Add</button>
</div>
</form>
</div>
</div>
Here is my project-dashboard.js
AddProject = function(){
$(document).ready(function() {
$("#submit").submit(function(event){
event.preventDefault();
$.ajax({
url: "/projects/add",
type:"POST",
data:
{
'name': $('#name').val(),
'description': $('#description').val(),
'project_state': $('#project_state').val()
}
});
});
});
}
My views.py
class AddProject(webapp2.RedirectHandler):
def get(self):
template_values = {
#'greetings': greetings,
#'url_linktext': url_linktext,
}
path = os.path.join(os.path.dirname(__file__), '../templates/project-add.html')
self.response.write(template.render(path, template_values))
def post(self):
project = Project()
project.name = self.request.get('name')
project.description = self.request.get('description')
project.project_state = self.request.get('project_state')
time.sleep(2)
project.put()
self.redirect('/projects')
I have tried removing the self.redirect('/projects') however that only takes me to a blank page that is /projects/add (that is the action in the form).
The issue is that you added .ready(foo) handler inside of the AddProject function. I suppose that document is loaded when AddProject is called.
Another issue is that in your HTML, the form has id add-project-form, so you should do $("#add-project-form") instead of $("#submit").
$(document).ready(function () {
$("#add-project-form").submit(function(event){
event.preventDefault();
$.ajax({
url: "/projects/add",
type:"POST",
data:
{
'name': $('#name').val(),
'description': $('#description').val(),
'project_state': $('#project_state').val()
}
});
});
});
});
Take ready handler outside of the AddProject function and it should work (the submit handler is added).
Edit: After some debugging, the answer was to use the right id and proper placing of the javascript code, as noted by the comments.
For starters, a refresh is easy to avoid, just make sure to prevent the default event from running; since you're using jQuery, I would recommend doing return false to end the function, since it both 'prevents default' and 'stops propagation'.
So the first thing you should do is check if your javascript code is actually running and not erring in the middle of execution. If everything is fine there, the worst case is that the project is not actually added (server side error) but the page should not refresh.
Your server side code has nothing to do with the refresh (if it's being properly hijacked), so the response doesn't really matter, I would actually return the id of the new project (so you could provide a link for the newly created item or something like that), but i digress...
Here is a snippet for not only closing modals without page refresh but when pressing enter it submits modal and closes without refresh
I have it set up on my site where I can have multiple modals and some modals process data on submit and some don't. What I do is create a unique ID for each modal that does processing. For example in my webpage:
HTML (modal footer):
<div class="modal-footer form-footer"><br>
<span class="caption">
<button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button>
<button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a>
</span>
</div>
jQUERY:
$(document).ready(function(){
// Allow enter key to trigger preloadorders form
$(document).keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(".trigger").is(".ok")) //custom validation dont copy
$("#PreLoadOrders").trigger("click");
else
return;
}
});
});
As you can see this submit performs processing which is why I have this jQuery for this modal. Now let's say I have another modal within this webpage but no processing is performed and since one modal is open at a time I put another $(document).ready() in a global php/js script that all pages get and I give the modal's close button a class called: ".modal-close":
HTML:
<div class="modal-footer caption">
<button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
jQuery (include global.inc):
$(document).ready(function(){
// Allow enter key to trigger a particular class button
$(document).keypress(function(e) {
if(e.which == 13) {
if($(".modal").is(":visible")){
$(".modal:visible").find(".modal-close").trigger('click');
}
}
});
});
Now you should get no page refreshes on any of your modals if u follow these steps.