I use this code, which was taken by another post of stackoverflow, but one part was not working for me.
<script>
// variable to hold request
var request;
// bind to the submit event of our form
$("#notification").submit(function(event){
// prevent default posting of form
event.preventDefault();
// abort any pending request
if (request) {
request.abort();
}
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// let's disable the inputs for the duration of the ajax request
$inputs.prop("disabled", true);
//this code was added by me cause i saw that when i pass as data {notTitle:"smth"}
//it works, so i wanted to remake that structure and include all my elements.
// Apparently it does not work, maybe because i create a string and by
//{notTitle:"smth"}, notTitle is not passed as string.
x=$("form").serializeArray();
var str="{";
var size = x.length;
$.each(x, function(i, field){
if (field.value!="")
str = str.concat(field.name + ":" + field.value);
else
str = str.concat(field.name + ":" + "k");
if(i!=size-1)
str=str.concat(",");
});
str=str.concat("}");
// fire off the request to /form.php
request = $.ajax({
url: "test.php",
type: "POST",
dataType: 'json',
data: str//{notTitle:"s",notType:''}
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
alert(response.status);
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
alert(
"The following error occured: "+
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);
});
});
</script>
And here is my php
<?php $result = array("status" => "1", "a" => "2");
$notificationTitle = htmlspecialchars($_POST["notTitle"],ENT_QUOTES,'ISO-8859-1');
echo json_encode($result); ?>
Before you suggest the use of serializing the form, I tried it and it does not work. What I noticed is that when I try to pass data to my php file, I cannot read them through $_POST['name of element']. So if I comment the second line of the php file and pass as data {notTitle:'s'} it works and I see the successful message.
Related
I'm trying to deduplicate a js code of major of form that do an ajax request, I initially do a php function that generate any form onsubmit function passing the different code as parameters but don't seems good.
After I tried to a javascript function instead, for simple variables I did it working, for example:
// <script> inside of the page generate by php (and in some cases in html received by other ajax request)
$('#f_man-marker_edit-marker').on('submit', function(e){
TM.editMarker(e, $(this), 'man-marker_edit-marker');
});
...
// in other js file
TM.editMarker = function (e, form, ajax_request) {
// stop browser from submitting form!
e.preventDefault();
// Abort any pending request
if (request) request.abort();
// Let's select and cache all the fields
let inputs = form.find("input, select, button, textarea");
// Serialize the data in the form
let serializedData = form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
inputs.prop("disabled", true);
request = $.ajax({
url: "ajax.php?req=" + ajax_request,
type: "post",
data: serializedData,
dataType: "html"
});
request.done(function (response) {
$("#ajaxoutput2").empty().append(response);
$("#ResultModal2").modal("show");
});
request.fail(function (jqXHR, textStatus, errorThrown) {
console.error(
"Ajax " + ajax_request + " request failed. The following error occurred: " +
textStatus, errorThrown
);
});
request.always(function () {
inputs.prop("disabled", false);
});
};
Now is missed pass request.done instructions as parameter but I not found a good and working way to do it.
Put them in a function gave me the variable response not defined, also adding it as parameter.
More exactly I tried:
$('#f_man-marker_edit-marker').on('submit', function(e){
let req_done = function (response) {
$("#ajaxoutput2").empty().append(response);
$("#ResultModal2").modal("show");
};
TM.editMarker(e, $(this), 'man-marker_edit-marker', req_done());
});
...
// in other js file
TM.editMarker = function (e, form, ajax_request, req_done()) {
...
request.done(function (response) {
req_done(response);
});
...
};
Thas is not working.
Is possible to pass the instructions as they are and have them working or must be in a function? If must be in a function what is the right way to do it? Probably is possibile with eval() but seems highly discouraged and I not tried it for now.
EDIT:
I try to explain better: what I try to do is have a php or js function to call and pass as parameters the only things that changes, for example on on hundreds of similar forms that I will do on the project it will be fine there will be thousands or tens of thousands of lines of duplicate code avoided and a possible refactor or future improvements much simpler and faster.
I started with a generation from php, for example:
...
// "f_man-marker_add-marker" is the id of the form, "man-marker_add-marker" is the id of the ajax request, $man_marker_jap1 contain that instructions printed inside of request.done function (they can be different on any form)
TM\UI\JSHelper::jqueryAjaxPost(
"f_man-marker_add-marker", "man-marker_add-marker", $man_marker_jap1);
.....
// in the file of TM\UI\JSHelper:
...
/**
* Generate a jquery ajax of type post and datatype html
* will call the url ajax.php?req=$request_name
* and request.done will do what define in $done_content
*
* #param string $form_id Id of the form
* #param string $request_name Name of the ajax request parameter
* #param string $done_content Content of request.done
*/
public static function jqueryAjaxPost(string $form_id, string $request_name, string $done_content){
echo <<<HTML
$("#$form_id").submit(function(event){
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) { request.abort(); }
let form = $(this);
// Let's select and cache all the fields
let inputs = form.find("input, select, button, textarea");
// Serialize the data in the form
let serializedData = form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
inputs.prop("disabled", true);
request = $.ajax({
url: "ajax.php?req=$request_name",
type: "post",
data: serializedData,
dataType: "html"
});
request.done(function (response){
$done_content
});
request.fail(function (jqXHR, textStatus, errorThrown){
console.error(
"Ajax $request_name request failed. The following error occurred: "+
textStatus, errorThrown
);
});
request.always(function () {
inputs.prop("disabled", false);
});
});
HTML;
}
but not have js "issue" (if done correctly) because the generated code is specific per form and "full js" without call to other external functions.
I then thinked to do it mainly in js only file (which to logic would seem more correct rather generate all the js from php) and was ok except of the content of request.done that must change, so I open this post to aswer what is the best and correct way to do it.
If instead there is no better method to do what I need mainly in js and the less worst seems to remain in the php generation tell me.
EDIT2:
I did other tests and found a working solution without using eval (I don't know if good):
// inside a <script> of part of page generated by php or html code received from ajax request
$('#f_man-marker_edit-marker').on('submit', function(e){
let req_done = function (response) {
$("#ajaxoutput2").empty().append(response);
$("#ResultModal2").modal("show");
};
TM.jqueryAjaxPost(e, $(this), 'man-marker_edit-marker', req_done);
});
...
// in other js-only file
/**
* Basic jquery ajax request of type post from form
* where changes only request.done content
* #param e Event received from onsubmit of the form
* #param form Receive the element with $(this)
* #param ajax_request Name of the ajax request send to php
* #param req_done Instruction to do on request.done
*/
TM.jqueryAjaxPost = function (e, form, ajax_request, req_done) {
// stop browser from submitting form!
e.preventDefault();
// Abort any pending request
if (request) request.abort();
// Let's select and cache all the fields
let inputs = form.find("input, select, button, textarea");
// Serialize the data in the form
let serializedData = form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
inputs.prop("disabled", true);
request = $.ajax({
url: "ajax.php?req=" + ajax_request,
type: "post",
data: serializedData,
dataType: "html"
});
request.done(function (response) {
req_done(response);
});
request.fail(function (jqXHR, textStatus, errorThrown) {
console.error(
"Ajax " + ajax_request + " request failed. The following error occurred: " +
textStatus, errorThrown
);
});
request.always(function () {
inputs.prop("disabled", false);
});
};
Is this good or is there a better way to do it and/or possible improvement?
EDIT3:
I tried also to do something working with additional parameters:
TM.deleteMarker = function (id) {
let req_done = function (response, parArray) {
$("#ajaxoutput").empty().append(response);
$('#link_open-marker' + parArray[id]).remove();
};
TM.jqueryAjaxGet('man-marker_delete-marker&id=' + id, req_done, {id: id});
};
/**
* Basic jquery ajax request of method get and datatype html
* #param ajax_request Name of the ajax request send to php and get parameters, it will be
* will be added to the end of the url
* #param req_done Instruction to do on request.done
* #param parArray Additional parameters used in req_done
*/
TM.jqueryAjaxGet = function (ajax_request, req_done, parArray = {}) {
// Abort any pending request
if (request) {
request.abort();
}
request = $.ajax({
url: "ajax.php?req=" + ajax_request,
method: "get",
dataType: "html"
});
request.done(function (response) {
req_done(response, parArray);
});
request.fail(function (jqXHR, textStatus, errorThrown) {
console.error(
"Ajax " + ajax_request + " request failed. The following error occurred: " +
textStatus, errorThrown
);
});
};
don't gave errors or warning and work all except
$('#link_open-marker' + parArray[id]).remove();
so I suppose I did something wrong about parArray but I not undestand what, Can someone help me to solve (or do in a different way if not good this) please?
Thanks for any reply and sorry for my bad english.
I'm not quite sure if i understood your question right, but if its about getting a done callback outside of your method you have two possible ways of doing that.
Use closures:
TM.editMarker = function (e, form, ajax_request, doneHandler) {
...
request.done(function (response) {
$("#ajaxoutput2").empty().append(response);
$("#ResultModal2").modal("show");
if(doneHandler !== undefined)
doneHandler();
});
}
TM.editMarker(e, $(this), 'man-marker_edit-marker', function() {
console.log("done");
});
Use promises:
TM.editMarker = function (e, form, ajax_request) {
...
var prom= jQuery.Deferred();
request.done(function (response) {
$("#ajaxoutput2").empty().append(response);
$("#ResultModal2").modal("show");
prom.resolve();
});
return prom.promise();
}
TM.editMarker(e, $(this), 'man-marker_edit-marker').then(function() {
console.log("done");
});
Answer on edit:
Ok, so what you are trying to do is executing a javascript function through the ajax response. You could achieve this by doing something like this:
$.ajax({
url: "somejs.js",
context: document.body,
success: function(responseText) {
eval(responseText);
}
});
However this is really dirty and not good practice because javascript is usually UI manipulating commands. Keep the UI stuff in the frontend and only return raw data / json from your backend. Can you give me an example of what the response looks like then I can give you an example of how I would solve it.
Ok so what I'm basically trying to do is sending a form which contains a password (predefined, no DB) through AJAX. In my php file I check the input and I try to return true or false to my JS, but this part fails as I can't manage to access the value. Here is my code:
ajaxRequest.js
// Variable to hold request
var request;
// Bind to the submit event of our form
$(".lockForm").submit(function(event){
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "assets/php/lockscreen.php",
type: "POST",
data: serializedData,
dataType: 'text',
success: function (data) {
console.log(data.status);
}
});
// 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);
});
});
lockscreen.php
<?php
// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$pass = isset($_POST['pass']) ? $_POST['pass'] : null;
$response = false;
function CheckInput($pass){
if($pass == "SPV" || $pass == "TEACHERS"){
$response = true;
$responseLock['status'] = 'true';
echo json_encode($responseLock);
} else {
$response = false;
$responseLock['status'] = 'true';
echo json_encode($responseLock);
}
}
?>
So far I tried changing the dataType to JSON, but then I got an unexpected end of input error. If I leave it 'text', whenever I try to access the value, I get "undefined". If I only display the console.log, without trying to access any value, I get a success message. I have no idea why though.
call your CheckInput function:
<?php
$pass = isset($_POST['pass']) ? $_POST['pass'] : null;
$response = false;
function CheckInput($pass) {
if($pass == "SPV" || $pass == "TEACHERS"){
$result = true;
} else {
$result = false;
}
return array('status' => $result);
}
echo json_encode(CheckInput($pass));
?>
In my page, I call 15 ajax request. Also I have a button which cancels all the pending ajax requests. As per documentation, abort() terminates the request if it has already been sent.
Now when I check my console, even after I click cancel button, I get some replies from ajax script (I guess those were already sent by the time I clicked that button). So how can I make sure no reply should come once I press cancel button?
You can check the script here (couldn't use jsfiddle as not sure how to make ajax request).
JS Code
var xhrPool = [];
$(window).load(function(){
callAjax1();
});
$.ajaxSetup({
beforeSend: function(jqXHR) {
xhrPool.push(jqXHR);
},
complete: function(jqXHR) {
var index = xhrPool.indexOf(jqXHR);
if (index > -1) {
xhrPool.splice(index, 1);
}
}
});
var abortAjax = function () {
$.each(xhrPool, function(idx, jqXHR) {
if(jqXHR && jqXHR .readystate != 4){
jqXHR.abort();
}
});
console.log("All pending cancelled"); // Should not have any ajax return after this point
$.xhrPool = [];
};
$("#cancel-button").click(function (){
abortAjax();
});
function callAjax2(ajaxcallid){
console.log("Initiate ajax call " + ajaxcallid); // Should not have any ajax return after this point
$.ajax({
method: "POST",
url: "test.php"
})
.done(function( msg ) {
console.log(msg + ajaxcallid); // msg = "Ajax return for "
})
.fail(function( jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
});
}
function callAjax1(){
$.ajax({
method: "POST",
url: "test.php"
})
.done(function( msg ) {
for(var i = 0; i < 15; i++){
callAjax2(i);
}
})
.fail(function( jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
});
}
Console Output:
try this
$.each(xhrPool.slice(), function(idx, jqXHR) {
I think while you are aborting, some are returning, so the array gets messed up
this way you are working with a snapshot of the array
though, one or two may still sneak through due to timing of course
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.
I am using the following code to edit records in a database. It works great for doing an edit. I need to expand the functionality to include the ability to add or delete functions also.
On my form I use three separate buttons to select whether to Add, Edit, or Delete.
How can I expand the script to determine which of the buttons was clicked?
// Action to run on submit to add/edit/delete record from database
var request; // variable to hold request
// bind to the submit event of our form
$("#form_edit").submit(function(event){
// abort any pending request
if (request) {
request.abort();
}
// setup local variables
var $form = $(this);
// select and cache all the fields
var $inputs = $form.find("input, select, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// disable the inputs for the duration of the ajax request
$inputs.prop("disabled", true);
// define constants to be passed as parameters
var updateType = "edt"; // This needs to be changed to 'add' or 'del'
var tableName = "phasecodes";
var indexName = "phase_ID";
var recNumber = phase_ID.value;
// Build string for query input
var type = "?type=" + updateType;
var table = "&table=" + tableName;
var index = "&index=" + indexName;
var rec = "&rec=" + recNumber;
var getS = type + table + index + rec;
// execute request to update database
request = $.ajax({
url: "files_json/update_Record.php" + getS,
type: "post",
data: serializedData
});
// callback handler called on success
request.done(function (response, textStatus, jqXHR) {
console.log("Data record updated!"); // log success message to the console
});
// callback handler called on failure
request.fail(function (jqXHR, textStatus, errorThrown) {
console.error( "The following error occured: " + textStatus, errorThrown ); // log the error to the console
});
// callback handler called regardless if the request failed or succeeded
request.always(function () {
$inputs.prop("disabled", false); // reenable the inputs
});
// prevent default posting of form
event.preventDefault();
}); // End of submit function
Assuming that the three buttons within the form are of type 'submit...'
You can see this post
Something like this should return the value of the clicked button:
var val = $("input[type=submit][clicked=true]").val();