Develop Reference

Multiple checkbox selection at AJAX when button clicked

<script>
function display() {
$.ajax({
url: "tmp.php",
type: "get",
data: {
a: $('#selecttmp option:selected').val()
}
}).done(function(data) {
$('#result').text(data);
alert(data);
$(document).ready(function() {
$('.#buttontmp').click(function() {
$('.data').prop('checked', this.checked);
});
});
});
}
</script>
When button is clicked, it reads the select option value and check up every relevant checkbox based on their name.
Using AJAX, select option value could be found without any refresh but checkboxes aren't checked. Am I using jquery wrongly?

<script>
function display() {
$.ajax({
url: "test.php",
type: "get",
data: {
a: $('#selectest option:selected').val()
}
}).done(function(data) {
$('#result').text(data);
alert(data);
$('input:checkbox[name='+data+']').each(function() {
this.checked = true;
});
});
}
</script>
I have figure out the solution myself, thanks for the correction that made by #CBroe.

AJAX and JQuery parseerror

I'm trying to show an error div in a form and hide it when I make a key in the text field. The problem is given when I import the Jquery library in the JSP and in the JS I declare the Jquery function. I do not run the submit form and in the Chrome console, Firefox, IE shows me a parseerror error. In the comes to enter the AJAX call (I added a console.log ()). I tried to comment the dataType line and even change the type of json to text in the AJAX call and it still gives me a parseerror. If I do not comment the dataType line does not enter the AJAX call. It stays in the $.ajax
This image is the console output of the code I left here.
JSP code:
spring:url value="/resources/js/jquery-3.4.1.js" var="jqueryJs" />
<script src="${jqueryJs}"></script>
<%-- <script type="text/javascript" src="/openiam-ui-static/js/common/jquery/jquery-1.9.1.min.js"></script>--%>
<script type="text/javascript" src="/openiam-ui-static/js/common/openiam.common.js"></script>
<%--<script type="text/javascript" src="/openiam-ui-static/moment/moment-with-locales.min.js"></script>--%>
<script type="text/javascript" src="/openiam-ui-static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/openiam-ui-static/bootstrap/js/bootbox.min.js"></script>
<script type="text/javascript" src="/openiam-ui-static/bootstrap/js/bootstrap-notify.js"></script>
<script type="text/javascript" src="/openiam-ui-static/bootstrap-ui/js/bootstrap-toggle.min.js"></script>
JS code:
jQuery(document).ready(function($) {
$("#error").hide();
$("#otp-form").submit(function(event) {
event.preventDefault();
sendOTP();
});
// $("#smsCode").on("input",function(){
// if($("#smsCode").val().length < 1){
// $("#error").hide();
// }else{
// $("#error").show();
// }
// });
});
function sendOTP() {
$("#error").empty().hide();
var otpToken = {};
otpToken["smsCode"] = $("#smsCode").val();
otpToken["authToken"] = $("#authToken").val();
otpToken["postbackURL"] = $("#postbackURL").val();
$.ajax({
url : "otpToken",
type : "POST",
//dataType : "json",
data : JSON.stringify(otpToken),
success : function(data) {
console.log("SUCCESS: ", data);
if(data.code == 200) {
var redirectURL = data.redirectURL;
if(redirectURL != null && redirectURL != undefined && redirectURL.length > 0) {
window.location.href = redirectURL;
}
console.log(data);
} else if(data.code == 103) {
//Account Locked
} else {
$("#error").empty().hide();
$("#error").show();
$("#error").append("<a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a>");
$.each(data.errorList, function(idx, val) {
$("#error").append($(document.createElement("div")).text(val.message));
});
}
},
error : function(e) {
console.log("ERROR: ", e);
},
done : function(e) {
console.log("DONE");
disableButtons(false);
}
});
}
This image is the console output of the code with decomposed dataType.

jQuery to prevent form from submit does not work - asp classic

I am calling a function on submit to check whether required uploads are done or not and if there are no uploads in the database, the form should not be submitted.
By using alert , I can see that my checkuploads.asp is returning the correct value and it is displaying the alert that data was not found but it is not preventing the form from submitting.
$(window).load(function() {
$('#Save').click(function() {
$.ajax({
type: "POST",
url: "checkuploads.asp?value=" + $('#RequestNo').val(),
success: function(data) {
if (data === "Not Found") {
alert("the data was not found");
data.preventDefault();
window.history.back();
return false;
} else
if (data === "Found") {
alert("the data was found");
alert(data);
}
}
});
});
});
Thanks in advance.

Because you are using ajax request, the response will offcourse take some time, before that the form is getting submitted. So, you need to return false; after ajax call.
$(window).load(function() {
$('#Save').click(function() {
$.ajax({
type: "POST",
url: "checkuploads.asp?value=" + $('#RequestNo').val(),
success: function(data) {
if (data === "Not Found") {
alert("the data was not found");
//data.preventDefault();//Remove this un-necessary line
window.history.back();
//return false;//Remove this too. It is un-necessary
} else
if (data === "Found") {
alert("the data was found");
alert(data);
//Replace the form id with correct one
("#myForm").submit();//Add this line
}
}
});
return false;
});
});
Here is the complete example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<form id="myForm" action="/my-listener">
<input type="text" name="RequestNo" id="RequestNo" />
<input type="button" id="Save" value="Save" />
</form>
</div>
<script>
$(document).ready(function() {
$('#Save').click(function() {
$.ajax({
type: "POST",
url: "checkuploads.asp?value=" + $('#RequestNo').val(),
success: function(data) {
if (data === "Not Found") {
alert("the data was not found");
window.history.back();
} else if (data === "Found") {
alert("the data was found");
alert(data);
$("#myForm").submit();
}
}
});
return false;
});
});
</script>
</body>
</html>

