I have a form inside a bootstrap modal that I want to submit via an Ajax request. I've followed along closely with this post. For some reason, I can't get the form to actually submit. Here's the HTML for my modal.
<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" 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>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="modal-form-close" method="post">
<input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
<input type="hidden" name="event_desc" value="{{event.desc}}">
<input type="hidden" name="status" value="closed">
<input type="text" name="resolution" value="">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
</div>
</div>
</div>
</div>
And here's my JavaScript:
<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
e.preventDefault();
$.ajax({
url: '/events/edit/{{event.event_id}}/script',
data: $('#modal-form-close').serialize(),
type: 'POST',
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
</script>
With the javascript written this way, nothing ever happens when I press submit the form. However, if I change the function to .on('click'), things work as expected. What am I missing?
Found the answer here.
I needed to wire the "click" action back to the submit button.
$('button#submit').on('click', function(e){
And add an id=submit to the submit button
<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
It's amazing how far you can get copy-pasting code from stack overflow.
Try to add this type in your button
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
I do this:
give a form an ID <form id="submit_modal">
make a button type="button" and tells him what to do when click onClick="document.getElementById('submit_modal').submit();". So the submit button will looks like this :
<button type="button" class="btn btn-primary" onClick="document.getElementById('submit_modal').submit();">Submit</button>
Related
How can I pass the value of my "ACTIVE" status attribute to my textbox? My goal is to update the status of my user by pressing ACTIVE button. Knowing that the user status is pending. I can easily pass the userID, but I'm having a problem in regards of passing the status.
I have provided screenshot below.
Views:
<button data-id="<?php echo $rows->transID?>" ustatus="Active" class="showmodal" class="fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> active
</button> // I can pass the ID to my textbox easily, but the status is not working.
<div id="fundModal" class="modal" 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">
<form action="#">
<div class="form-group">
<label for="">UserID</label>
<input type="text" id="usertransferid">
</div>
<div class="form-group">
<label for="">status</label>
<input type="text" name="status" id="user_status" value="">
</div>
</form>
</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>
Script:
<script>
$('.showmodal').on('click', function(e){
e.preventDefault();
$('#usertransferid').val(this.dataset.id);
$('#fundModal').modal('show')
})
$('#fundModal').on('hidden.bs.modal', function () {
$('#usertransferid').val('')
$('#ustatus').val('')
})
</script>
<script type="text/javascript">
$(document).on('click','.user_status',function(){
var status = $(this).attr('ustatus');
//get attribute value in variable
$('#user_status').val(status); //I tried passing the user status but it's not working
});
</script>
Controller:
public function user_status_changed()
{
//get hidden values in variables
$id = $this->input->post('id');
$status = $this->input->post('status');
$data = array('status' => $status );
$this->db->update('users', $data); //Update status here
//Create success message
$this->session->set_flashdata('msg',"User status has been changed successfully.");
$this->session->set_flashdata('msg_class','alert-success');
return redirect('welcome/users');
}
You don't get the status updated, because you getting undefined with $(this).attr('ustatus');
That's because $(this) points to the class user_status, which doesn't have an attribute ustatus
What you want is the value of the attribute ustatus of your button, which has a class showmodal, so you need to change your code to:
$(document).on('click','.user_status',function(){
var status = $('.showmodal').attr('ustatus'); // check the change here
$('#user_status').val(status);
});
P.S: in your button definition, you are using class="..." twice, which is faulty. Just do:
<button data-id="<?php echo $rows->transID?>" ustatus="Active" class="showmodal fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> active
</button>
I'm trying to redirect on button click based on visitor location and I have modal with two windows. As well as using freegeoip.net:
I'm using this with Wordpress: script correctly hooked to wordpress and running but redirect doesnt work.
I'd equally want this modal to appear only once per visit and across all navigations through the site not upon every page reload. Thanks in advance.
Below is the jQuery:
jQuery(document).ready(function(){
jQuery("#myModal").modal('show');
jQuery.ajax({
url: 'https://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// If the visitor is browsing from Canada.
if (location.country_code === 'CA') {
jQuery('#subscriber-ca').on('click', function(){
window.location.replace('http://www.google.com');
});
jQuery('#subscriber-us').on('click', function(){
// Redirect visitor to the USA.
window.location.replace('http://www.facebook.com');
});
} else if(location.country_code === 'US') {
jQuery('#subscriber-ca').on('click', function(){
window.location.replace('http://www.google.com');
});
jQuery('#subscriber-us').on('click', function(){
// Redirect visitor to the USA.
window.location.replace('http://www.facebook.com');
});
}
}
});
});
this is the modal:
<div id="myModal" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button id="subscribe-us" type="submit" class="btn btn-primary pull-left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
</form>
</div>
</div>
</div>
</div>
Try this code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myModal" class="modal fade">
<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">Subscribe our Newsletter</h4>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button id="ussubscribe" type="button" class="btn btn-primary pull-left">US Subscriber</button>
<button id="casubscribe" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
</form>
</div>
</div>
</div>
</div>
<script>
var locationstatus = false;
var userlocation = '';
jQuery(document).ready(function(){
jQuery.ajax({
url: 'https://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(locationresponse) {
userlocation = locationresponse.country_code;
locationstatus = true;
console.log(userlocation);
}
});
});
$('#ussubscribe').on('click', function(){
alert();
console.log(userlocation);
if (locationstatus) {
if(locationstatus=='CA'){
window.location.replace('http://www.google.com');
}
}
});
$('#casubscribe').on('click', function(){
console.log(userlocation);
if (locationstatus) {
if(locationstatus=='US'){
window.location.replace('http://www.facebook.com');
}
}
});
</script>
</body>
</html>
US Subscriber
change type="submit" to type="button" //also make sure
jQuery('#subscriber-us').on('click', function(){ //check the spelling which is subscribe-us
and add onclick events outside the ajax call
inside if else clause only hide/show modal and buttons
Replace your code:
<button id="subscribe-us" type="submit" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscribe-ca" type="submit" class="btn btn-primary pull-right">Canada Subscriber</button>
With:
<button id="subscriber-us" type="button" class="btn btn-primary pull left">US Subscriber</button>
<button id="subscriber-ca" type="button" class="btn btn-primary pull-right">Canada Subscriber</button>
And Bind click events outside the ajax if buttons are not dynamically created upon ajax request.
To check whether this is the first visit by the user, you can store value in session storage:
window.sessionStorage.setItem("first_visit", "Y");
While loading check for the session storage. If it is not present then open modal dialog.
Hope it helps.
I have a insert method on my vue.js with laravel, but... when i click on buton save twice, the function ´save()´ have duplicated datas and insert 2 times, i have tried solve this problem using v-on:click.stop.prevent="save()" but still doesnt working, so maybe a i can solve it on my ajax, but i dont have any idea of how to solve it with ajax, can someone help me?
Modal
<div class="modal inmodal" id="edit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<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">Register</h4>
<input type="hidden" v-model="competency.id">
</div>
<div class="modal-body">
<div class="form-group">
<label>Name: </label>
<input type="text" name="name" v-model="competency.name" class="form-control" placeholder="name"><br>
<label>Description: </label>
<textarea rows="5" name="" v-model="competency.description" class="form-control" placeholder="Description"></textarea><br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" v-on:click.stop.prevent="save()">Save</button>
</div>
</div>
</div>
</div>
Vue.js
save: function(){
var self = this;
self.competency._token = window.Laravel.csrfToken;
$.ajax({
url: "competency",
type: "POST",
dataType: 'json',
traditional: true,
data: self.competency
}).done(function (data) {
self.filter();
$("#edit").modal('hide');
fillCompetency(null);
//self.list = data;
});
},
well you could use on:click.once="save()" instead and it won't execute save method until the component is destroyed if thats your requirement.
I'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:
At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.
Here's the html code for the modal window:
<div class="modal" id="myModal">
<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">Approver Signature</h4>
</div>
<div class="modal-body">
<form id="saveEvent" action="update.php" method="post">
<div class="form-group">
<input type="hidden" name="id" value="123456">
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<label for="yourName">Approver Name</label>
<input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit">
<label for="managerNotes">Approver Notes</label>
<input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value="">
</div>
<div class="form-group">
<label for="yourSignature">Approver Signature</label>
<div id="signature"></div>
<button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.
Here's the Javascript that runs when the signature Save button is clicked:
$(document).ready(function() {
$('#btnSave').click(function() {
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
})
We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?
You can use an event handler.
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
You're done!
I page a page with several forms with buttons, like this:
<form name="openconfirm">
<input type="hidden" name="itemid" value="123">
<button type="submit" class="btn btn-sm btn-success ">Item 123</button>
</form>
<form name="openconfirm">
<input type="hidden" name="itemid" value="124">
<button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
<form name="openconfirm">
<input type="hidden" name="itemid" value="125">
<button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
Each button should open a bootstrap modal with more info about the selected item (so the modal content should be loaded from a remote page which has been passed the itemid param using POST or GET ?)
I believe it should be something like this:
<script>
$(function(){
$('form[name="openconfirm"]').on('submit', function(){
itemid = itemid input from form; <- Not actual code
openModal(#myModal, "file.php?itemid=" + itemid); <- Not actual code
})
})
</script>
I hope you can understand what I need and provide me with some solution. I would be thankful if you could provide me actual code since I'm new to javascript.
I'm open to better alternatives from the one I've provided.
Many thanks
Try with this HTML markup
<button type="button" data-toggle="modal" data-target="#myModal" id="123" class="btn someclass">Item 123</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="124" class="btn someclass">Item 124</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="125" class="btn someclass">Item 125</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">LOADED CONTENT</div>
</div>
</div>
and this jQuery
$(function () {
$('.someclass').on('click', function () {
var itemid = $(this).attr('id');
$(".modal-content").load("/file.php?itemid=" + itemid);
});
});
http://jsfiddle.net/3dSPw/1/
Currently, this doesn't load any new content because URL /file.php?itemid=123 it's not existent, but try it on your existing project.