Currently I'm using this jquery script combining with php (doesn't matter):
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var select = "<?php if_exist($select, ''); ?>";
var event = "<?php if_exist($event, 'click'); ?>";
var display = "<?php if_exist($display, '#display'); ?>";
var loading = "<?php if_exist($loading, '#loading'); ?>";
var datatype = "<?php if_exist($datatype, 'json'); ?>";
var cache;
if (event == "submit"){ $("input:submit").hide(); }
$(select).bind( event , function(key){
if ( event == "keypress" ) {
if ( key.which == <?php if_exist($keycode, '13'); ?> ) {
$(loading).show();
$.post(
$(select).attr("action"),
$(select).serialize(),
function(data){
if (datatype == "html" || datatype == "text"){ var returned = data; }
if (datatype == "json"){ var returned = data<?php if_exist($return, '.return'); ?>; }
if (returned != cache)
{
cache = returned;
if (datatype == "html" || datatype == "text"){ $(display).hide().html(data).fadeIn(); }
if (datatype == "json"){ $(display).hide().autoRender(data).fadeIn(); }
$(loading).hide();
}
},
datatype
);
return false;
};
}
else
{
$.post(
$(select).attr("action"),
$(select).serialize(),
function(data){
if (datatype == "html" || datatype == "text"){ var returned = data; }
if (datatype == "json"){ var returned = data<?php if_exist($return, '.returnValue'); ?>; }
if (returned != cache)
{
cache = returned;
if (datatype == "html" || datatype == "text"){ $(display).hide().html(data).fadeIn(); }
if (datatype == "json"){ $(display).hide().autoRender(data).fadeIn(); }
$(loading).hide();
}
},
datatype
);
if ($event == 'submit') { return false;}
}
});
});
</script>
I want to reduce the amount of code used in this script, I think we can surely reduce the amount of code in this script by giving our attention to the line #11 which contains: if ( event == "keypress" ) {, because in the next else statement the same code is repeated twice, but how can we do this? Any idea?
The following piece looks duplicated:
$.post(
$(select).attr("action"),
$(select).serialize(),
function(data){
if (datatype == "html" || datatype == "text"){ var returned = data; }
if (datatype == "json"){ var returned = data; }
if (returned != cache)
{
cache = returned;
if (datatype == "html" || datatype == "text"){ $(display).hide().html(data).fadeIn(); }
if (datatype == "json"){ $(display).hide().autoRender(data).fadeIn(); }
$(loading).hide();
}
},
datatype
);
You should consider moving it's functionality to a function (sic)!
In addition to Vlad's answer: Remove the unnecessary if query and variable assignment:
$.post(
$(select).attr("action"),
$(select).serialize(),
function(data) {
// in every case, data is assigned to another variable which is
// unnecessary as well
// if (datatype == "html" || datatype == "text"){ var returned = data; }
// if (datatype == "json"){ var returned = data; }
if (data != cache) {
cache = data;
}
if (datatype == "html" || datatype == "text") {
$(display).hide().html(data).fadeIn();
}
else if (datatype == "json"){
$(display).hide().autoRender(data).fadeIn();
}
$(loading).hide();
}
}, datatype );
Related
I want to send two values to my PHP script that is being called from an AJAX request. Somehow my data is not being passed to the PHP script.
Maybe I am doing something wrong somewhere. Can I have some insight?
$(function() {
$(".delbutton").click(function() {
var viewed_comments = $("#viewed_comments").val();
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
var comments = 'comm=' + viewed_comments;
var tr = $(this).closest('tr');
if (confirm("Are you sure to mark this as viewed?")) {
$.ajax({
type : "POST",
url : "update_entry.php",
dataType: "json",
data: {info:info, comments:comments },
success : function(response) {
if(response=="updation success"){
console.log('inside');
}
}
});
}
return false;
});
});
And my PHP where the AJAX request is going,
$id = $_POST['id'];
$viewed_comments = $_POST['comm'];
$level_code = $_SESSION['level_code'];
$action = 'view';
$viewed_date = date("Y-m-d");
$viewed_by = $_SESSION['session_admin_id'] ;
if($action == 'view')
{
$viewed_date = date('Y-m-d h:i:s');
$nots = $db->idToField("tbl_table","notes",$id);
if ($nots == "")
{
$date_string = "last viewed on|".$viewed_date."|" ;
}
else {
$date_string = $nots."last viewed on|".$viewed_date."|" ;
}
$fnc->update_is_viewed_for("tbl_table",$id, "$viewed_date", $viewed_by);
$notes_data = array("notes"=>$date_string,"viewed_comments"=>$viewed_comments);
$db->query_update("tbl_table", $notes_data, "id=$id");
}
if($db->query_update("tbl_table", $notes_data, "id=$id")){
http_response_code();
echo json_encode('updation success');
}else{
http_response_code(204);
}
Isn't it a name thing? You send two POST variables:
data: {
info: info,
comments: comments
},
but you retrieve them with different names:
$id = $_POST['id'];
$viewed_comments = $_POST['comm'];
What do you get if you var_dump($_POST);?
Use seriliaze form values it will solve your data missing problem, change #frm to your form id
$(document).ready(function(){
$('#frm').submit(function(event){
event.preventDefault();
var formValues = $(this).serialize();
$.ajax({
url:"update_entry.php",
method:"POST",
data:formValues,
dataType:"JSON",
success:function(data){
if (data == 'updation success') {
console.log('success');
}
}
});
});
});
I am able to autofill state,city and area based on 6 digit zipcode.The issue comes when i want to check for validity of zipcode starting from 5th digit.I know it will show invalid zip code error as i am comparing the value against database value..Here goes the code i have used.
Is there a way i can hide error of invalid zip code after 5th digit while still continuing to validate after 5th digit of zipcode?
<script>
require([
'jquery'
],function($){
$(document).ready(function(){
$('#seller_zipcode').keyup(function() {
pincode = $('#seller_zipcode').val();
pincode1 = $('#seller_zipcode').slice(0,-1);
//pincode1 = pincode.slice(0,-1);
//console.log(pincode1);
if(pincode.length == 6 || pincode1.length == 5){
$.ajax({
type: 'POST'
,url: "<?php echo $block->getUrl('marketplace/zipcode/zipcode');?>"
,data: {pincode : pincode}
,success: function(result){
var finalresult = $.parseJSON(result);
console.log(finalresult);
if(finalresult.state != null){
$('#state').val(finalresult.state);
$('#seller_district').val(finalresult.district);
$('#seller_taluka').val(finalresult.area);
$('#zip_error').removeClass('mage-error');
$('#zip_error').removeAttr('generated');
$('#zip_error').html("");
}
else{
$('#state').val("");
$('#seller_district').val("");
$('#seller_taluka').val("");
$('#zip_error').removeClass('mage-error');
$('#zip_error').addClass('mage-error').html("Zip Code invalid").show();
$('#zip_error').attr('generated','true');
}
}
});
}
});
Try doing this:
<script>
require([
'jquery'
],function($){
$(document).ready(function(){
$('#seller_zipcode').keyup(function() {
//Reset the zip error
$('#zip_error').removeClass('mage-error');
$('#zip_error').removeAttr('generated');
$('#zip_error').html("");
pincode = $('#seller_zipcode').val();
pincode1 = $('#seller_zipcode').slice(0,-1);
//pincode1 = pincode.slice(0,-1);
//console.log(pincode1);
if(pincode.length == 6 || pincode1.length == 5){
$.ajax({
type: 'POST'
,url: "<?php echo $block->getUrl('marketplace/zipcode/zipcode');?>"
,data: {pincode : pincode}
,success: function(result){
var finalresult = $.parseJSON(result);
console.log(finalresult);
if(finalresult.state != null){
$('#state').val(finalresult.state);
$('#seller_district').val(finalresult.district);
$('#seller_taluka').val(finalresult.area);
$('#zip_error').removeClass('mage-error');
$('#zip_error').removeAttr('generated');
$('#zip_error').html("");
}
else{
$('#state').val("");
$('#seller_district').val("");
$('#seller_taluka').val("");
$('#zip_error').removeClass('mage-error');
$('#zip_error').addClass('mage-error').html("Zip Code invalid").show();
$('#zip_error').attr('generated','true');
}
}
});
}
});
I have a HTML form that when posted fires an JQuery script to check a validation function before sending data to an ajax call to insert the data into a mySQL database.
It works as it should, except when it is running an ajax check to see if the posted email address already exists in the database.
I need the email_error var to return true if the response from the ajax call is not 'success'. My code:
function validate_add_relative() {
var check_error = false;
var email_error = false;
var title = document.forms["add_relative_form"]["title"].value;
if (title == null || title == "") {
check_error = true;
}
var first_name = document.forms["add_relative_form"]["first_name"].value;
if (first_name == null || first_name == "") {
check_error = true;
}
var surname = document.forms["add_relative_form"]["surname"].value;
if (surname == null || surname == "") {
check_error = true;
}
var phone = document.forms["add_relative_form"]["phone"].value;
if (phone == null || phone == "") {
check_error = true;
}
var email = document.forms["add_relative_form"]["email"].value;
if (email == null || email == "") {
check_error = true;
}
var address = document.forms["add_relative_form"]["address"].value;
if (address == null || address == "") {
check_error = true;
}
var postData = $(this).serializeArray();
$.ajax(
{
url : '<?php echo WEB_URL . 'controllers/ajax/check_relative_email.php'; ?>',
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR) {
if(data == 'success') {
email_error = false;
return true;
}
else {
alert('test');
email_error = true;
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Email is already in use. Please choose another.');
}
},
error: function(jqXHR, textStatus, errorThrown)
{
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Error. Please try again later.');
email_error = true;
}
});
if (email_error == true) {
alert("Please choose another email address, that one is already in use.");
return false;
}
if (check_error == true) {
alert("Please ensure you fill in all mandatory fields.");
return false;
}
if (email_error == false && check_error == false) {
return true;
}
}
$('.add_relative_form').submit(function(e) {
e.preventDefault();
if(validate_add_relative()) {
var ajaxurl = '<?php echo WEB_URL; ?>controllers/ajax/add_relative.php',
form_data = $('.add_relative_form').serialize();
$.post(ajaxurl, form_data, function (response) {
//location.reload();
});
}
});
When running the above code, the first part (Form validation) works as it should, and it also gives the alert and does the class hiding after. But it carries on and is not catching the fact that email_error is set to true after the alert line. So it continues through the code and adds the entry through the last ajax post controllers/ajax/add_relative.php
add complete function after error and write your code inside that function
complete:function(data, textStatus, jqXHR) {
if(data == 'success') {
email_error = false;
return true;
}
else {
alert('test');
email_error = true;
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Email is already in use. Please choose another.');
}
},
JavaScript is asynchronous in the sense that it can make, for example, Ajax calls. Hence your outer conditions will get mislead. Try to add return statement inside AJAX response for expected result.
Please try following solution
function validate_add_relative() {
var check_error = false;
var email_error = false;
var title = document.forms["add_relative_form"]["title"].value;
if (title == null || title == "") {
check_error = true;
}
var first_name = document.forms["add_relative_form"]["first_name"].value;
if (first_name == null || first_name == "") {
check_error = true;
}
var surname = document.forms["add_relative_form"]["surname"].value;
if (surname == null || surname == "") {
check_error = true;
}
var phone = document.forms["add_relative_form"]["phone"].value;
if (phone == null || phone == "") {
check_error = true;
}
var email = document.forms["add_relative_form"]["email"].value;
if (email == null || email == "") {
check_error = true;
}
var address = document.forms["add_relative_form"]["address"].value;
if (address == null || address == "") {
check_error = true;
}
if(check_error===false){
var postData = $(this).serializeArray();
$.ajax(
{
url : '<?php echo WEB_URL . 'controllers/ajax/check_relative_email.php'; ?>',
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR) {
if(data == 'success') {
return true;
}
else {
alert('test');
return false;
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Email is already in use. Please choose another.');
}
},
error: function(jqXHR, textStatus, errorThrown)
{
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Error. Please try again later.');
return false;
}
});
}
else{
return false;
}
}
$('.add_relative_form').submit(function(e) {
e.preventDefault();
if(validate_add_relative()) {
var ajaxurl = '<?php echo WEB_URL; ?>controllers/ajax/add_relative.php',
form_data = $('.add_relative_form').serialize();
$.post(ajaxurl, form_data, function (response) {
//location.reload();
});
}
});
UPDATES
change following code :
if(data == 'success') {
return true;
}
else {
alert('test');
return false;
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Email is already in use. Please choose another.');
}
To
if(data == 'success') {
return true;
}
else {
alert('test');
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Email is already in use. Please choose another.');
return false;
}
You can check, if the email already exists by using .blur() as soon after the user enters their email, you send AJAX call to check if the email exists and disable the submit button and show proper message to the user.
Form
<form action="" name="add_relative_form" class="add_relative_form">
<input type="text" name="title">
<input type="text" name="first_name">
<input type="text" name="surname">
<input type="text" name="phone">
<input type="text" id="email" name="email"> <!-- give email an id -->
<input type="text" name="address">
<input type="submit" id="sub" value="Sub"> <!-- give submit an id -->
Javascript
function validate_add_relative() {
var check_error = false;
var email_error = false;
var title = document.forms["add_relative_form"]["title"].value;
if (title == null || title == "") {
check_error = true;
}
var first_name = document.forms["add_relative_form"]["first_name"].value;
if (first_name == null || first_name == "") {
check_error = true;
}
var surname = document.forms["add_relative_form"]["surname"].value;
if (surname == null || surname == "") {
check_error = true;
}
var phone = document.forms["add_relative_form"]["phone"].value;
if (phone == null || phone == "") {
check_error = true;
}
var email = document.forms["add_relative_form"]["email"].value;
if (email == null || email == "") {
check_error = true;
}
var address = document.forms["add_relative_form"]["address"].value;
if (address == null || address == "") {
check_error = true;
}
if (email_error == true) {
alert("Please choose another email address, that one is already in use.");
return false;
}
if (check_error == true) {
alert("Please ensure you fill in all mandatory fields.");
return false;
}
if (email_error == false && check_error == false) {
return true;
}
}
$('.add_relative_form').submit(function (e) {
e.preventDefault();
if (validate_add_relative()) {
var ajaxurl = '<?php echo WEB_URL; ?>controllers/ajax/add_relative.php',
form_data = $('.add_relative_form').serialize();
$.post(ajaxurl, form_data, function (response) {
//location.reload();
console.log(response)
});
}
});
$('#email').on('blur', function () {
$.ajax({
url: '<?php echo WEB_URL . 'controllers/ajax/check_relative_email.php'; ?>',
type: "POST",
data: {email: $(this).val()},
success: function (data, textStatus, jqXHR) {
if (data == 'success') {
$('#sub').prop('disabled', false);
}
else {
$('.relative_email_error').show();
$('.relative_email_error').html('Email is already in use. Please choose another.');
$('#sub').prop('disabled', true);
}
},
error: function (jqXHR, textStatus, errorThrown) {
$('.relative_email_error').removeClass('hidden');
$('.relative_email_error').html('Error. Please try again later.');
}
});
})
Then in your PHP get the email from post
<?php
$email = $_POST['email'];
// your SQL code here
How can i push variable to ajax function in php file (witch refers to ajax )
if i have $v in my php . if all is ok it's echo "ok" in php file .So what should i do next
if ($_POST){
for ($j=0; $j< count($row);$j++){
mysql_query("INSERT INTO `".PREFIX_USR."delivery_address` (`id_personl_data`,`country`,`province`,`city`,`street`,`house`,`apartment`)
VALUES ( '12','".$row[$j][0]."','".$row[$j][1]."','".$row[$j][2]."','".$row[$j][3]."','".$row[$j][4]."','".$row[$j][5]."') ");
var count = query['id']; // just an example of what i need to push
}
echo "ok";
}
js
(function(){
function changeData(){
var name = d.getElementById('new_name').value,
surname = d.getElementById('new_surname').value,
email = d.getElementById('new_email').value,
telephone = d.getElementById('new_phone').value,
robot = d.getElementById('spam_change').value,
xml = eventsObj.getXmlHttp();
var arr = [].map.call(document.querySelectorAll('.parent_clone'), function(block) {
return [].map.call(block.querySelectorAll('.left_info_address'), function(inp) {
return inp.value;
});
});
for (var i = 0; i<arr.length-1;i++){
arr[i].push('/');
}
console.log(arr);
if(name === "" || surname === "" || email === "" || (telephone === "")){
alert("fill the fields");
}
else {
xml.open("POST",path_ajax_files+"edit_personal_data.php",true);
xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send("name="+encodeURIComponent(name)+
"&surname="+encodeURIComponent(surname)+
"&email="+encodeURIComponent(email)+
"&telephone="+encodeURIComponent(telephone)+
"&robot="+encodeURIComponent(robot)+
"&arr="+encodeURI(arr));
xml.onreadystatechange = function(){
if(xml.readyState === 4){
if(xml.status === 200){
if(xml.responseText !== ""){
alert(xml.responseText);
if(xml.responseText === "ok"){
alert("data will be changed");
}
} else {
alert('try again later');
}
}
}
};
}
}
eventsObj.addEvent(saveData, "click", changeData, false);
})();
I have a function and an AJAX call. After clicking it gets the function and function works fine, on alert it shows the data, but after that it does not send the data to PHP. Any ideas why this happens on Firefox? It works well in IE and Chrome.
function siparisolustur() {
var toplamsiparis = $('.urunrow').length;
var i = null;
var siparisid = $("#siparis_id").text();
var name = $("#siparisad").val();
var surname = $("#siparissoyad").val();
var tel = $("#siparistel").val();
var adres = $("#sepetadres").val();
var semt = $("#sepetilce").val();
var sehir = $("#sepetsehir").val();
var notlar = $("#siparisnotu").val();
var odeme = $('input[name="odemeyontemi"]:checked').attr("id");
bilgiDataString = '&siparisid=' + siparisid + '&name=' + name + '&surname=' + surname + '&tel=' + tel + '&adres=' + adres + '&semt=' + semt + '&sehir=' + sehir + '¬lar=' + notlar + '&odeme=' + odeme;
alert(bilgiDataString);
$.ajax({
type: "POST",
url: "https://www.xxxxx.com/procc/xxxxxxxxxx.php",
data: bilgiDataString,
cache: false,
success: function (html) {
}
});
$("#payForm").submit(function (e) {
var siparisdurdur = 0;
var ad = $("#siparisad").val();
var soyad = $("#siparissoyad").val();
var tel = $("#siparistel").val();
var adres = $("#sepetadres").val();
var ilce = $("#sepetilce").val();
var sehir = $("#sepetsehir").val();
var sepeturunadetget = parseInt($("#sepeturunsayisi").text());
if (ad == "" || soyad == "" || tel == "" || adres == "" || ilce == "" || sehir == "" || sepeturunadetget < 1) {
siparisdurdur = 1;
}
if (ad == "") {
e.preventDefault();
$("#siparisad").css("border- color", "#cd2828")
} else {
$("#siparisad").css("border-color", "#d1d2e6");
}
if (soyad == "") {
e.preventDefault();
$("#siparissoyad").css("border-color", "#cd2828")
} else {
$("#siparissoyad").css("border-color", "#d1d2e6");
}
if (tel == "") {
e.preventDefault();
$("#siparistel").css("border-color", "#cd2828")
} else {
$("#siparistel").css("border-color", "#d1d2e6");
}
if (adres == "") {
e.preventDefault();
$("#sepetadres").css("border-color", "#cd2828")
} else {
$("#sepetadres").css("border-color", "#d1d2e6");
}
if (ilce == "") {
e.preventDefault();
$("#sepetilce").css("border-color", "#cd2828")
} else {
$("#sepetilce").css("border-color", "#d1d2e6")
}
if (sehir == "") {
e.preventDefault();
$("#sepetsehir").css("border-color", "#cd2828")
} else {
$("#sepetsehir").css("border-color", "#d1d2e6")
}
if (blocksubmit == 1) {
e.preventDefault();
$("#personalinfosubmit").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
}
if (sepeturunadetget < 1) {
e.preventDefault();
$("#shoppingcost").css("color", "#cd2828");
$("#shoppingcost").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast");
}
if (blocksubmit == 0 && siparisdurdur == 0) {
siparisolustur();
}
});
I solved the problem.. Submit goes to other page before ajax is done proessing the data.. I delayed the redirect for like half second and it worked.. Its about speed of FF
I see that you've posted a solution already:
Submit goes to other page before ajax is done proessing the data.. I delayed the redirect for like half second and it worked.
Seriously, you should not be relying on a solution like this.
Timing issues like this are known as a "race condition", ie where two events are effectively in a race to see which one will finish first; you're expecting one to always win, and you get a bug if they finish in the wrong order.
It's a very well defined category of bug (even if Ajax is fairly new, situations like this have existed since the begining of computer science), and the solution is not to slow down one of the events in the hope that you'll force it to always lose. That is always the wrong solution.
The correct solution is usually to trigger the second event only after the first one has finished. In your case, this would mean firing the submit event from inside the ajax success method.