Develop Reference

How to access id of the modal globally using JavaScript Laravel Laravel

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>

button click delete dom hide element preventing me to show it

I'm doing a simple thing but I do not understand why it occurs the following problem: when I enter a value in the form and click the button to execute the function the 'loading' the element disappears and can not be shown.
The Javascript is the following:
<div>
<input id="magLog" name="magLog" type="text" style="width: 500px;"/>
<button id="StartITSMcheck">Check</button>
</div>
<div>
<div id="logContainer" class="filtersUNoBorder" style="padding-left: 8px; height:auto">
<div id="loading" class="clear loading">
Caricamento in corso...</div>
<!--Add text after check-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#loading").hide();
});
$("#StartITSMcheck").click(function () {
if ($("#magLog").val() != "" && $("#magLog").val() != undefined) {
$('#loading').show(); // show the loading message.
$.ajax({
type: "GET",
url: '<%= Url.Action("StartITSMcheck", "Integration") %>',
async: false,
data: { "magLog": $("#magLog").val() },
datatype: "html",
success: function (result) {
$("#logContainer").html(result);
$('#loading').hide(); // hide the loading message
},
error: function (req, status, error) {
if (req.responseText.indexOf('12017') != -1) {
alert("CATCH: Status: " + status + " Error " + req.responseText);
}
else {
alert("Error getting data.com -> Req.responseText: " + req.responseText + "Req.status: " + req.status + " status: " + status + " error: " + error);
}
}
});
} else $("#logContainer").html("<p>Gentilmente inserire un magazzino logico</p>");
});
</script>

$("#logContainer").html(result);
This is probably the cause of the problem. You're replacing everything inside the div with your response, that includes your loading element. Try placing it outside the div, like this:
<div id="logContainer" class="filtersUNoBorder" style="padding-left: 8px; height:auto">
<!--Add text after check-->
</div>
<div id="loading" class="clear loading">Caricamento in corso...</div>

textarea update not working with ajax submit

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?

jQuery validation submitHandler not work in $.ajax post form data

I have Send data using $.ajax and validation with jQuery validation plugin like this :
<div class="" id="ajax-form-msg1"></div>
<form id="myform" action="load.php">
<input type="input" name="name" id="name" value="" />
<input type="hidden" name="csrf_token" id="my_token" value="MkO89FgtRF^&5fg#547#d6fghBgf5" />
<button type="submit" name="submit" id="ajax-1">Send</button>
</form>
JS:
jQuery(document).ready(function ($) {
$('#myform').validate({
rules: {
name: {
required: true,
rangelength: [4, 20],
},
},
submitHandler: function (form) {
$("#ajax-1").click(function (e) {
e.preventDefault(); // avoid submitting the form here
$("#ajax-form-msg1").html("<img src='http://www.drogbaster.it/loading/loading25.gif'>");
var formData = $("#myform").serialize();
var URL = $("#myform").attr("action");
$.ajax({
url: URL,
type: "POST",
data: formData,
crossDomain: true,
async: false
}).done(function (data, textStatus, jqXHR) {
if (data == "yes") {
$("#ajax-form-msg1").html(' < div class = "alert alert-success" > ' + data + ' < /div>');
$("#form-content").modal('show');
$(".contact-form").slideUp();
} else {
$("#ajax-form-msg1").html('' + data + '');
}
}).fail(function (jqXHR, textStatus, errorThrown) {
$("#ajax-form-msg1").html(' < div class = "alert alert-danger" >AJAX Request Failed < br / > textStatus = ' + textStatus + ', errorThrown = ' + errorThrown + ' < /code></pre > ');
});
});
}
});
});
In action my form validate using jQuery validation but after validation not submit and not send data.
how do fix this problem?!
DEMO HERE

The submitHandler is expecting a submit and you have a click event inside it and then an ajax call.
If you have a button type="submit" inside a form you don't even need a click event, the plugin will do the validation automatically. So just make the ajax call inside the submitHandler.
If you need to bind the action to a button using the click event, the proper approach should be something like this:
$('#button').click(function(){
var form = $('#myform').validate({...}); #store the validator obj
if (form.is_valid()){
// submit using ajax
} else {
// dont do anything
}
});

Call form.submit() at the end of your done function.
See: http://jqueryvalidation.org/validate/
Also, you do not need $("#ajax-1").click() because the submitHandler will be called automatically when you click on that button anyways. You can test this yourself by putting a console.log as the first line of submitHandler. Then fill out the form and press the button. See if it prints out your log message.

In submitHandler you are handling the submit , then again why did you write click event?
Here is the fix.
jQuery(document).ready(function($) {
$('#myform').validate({
rules: {
name: {
required: true,
rangelength: [2, 20],
},
},
submitHandler: function(a, e) {
//a is form object and e is event
e.preventDefault(); // avoid submitting the form here
$("#ajax-form-msg1").html("<img src='http://www.drogbaster.it/loading/loading25.gif'>");
var formData = $("#myform").serialize();
var URL = $("#myform").attr("action");
$.ajax({
url: URL,
type: "POST",
data: formData,
crossDomain: true,
async: false,
success: function(data) {
console.log(data)
},
error: function(err) {
console.log(err)
}
}).done(function(data, textStatus, jqXHR) {
if (data == "yes") {
$("#ajax-form-msg1").html(' < div class = "alert alert-success" > ' + data + ' < /div>');
$("#form-content").modal('show');
$(".contact-form").slideUp();
} else {
$("#ajax-form-msg1").html('' + data + '');
}
}).fail(function(jqXHR, textStatus, errorThrown) {
$("#ajax-form-msg1").html(' < div class = "alert alert-danger" >AJAX Request Failed < br / > textStatus = ' + textStatus + ', errorThrown = ' + errorThrown + ' < /code></pre > ');
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<form id="myform" action="load.php">
<input type="input" name="name" id="name" value="" />
<input type="hidden" name="csrf_token" id="my_token" value="MkO89FgtRF^&5fg#547#d6fghBgf5" />
<button type="submit" name="submit" id="ajax-1">Send</button>
</form>
Use success and error call backs to get data or error messages.
Note: Here (In StackOverflow) you will get 404 Page Not Found error when you submit. So try in your local.

Custom title on modal button while using a onclick on it

I have a modal button that call a ajax function. I pass an "id" as argument of the function.
<div class="modal-footer" >
<button type="button" class="btn btn-default" data-dismiss="modal">Cierra</button>
<button type="button" class="btn btn-danger" id="myModalId" data-customer-id="myModalId" onclick="myCall(this)" >Erase</button>
</div>
"myModalId" is the the parameter I have to pass to the mycall funtion using data-customer-id.
the mycall script is:
function myCall(self) {
self = $(self);
var point = $('#myModal #'+self.data("customer-id")).text();
//alert(point);
var request = $.ajax({
url: "./php/deleteLocation.php",
type: "GET",
data: { pointPHP: point},
success: function(response) {
location.reload();
}
});
request.done(function(msg) {
$("#mybox").html(msg);
$('#myModal').modal('hide');
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
$('#myModal').modal('hide');
});
}
I works but the title of the button is the same of the argument (ie 231), while I want a custom title like "Erase".
Where is my foult?