i have the 2 scripts below that pretty much do the same thing however are for 2 different sets of forms but get posted to the same page via ajax my question is there a way to minimize the amount of code required to do the job
like for example $(document).on('submit', 'form.frm_details','form.wa_cu_del', function(event)
<script>
$(function() {
$(document).on('submit', 'form.frm_details', function(event) {
event.preventDefault();
$.ajax({
url: '/limitless/functions2.php',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
if(data.status == '1') {
$('#info').html('<div class=\"alert alert-success alert-styled-left alert-arrow-left alert-bordered\"> ' + data.message + '<button type=\"button\" class=\"close\" data-dismiss=\"alert\" >×</button></div>');
$('.my-modals').modal('hide');
webapp_get_customers();
document.getElementById('frm_details0').reset();
}
if(data.status == '2') {
$('#info').html('<div class=\"alert alert-danger alert-styled-left alert-arrow-left alert-bordered\">' + data.message + '<button type=\"button\" class=\"close\" data-dismiss=\"alert\" >×</button></div>');
$('.my-modals').modal('hide');
}
}
});
});
});
</script>
<script>
$(function() {
$(document).on('submit', 'form.wa_cu_del', function(event) {
event.preventDefault();
$.ajax({
url: '/limitless/functions2.php',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
if(data.status == '2') {
$('.my-modals').modal('hide');
$('#info').html('<div class=\"alert alert-danger alert-styled-left alert-arrow-left alert-bordered\"> ' + data.message + '<button type=\"button\" class=\"close\" data-dismiss=\"alert\" >×</button></div>');
webapp_get_customers();
}
}
});
});
});
</script>
There is a change in your code, instead of
$(document).on('submit', 'form.frm_details','form.wa_cu_del', function(event)
you had to write
$(document).on('submit', 'form.frm_details, form.wa_cu_del', function(event)
Related
I'm have an html table with modal column (see image below for your reference)
Upon click the Order modal, I can access the its ID using onclick event in JavaScript
(var customer_id = $(this).val();)
I wanted to access and used it in my Add function using ajax but I'm having an error of "customer_id is not defined" when I tried to use it. Is there a way to fix it or do it properly.
This is my script
<script>
$(document).ready(function () {
// START OPEN CART MODAL FUNCTION
$(document).on('click', '.viewCart', function (e) {
e.preventDefault();
var customer_id = 0;
var customer_id = $(this).val();
console.log(customer_id);
$.ajax({
type: "GET",
url: "/get-cart/"+customer_id,
dataType: "json",
success: function (response) {
if (response.data != null) {
console.log(response);
$('.OrderTbody').html("");
$.each(response.data, function (key, item) {
$('.OrderTbody').append('<tr>\
<td>' + item.p_name + '</td>\
<td>' + item.c_qty + '</td>\
<td class="total">' + item.p_amt + '</td>\
<td><button type="button" value="' + item.c_id + '" class="btn btn-danger deleteListBtn btn-sm">Delete</button></td>\
\</tr>');
});
}
}
});
});
// END OPEN CART MODAL FUNCTION
// START ADD DATA FUNCTION
$(document).on('click', '.addToCart', function (e) {
e.preventDefault();
var data = {
'store': $('.sel_store').val(),
'product': $('.sel_product').val(),
'quantity': $('.sel_qty').val(),
// HOW TO INPUT Customer ID here, I tried this but im having an error of
// customer_id is not defined
'customer_id': customer_id,
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "/cart-list",
data: data,
dataType: "json",
success: function (response) {
}
});
});
// END ADD DATA FUNCTION
});
</script>
I'm creating a phonegap app.
This code is going to get by a json, the content on de database. Then I want to insert in the database the vote with the device.uuid. The problem is that the on("click") or on("touchstart") is not firing, not even in the alert(). Please help!!
$(document).ready(function() {
var url = "http://filmpix.esy.es/json.php";
$.getJSON(url, function(result) {
console.log(result);
$.each(result, function(i, field) {
var id = field.id;
$('.music-box').append("<button class='btn btn-default insert' value='" + id + "'>Votar</button>");
});
});
$(".insert").on("touchstart", function() {
alert("asdasd");
var music_id = $(this).val();
var dataString = "music_id=" + music_id;
$.ajax({
type: "POST",
url: "http://filmpix.esy.es/insert.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function() {
$("#insert").val('A votar...');
confirm("Tens a certeza que queres votar nesta musica?");
},
success: function(data) {
if (data == "success") {
alert("inserted");
$("#insert").val('Votado');
} else if (data == "error") {
alert("Não foi possível votar");
}
}
});
return false;
});
});
The return false statement should come after the function's "}" on your touch event.
I have an AJAX contact form with Bootstrap theme.
Here I have to tried to add alert box like this
$('#contact-form').find('.sashikanta').html(alertBox);
But the selector cannot able to find the class .sashikanta. In the place of the above simple alert is working fine and the email form working.
Below is my JS code.
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "mail.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.sashikanta').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
Please suggest I did not find anything through Firebug.
I'm facing with this problem : I have made a button report on every comment in a website to let people to report comment. I want if someone click on the button to be redirected to the popup window to let the people to login or register. I want after login/register is done this request(count) is send to database.
My problem is how can I perform this inside jQuery code :
if(isset($_SESSION['session_user'])) { /*do something*/ }.
Here is the code of what I already do :
return this.each(function (i) {
var count = 0;
$(this).append("<button class='" + parametres.button + " report" + i + "''><span class='glyphicon glyphicon-alert'> </span>" + parametres.textBtn + "</button>").on('click', function () {
// if ("<%php !$_SESSION['user_session'] %>") {
// Popup window
$('#myModal').modal('show');
// pane register
$('.btnReg').on('click', function () {
$.ajax({
url: 'includes/register.php',
data: {name: $('#nameReg').val(), email: $('#emailReg').val(), password: $('#passwordReg').val()},
type: 'POST',
beforeSend: function () {
//$('#error').fadeOut();
$("#error").html('<div class="alert alert-info"> <span class="glyphicon glyphicon-transfer">Envoi en Cours ...</span></div>');
},
success: function (data) {
if (data == 'exist') {
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>Ce mail n\'est pas disponible !</div>');
} else if (data == 'success') {
$("#error").html('<div class="alert alert-success"> <span class="glyphicon glyphicon-info-sign"></span>Inscripton effectuée !</div>');
} else {
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span>' + data + ' !</div>');
});
}
}
});
});
// pane login
$('.btnLog').on('click', function (elem, i) {
//event.preventDefault();
$.ajax({
url: 'includes/login.php',
data: {email: $('#emailLog').val(), password: $('#passwordLog').val()},
type: 'POST',
success: function (data) {
if (data == 'success') {
$("#error").html('<div class="alert alert-info"> <span class="glyphicon glyphicon-transfer">Connexion en Cours...</span></div>');
setTimeout(' window.location.href = "index.php"; ', 4000);
} else { //alert(data);
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>' + data + ' !</div>');
});
}
}
});
});
//}
//This is the thing to be done after login, where to put it ?
count = count + 1;
if (count >= parametres.juge) {
var content = $(this).text();
var click = count;
var tag = "<button class='" + parametres.button + " report" + i + "''>" + parametres.textBtn + "</button>";
$.ajax({
url: 'includes/controller.php',
data: {content: content,
click: click,
tag: tag},
type: 'POST',
success: function (data) {
if (!data.error) {
//alert(data);
alert('Success!');
}
}
});
$(this).animate({'opacity': 0}, 1000, function () {
$(this).text(parametres.textReplace).css('color', parametres.colorTex);
}).animate({'opacity': 1}, 1000);
}
});
});
You can use php to determine whether or not the user is logged in, and if they are print their id into a hidden input variable.
<?php isset($_SESSION['session_user']): ?>
<input type="hidden" id="session_user_id" value="<?php echo $_SESSION['session_user_id']; ?>">
<?php endif; ?>
Then in js when you need the id, you can use jquery to find it:
var session_user_id = $('#session_user_id').val();
Have you tried like this
if( <?php isset($_SESSION['session_user']) ?>) { do something }.
I have a textarea field where some data already exist
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="message" id="editor1">There is some lines with basic html tags like strong,underline</textarea>
If I change above to like this
<textarea name="message" id="editor1">Some new lines with basic html tags like strong,underline</textarea>
But after submit action Everything works fine but I always get old textarea data not new updated data.
While js code
$(document).on('click', ".send-mail", function (e) {
e.preventDefault();
var s_message=$("textarea[name=message]").val();
$('#send_mail').modal({backdrop: 'static', keyboard: false}).one('click', '#sendmail', function () {
sendMail(s_message);
});
});
function sendMail(s_message) {
jQuery.ajax({
url: 'request/sendmail.php',
type: 'POST',
data: s_message,
dataType: 'json',
success: function (data) {
if (data.status == "Success") {
$("#notify .message").html("<strong>" + data.status + "</strong>: " + data.message);
$("#notify").removeClass("alert-danger").addClass("alert-success").fadeIn();
$("html, body").scrollTop($("body").offset().top);
} else {
$("#notify .message").html("<strong>" + data.status + "</strong>: " + data.message);
$("#notify").removeClass("alert-success").addClass("alert-danger").fadeIn();
$("html, body").scrollTop($("body").offset().top);
}
}
});
}
</script>
I need new updated data to a PHP Post variable. Why it is not working?