Try this:
$(window).load(function() {
$('#Save').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "checkuploads.asp?value=" + $('#RequestNo').val(),
success: function(data) {
if (data === "Not Found") {
alert("the data was not found");
data.preventDefault();
window.history.back();
return false;
} else
if (data === "Found") {
alert("the data was found");
window.location.replace( "checkuploads.asp?value=" + $('#RequestNo').val()); // you can chanbge url as per your need
// in case of form use
$('#form').submit();
alert(data);
}
}
});
return false;
});
});

Call Function Upon Document Ready

I need to start polling a URL upon the page loading, to get a JMS response from a credit card server. I put the following together.
It works, but only if I hit the Refresh button on the browser. I want the data from the URL to load automatically when the page is first displayed, without requiring the user to Refresh.
I am missing a fundamental concept here, and would appreciate any advice on how to make it work. I have about 2 days of JavaScript experience so far.
<html>
<body>
<div id="p_results"></div>
<script type="text/javascript">
$(document).ready(function() {
function doJMSPolling() {
$.ajax({
url: "./poll",
type: "GET",
dataType: "text",
success: function(json) {
var json = $.parseJSON(json);
if (json.status === 'continue-polling' && json.msg === 'ok') {
setTimeout(function() {
doPolling();
}, 2000);
}
else if (json.status === 'stop-polling' && json.msg === 'success') {
for (key in json) {
if (key === "providerResponse") {
res = json[key];
for (reskey in res) {
$("#p_results").append(reskey + ":" + res[reskey] + "<br>");
}
}
}
} else if (json.status === 'stop-polling') {
$("#p_results").text(json.status);
}
}
});
}
});
</script>
</body>
</html>

You don't have to place the actual function definition inside your document.ready callback. The function can sit anywhere inside the <script> tags. Once you have done that, all you need to do is call the function from within the document.ready callback -
<script type="text/javascript">
$(function(){
doJMSPolling();
});
function doJMSPolling(){
...
}
</script>
Note :
$(function(){}) is shorthand for $(document).ready(function(){})

Seems to me that you're declaring your function, but not calling it. In order for the function's code to execute you'll need to add this after the function declaration within document.ready:
doJMSPolling();

Don't put your function within the document.ready, simply call it in there. Try this:
$(document).ready(function() {
doJMSPolling();
});
function doJMSPolling() {
$.ajax({
url: "./poll",
type: "GET",
dataType: "text",
success: function(json) {
var json = $.parseJSON(json);
if (json.status === 'continue-polling' && json.msg === 'ok') {
setTimeout(function() {
doPolling();
}, 2000);
}
else if (json.status === 'stop-polling' && json.msg === 'success') {
for (key in json) {
if (key === "providerResponse") {
res = json[key];
for (reskey in res) {
$("#p_results").append(reskey + ":" + res[reskey] + "<br>");
}
}
}
}
else if (json.status === 'stop-polling') {
$("#p_results").text(json.status);
}
}
});
}

checkbox - checked or unchecked with jQuery and MySQL

I am currently creating a system where it has to be possible to check/uncheck a checkbox. Everytime it changes status I need jQuery to make an AJAX call to a page, that updates the database.
How can I do this?

For example you can do it like this:
First you have to look if the checkbox is checked:
$("#yourSelector").live("click", function(){
var id = parseInt($(this).val(), 10);
if($(this).is(":checked")) {
// checkbox is checked -> do something
} else {
// checkbox is not checked -> do something different
}
});
You can load specific content via Ajax:
$.ajax({
type: "POST",
dataType: "xml",
url: "path/to/file.php",
data: "function=loadContent&id=" + id,
success: function(xml) {
// success function is called when data came back
// for example: get your content and display it on your site
}
});

Which bit are you stuck on? You should probably have something like this...
$('#myCheckbox').click(function() {
var checked = $(this).is(':checked');
$.ajax({
type: "POST",
url: myUrl,
data: { checked : checked },
success: function(data) {
alert('it worked');
},
error: function() {
alert('it broke');
},
complete: function() {
alert('it completed');
}
});
});

Detect if checkbox is checked:
if ( $('#id').is(':checked') ) { }
This can be executed in a function that is triggered by "onchange" event.
function checkCheckboxState() {
if ( $('#id').is(':checked') ) {
// execute AJAX request here
}
}

Something like this probably?
$('.checkbox').click(function (){
var val = $(this).is(':checked');
$.load('url_here',{status:val});
});

<input type="checkbox" name="foo" value="bar" class="checkIt"/>
<script type="text/javascript">
$('.checkIt').bind('click', function() {
if($(this).is(":checked")) {
// checkbox is checked
} else {
// checkbox is not checked
}
});
</script>
You can now have more than one checkbox.