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.
Related
I saw some posts with this question, but I still have the problem. When I make my ajax call, it returns the data that I expect, but with the HTML code of the whole page. I tried to put dataType : 'Jason' and many other things, but they don't help me.
function validarUsuario()
{
var Pseudo = $('#Pseudo').val();
$.ajax({
url:'Bienvenu.php',
method:"POST",
data:{'Pseudo':Pseudo},
success:function(data)
{
console.log('|' + data + '|')
if(data != '0')
{
alert('pseudo already taken');
}else
{
alert('pseudo correct');
}
}
});
}
///Bienvenu.php/////
if(!$stmt->execute())
{
$sBody .= 'erreur<br />';
}
else
{
$iNbResultat = $stmt->rowCount();
echo $iNbResultat;
}
///OUTPUT Firefox/// This is the data when I use console.log(data)
|<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script>
0</body>
</html>
A button in my view needs to be created depending on a state.
Index.cshtml:
<html>
<head>
<script src="~/scripts/jquery-3.3.1.js"></script>
<script src="~/scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#send_request_button").on('click', function () {
$.ajax({
url: "SendRequest",
method: "GET",
}).done(function (request_result) {
if (request_result != null && request_result == '1') {
alert("Attempting button disabling");
#*attempt 1*#
#*$(this).prop("disabled", true);*#
#*attempt 2*#
$(this).attr("disabled", "disabled");
}else {
alert("Could not disable Button");
}
});
});
</script>
</head>
<body>
<div>
#{
if (ViewBag.ButtonFlag != null && ViewBag.ButtonFlag)
{
Response.Write("<text id=\"send_request_text\"></text>");
Response.Write("<input id=\"send_request_button\" type=\"button\" value=\"Send Insert Request\"/>");
}
}
}
</body>
</html>
This is giving the button correctly and it is clicked, the expected result after the successful jquery ajax, which is in this case 1, is received. But none of the two attempts to disable the dynamic button is producing the expected result.
Try this instead of $(this) use element id to select in done() It is because the scope of using 'this' keyword won't be available if used in other function:
$("#send_request_button").on('click', function () {
$.ajax({
url: "SendRequest",
method: "GET",
}).done(function (request_result) {
if (request_result != null && request_result == '1') {
alert("Attempting button disabling");
#*attempt 1*#
#*$(this).prop("disabled", true);*#
#*attempt 2*#
$("#send_request_button").attr("disabled", "disabled");
}else {
alert("Could not disable Button");
}
});
});
I use an ajax process to modify user's state on an index.php file.
It works but I would like to color my div function of the user's state
My code:
function recupstatut() {
$.post('recup.php', function(data) {
$('.cont2').html(data);
var content = document.querySelector('#cont2');
var status2 = content.innerHTML;
if (status2 == "En-ligne") {
content.style.backgroundColor = "#4CAF50";
} else {
content.style.backgroundColor = "#f44336";
}
});
}
setInterval(recupstatut, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="cont2" id="cont2">
</div>
The condition always applies the else state:
content.style.backgroundColor = "#f44336";
I think the problem comes from var status2 =
How can I fix this?
HTML
<div class="cont2" id="cont2"></div>
SCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
function recupstatut() {
$.post('recup.php', function(data) {
console.log(data);
var status2 = data.trim();
console.log(status2);
$('.cont2').html(status2);
if (status2 == "En-ligne") {
content.style.backgroundColor = "#4CAF50";
} else {
content.style.backgroundColor = "#f44336";
}
});
}
setInterval(recupstatut, 1000);
</script>
what went wrong is that you imported jquery file after calling the function
so make the import in top of calling your function
your mistake was that you made the import after calling the function, that is why you got undefined error.
As you say you echo string in your page then you can check this one directly from the data as per below code.
Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(function(){
function recupstatut() {
$.post('recup.php', function(data) {
$('#cont2').html(data); // If the data return from the php page as a string then you can compare it directly.
if (data == "En-ligne") {
$('#cont2').css("backgroundColor","#4CAF50");
} else {
$('#cont2').css("backgroundColor","#f44336");
}
});
}
setInterval(recupstatut, 1000);
});
</script>
HTML:
<div class="cont2" id="cont2"></div>
function recupstatut(){
$.post('recup.php',function(data){
console.log(data);
$('.cont2').html(data);
var status2 = data;
if (status2 == "En-ligne") {
$('#cont2').css("backgroundColor","#4CAF50");
} else {
$('#cont2').css("backgroundColor","#f44336");
}
});
}
setInterval(recupstatut,1000);
nothing appear in my div now with the console.log...
THere many ways to accomplish this. You can use the $.post() function by sending the $.post as a variable. Example:
// Fire off the request to /form.php
request = $.post({
url: "recup.php",
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
Or (i recommended) use the $.ajax({}) function as this way:
// Fire off the request to /form.php
$.ajax({
url: "recup.php",
type: "post",
data: { //specify data to be sent },
beforeSend:function(){
/* before sending the data to the other page
may be a loader to show waiting animation
*/
},
success:function(status){
/* this will check the response received from the previous page
and the determine the below conditions
*/
if (status == "En-ligne") {
content.style.backgroundColor = "#4CAF50";
} else {
content.style.backgroundColor = "#f44336";
}
}
});
I have following code of javascript for search function. It works well when written inside html/php file it self, however, when I try to add this in my jQuery file, it doesn't work anymore.
<script type="text/javascript">
function findmatch(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function(){
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
document.getElementById('search_result').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'php/search.php?search_text='+document.search.search_text.value , true);
xmlhttp.send();
}
</script>
I tried replacing 'getElementById' with $('#') and few some ways. But didn't work. I want to convert in jQuery so I can manage/animate 'search_result' div according to size of result returned. I don't know how will I do that. But, if you can guide me fir that extra, It would be great/
If i understand correctly, it's Ajax call:
<html>
<head>
<script src="jqueryLibrary.js"></script>
<script type="text/javascript">
function findmatch() {
$.ajax({
url: 'php/search.php?search_text=' + document.search.search_text.value,
type: 'get',
success: function(responseText){
$('#search_result').text(responseText);
}
})
}
</script>
</head>
</html>
try this one
function findmatch(){
$.ajax({
type : "GET",
url : 'php/search.php?search_text='+document.search.search_text.value,
cache : false,
async : false,
success : function(data) {
$('#search_result').text(data);
},
error : function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
So this should work:
function findmatch() {
$.post('php/search.php?search_text='+document.search.search_text.value,function(response){
$('#search_result').html(response);
});
}
//EDIT: Made a mistake, semikolon after function findmatch() { }; <<
Greetings
I have a form and after user is successfully filled the form I want the actual message
to "bounce" from the top about 30px and show the actual message. The problem is that my
form's height is huge, about 900px so I'll never see the actual message unless I scroll on top of my page which is impossible because the page reloads itself after 3 seconds. How should I implement this? Here's my AJAX code for now:
<script type="text/javascript">
$(document).ready(function() {
// Process the form with AJAX
$("form").on('submit', function(e)
{
e.preventDefault();
var from = $("form");
$.ajax({
url: from.attr('action'),
type: from.attr('method'),
data: $(from).serialize(),
}).done(function(data) {
if(data.result == 0) {
$("#new_survey_success").hide();
for (var key in data.error) {
var value = data.error[key];
var output = '<p>' + value + '</p>';
}
$("#new_survey_error").fadeIn(1000).show().html(output);
}
if(data.result == 1) {
$("#new_survey_error").hide();
$("#new_survey_success").fadeIn(200).show().html("<p>" + data.success + "</p>");
window.setTimeout(function(){location.reload()},3000)
}
}, 'json');
return false;
});
});
</script>
Thanks in advance!