This question is a followup of this one. I have created a simple example to check how code is executed within the handler. For the form
<form id="calendar_id" method="post">
Insert date: <input id="date_id" type="text" name="l_date" required>
</form>
I'm trying to retrieve the fields using the following javascript:
function get_form_data_uid($form) {
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function (n, i) {
indexed_array[n['name']] = n['value'];
});
indexed_array['uid'] = 'badbfadbbfi';
return indexed_array;
}
$("#calendar_id").submit(function (e) {
var uri, method, formId, $form, form_data;
// Prevent default submit
e.preventDefault();
e.stopImmediatePropagation();
uri = "/";
method = "POST";
formId = "#calendar_id";
$form = $(formId);
form_data = get_form_data_uid($form);
alert("form_data " + form_data);
// Set-up ajax call
var request = {
url: uri,
type: method,
contentType: "application/json",
accepts: "application/json",
cache: false,
// Setting async to false to give enough time to initialize the local storage with the "token" key
async: false,
dataType: "json",
data: form_data
};
// Make the request
$.ajax(request).done(function (data) { // Handle the response
// Attributes are retrieved as object.attribute_name
console.log("Data from change password from server: " + data);
alert(data.message);
}).fail(function (jqXHR, textStatus, errorThrown) { // Handle failure
console.log(JSON.stringify(jqXHR));
console.log("AJAX error on changing password: " + textStatus + ' : ' + errorThrown);
});
});
However, the code within the handler is not executed (the alert is not shown). Why?
Edit:
The code works jsfiddle but not in firefox.
At least, you are calling a function get_form_data_with_token() which is not defined anywhere in your posted code. Perhaps you meant to call your get_form_data_uid().
Would have just made this a comment, but apparently cannot.
Related
I want to append one more param at the end of the current url if the ajax call returns successfully. In this context, we can get back the identifier of the object has been persisted into the database, then append this identifier to the url.
The problem is curationNotes of data was lost if the line window.history.pushState({}, null, newHref); is uncommented. It means we cannot get 'params.curationNotes' in controller. The params.curationNotes, which is a map of user provided values on the form, is null when we try to parse it inside the controller.
Below is the snippet I am working on.
$('#btnSave').on("click", function(event) {
if ($('#curationNotesForm')[0].checkValidity()) {
var curationNotes = buildCurationNotesTC();
"use strict";
event.preventDefault();
$.ajax({
dataType: "text",
type: "POST",
url: $.jummp.createLink("curationNotes", "doAddOrUpdate"),
cache: true,
data: {
curationNotes: curationNotes,
model: "${id}"
},
processData: true,
async: true,
beforeSend: function() {
$('#txtStatus').text("The curation notes are being saved. Please wait...");
},
success: function(response) {
var response = JSON.parse(response);
var href = window.location.href;
if (href.indexOf("&cnId=") < 0) {
var newHref = href + "&cnId=" + response['cnId'];
//window.history.pushState({}, null, newHref);
}
$('#txtStatus').text(response['message']);
},
error: function(jqXHR, textStatus, errorThrown) {
// TODO: the error message doesn't show properly
$('#txtStatus').text("Error: ", jqXHR.responseText + textStatus + errorThrown + JSON.stringify(jqXHR));
}
});
} else {
$('#txtStatus').text("Please check required fields and click Save button again...");
}
});
If I comment this line window.history.pushState({}, null, newHref);, the code is working properly.
Notes: this snippet works fine in any web browsers on Linux but cannot work in any web browser of Windows 10. That's actually ridiculous to me.
Have you ever had any experience with this problem?
I have a Javascript that is called from a button which makes an HTTP GET request. At the moment when it encounters an error it shows a hidden div with the request error, which is all working well. Here's the script:
$("#callContact1").click(function() {
console.log('starting event');
$.ajax({
url: "<?php echo $eventURL ;?>" + eventID + "<?php echo $eventURL ;?>",
data: {},
type: "GET"
})
.then(function(data, status, xhr) {
$('#ajaxResponse1').html(data).show();
var httpStatus = status;
var httpResponseCode = (xhr.status);
console.log('httpStatus: ' + httpStatus);
console.log('httpResponseCode: ' + httpResponseCode);
})
.fail(function(xhr) {
var httpStatus = (xhr.status);
var httpResponseCode = (xhr.getAllResponseHeaders);
var ajaxError = 'There was an requesting the event. HTTP Status: ' + httpStatus;
console.log('httpStatus: ' + httpStatus);
console.log('httpResponseCode: ' + httpResponseCode);
//make alert visible
$('#ajaxResponse1').html(ajaxError).show();
})
})
I now need to extend this slightly to, when it is successful, show a different hidden div with a success message, e.g.:
$('#ajaxResponseSuccess1').html('Event Update in Progress').show();
I'm just not sure how to extend this script - fairly new to JS and jQuery at this point.
There is a success function in JQuery AJAX:
Use it like so:
.success(function(response) {
//DO stuff here.
})
A better simpler code can be like:
$.ajax({
url: 'http://example.com',
method: 'GET',
success: function (response) {
},
error: function (e) {
}
});
View the full documentation of JQuery ajax functions is at
http://api.jquery.com/jquery.ajax/
OR at
https://www.w3schools.com/jquery/ajax_ajax.asp
$.ajax({
url: "<?php echo $eventURL ;?>" + eventID + "<?php echo $eventURL ;?>",
data: {},
type: "GET",
success : function(data)
{
$('#ajaxResponseSuccess1').html('Event Update in Progress').show();
},
error:function(xhr,status)
{
alert(xhr.statusText);
}
});
Using short form of ajax:
$.get("www.xyz.com/abc",{eventId: eventId},callbackFunction);
You are registering two callbacks with the Ajax call. You seem to know that fail is executed on error. That leaves that the .then callback is executed on success. Just add the call there:
.then(function(data, status, xhr) {
$('#ajaxResponse1').html(data).show();
$('#ajaxResponseSuccess1').html('Event Update in Progress').show(); // <--
// ...
})
I'm having some trouble in preventing jquery's ajax call from submitting form data twice.
The form has two fields:
<form id="calendarform_id" method="post" onsubmit="find_schedule()" action="/find_data">
<input id="date1" type="text" required="" name="d_date1">
<input id="date2" type="text" required="" name="d_date2">
</form>
The javascript that makes the ajax call is:
function get_form_data_uid($form){
var form_data_array = $form.serializeArray();
var form_array = {};
$.map(form_data_array, function(n, i){
form_array[n['name']] = n['value'];
});
form_array['uid'] = localStorage.getItem('uid');
return form_array;
}
function find_schedule()
{
var uri, method, formId, $form, form_data;
uri = location.protocol + '//' + location.host + "/find_schedule";
method = "POST";
formId = "#calendarform_id";
$form = $(formId);
form_data = get_form_data_uid($form);
// Set-up ajax call
var request = {
url: uri,
type: method,
contentType: "application/json",
accepts: "application/json",
async: false,
cache: false,
dataType: 'json',
data: form_data
};
$(formId).submit(function(e){
e.preventDefault();
e.stopImmediatePropagation();
// Make the request
$.ajax(request).done(function(data) { // Handle the response
alert(data.message);
}).fail(function(jqXHR) { // Handle failure
console.log("ajax error upon looking up schedule " + jqXHR.status);
}
);
return false;
});
}
Looking at the requests made to the server I see that there is no uid field. I have also tried placing the code retrieving the form data and the user id (uid) as well as the request variable inside the submit handler, but the uid is still not submitted.
Why?
Edit:
I've removed the onsubmit field from the form and moved the submit handler outside the function:
Updated javacript code:
$("#calendarform_id").submit(function(e){
var uri, method, formId, $form, form_data;
uri = location.protocol + '//' + location.host + "/find_schedule";
method = "POST";
formId = "#calendarform_id";
$form = $(formId);
form_data = get_form_data_uid($form);
// Set-up ajax call
var request = {
url: uri,
type: method,
contentType: "application/json",
accepts: "application/json",
async: false,
cache: false,
dataType: 'json',
data: form_data
};
// Prevent implicit submit
e.preventDefault();
e.stopImmediatePropagation();
// Make the request
$.ajax(request).done(function(data) { // Handle the response
alert(data.message);
}).fail(function(jqXHR) { // Handle failure
console.log("ajax error upon looking up schedule " + jqXHR.status);
}
);
return false;
});
Edit #1:
I've added the uid as a hidden field to the form:
<form id="calendarform_id" method="post" action="/find_data">
<input id="date1" type="text" required="" name="d_date1">
<input id="date2" type="text" required="" name="d_date2">
<input id="user_id" type="hidden" name="uid" value="<token_from_local_storage>">
</form>
For some reason apparently I cannot debug code that is within the .submit handler; a simple alert isn't shown either.
$usrname = $this->session->userdata('username');
$password = $this->session->userdata('password');
$data = array('userName'=>urlencode($usrname),'password'=>urlencode($password));
$data_string = json_encode($data);
$datanew = "loginemployee=". $data_string;
$method = 'post';
$format = 'application/json';
$this->rest->format($format);
$login_url = $this->login_url;
//print_r($login_url);
//exit;
$result = $this->rest->{$method}($login_url, $datanew);
Can anybody please assist me with this. This is actually a PHP script to login into a website, I need to achieve the same on my Cordova app which uses only HTML and JQuery, so please provide me info on how to do this.
$(document).ready(function(){
$('form#loginForm').submit(function() { // loginForm is submitted
var username = $('#username').attr('value'); // get username
var password = $('#password').attr('value'); // get password
alert(username);
var UserData= {"userName":username , "password":password};
var jsonString=JSON.stringify(UserData);
var datanew = "loginemployee=". $jsonString;
if(jsonString)
{
alert("encoded"+jsonString);
}
if (username && password) { // values are not empty
$.ajax({
type: "POST",
url: "http:// i know URL", // URL
contentType: "application/json; charset=utf-8",
dataType: "json",
// send username and password as parameters
data: datanew, // script call was *not* successful
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('div#loginResult').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", `enter code here`errorThrown: " + errorThrown);
$('div#loginResult').addClass("error");
}, // error
// script call was successful
// data contains the JSON values returned by the Perl script
success: function (data) {
alert("success");
if (data.error) { // script returned error
$('div#loginResult').text("data.error: " + data.error);
$('div#loginResult').addClass("error");
} // if
else { // login was successful
alert(data);
console.log(data);
$('form#loginForm').hide();
$("#loginResult").append('all good');
} //else
} // success
}); // ajax/ if
} // if
else {
$('div#loginResult').text("enter username and password");
$('div#loginResult').addClass("error");
} // else
$('div#loginResult').fadeIn();
return false;
});
});
You have done some mistakes in code and I listed those thing below.
Don't use $('#username').attr('value'). Instead of use $('#username').val(). Because $('#username').attr('value') return the value of the element while the html created. But $('#username').val() will return the current value. Same as change $('#password').attr('value') to $('#password').val(). For more information check this post.
Concatenation operator in javascript is + not .. And also u added a variable like $jsonString.
In your Server php code, if your using $_POST['loginemployee'] to retrieve the post values means don't use contentType: "application/json; charset=utf-8",. Because it will use the entire content including key as invalid json like loginemployee={"userName":"cloud","password":"cloudnine"}. If you need like that means u need to use file_get_contents('php://input') to retrieve the post content. But better don't use contentType in ajax. So you can able to easily get the post content using $_POST['loginemployee'].
And also if the reply is json means use dataType in ajax, else dont use that. For more information about contentType and dataType check this post.
So, I updated the code. Check and reply back if there is any issues. Hope it will work as your wish.
$(document).ready(function(){
$('form#loginForm').submit(function() { // loginForm is submitted
var username = $('#username').val(); // get username
var password = $('#password').val(); // get password
alert(username);
var UserData= {"userName":username , "password":password};
var jsonString=JSON.stringify(UserData);
var datanew = "loginemployee="+ jsonString;
if(jsonString)
{
alert("encoded"+jsonString);
}
if (username && password) { // values are not empty
console.log(datanew);
$.ajax({
type: "POST",
url: "http://url_to_post", // URL
// contentType: "application/json; charset=utf-8",
// If reply is json means uncomment the below line.
// dataType: "json",
// send username and password as parameters
crossDomain : true,
data: datanew, // script call was *not* successful
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('div#loginResult').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", `enter code here`errorThrown: " + errorThrown);
$('div#loginResult').addClass("error");
}, // error
// script call was successful
// data contains the JSON values returned by the Perl script
success: function (data) {
alert("success");
if (data.error) { // script returned error
$('div#loginResult').text("data.error: " + data.error);
$('div#loginResult').addClass("error");
} // if
else { // login was successful
console.log(data);
$('form#loginForm').hide();
$("#loginResult").append('all good');
} //else
} // success
}); // ajax/ if
} // if
else {
$('div#loginResult').text("enter username and password");
$('div#loginResult').addClass("error");
} // else
$('div#loginResult').fadeIn();
return false;
});
});
I have a web-page with the following script
Javascript
function LinkClicked() {
var stage = this.id;
var stop = $('#ContentPlaceHolderMenu_txtDate').val();
var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val();
$("[id$='spinner']").show();
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "...",
data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}",
success: function (data) {
$("[id$='spinner']").hide();
PlotData(data.d);
},
error: function () {
$("[id$='spinner']").hide();
alert("An error occured posting to the server");
}
});
}
How do I stop the user from repeatedly clicking whilst the query is running? The call is from a cell in a grid and can't easily be disabled. Ideally, I'd like a way of doing it in the script without disabling the link on the DOM.
Here I clicked five times, and you can see five AJAX requests are sent. The page should disable the same call being repeatedly invoked whilst it is already running.
Thanks in advance.
You could have an external variable tracking the state
var linkEnabled = true;
function LinkClicked() {
if(!linkEnabled){
return;
}
linkEnabled = false;
var stage = this.id;
var stop = $('#ContentPlaceHolderMenu_txtDate').val();
var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val();
$("[id$='spinner']").show();
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "...",
data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}",
success: function (data) {
$("[id$='spinner']").hide();
PlotData(data.d);
linkEnabled =true;
},
error: function () {
$("[id$='spinner']").hide();
alert("An error occured posting to the server");
linkEnabled = true;
}
});
}
This also has the advantage that you can choose to enable other effects of this function if you want, and only prevent the repeat ajax calls.
(Note that ideally you would want to stick the external variable in a closure or a namespace rather than making it a global).
Disable a button when user clicks it, and set disabled to false when you get response from ajax.
Declare a variable outside of the function with an initial value of false:
var pending = false;
When you make the request, you'd do:
if (pending == true) {return;}
pending = true;
This makes it stop if you're already running, and when the request is done:
pending = false;
Now even without a button, the request won't fire multiple times.
As a side note, your data doesn't need to be a string. You can just do:
data: {stage: stage, stop: stop, nDays: nDays}
you can just check use this
var ajax_stat = false
function doing_ajax(){
if(ajax_stat) return;
ajax_stat = true;
var xmlRequest = $.ajax({
type: 'POST',
contentType: 'application/json',
url: "...",
data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}",
success: function (data) {
$("[id$='spinner']").hide();
PlotData(data.d);
},
error: function () {
$("[id$='spinner']").hide();
alert("An error occured posting to the server");
ajax_stat = false;
}
});
}
Use below code. it will not make multiple ajax calls.
function LinkClicked() {
if($(window).data("ajaxRUnning")){
return;
}
$(window).data("ajaxRUnning",true);
var stage = this.id;
var stop = $('#ContentPlaceHolderMenu_txtDate').val();
var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val();
$("[id$='spinner']").show();
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "...",
data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}",
success: function (data) {
$("[id$='spinner']").hide();
PlotData(data.d);
$(window).data("ajaxRUnning",false);
},
error: function () {
$("[id$='spinner']").hide();
alert("An error occured posting to the server");
$(window).data("ajaxRUnning",false);
}
});
}