We Keep Coding

The function requires a field to be completed live to run

I'm using WooCommerce. The checkout form has two fields hidden (latitude and longitude). To show the shipping price, I'm using an API. I created a function of class new Address( $dato1, $dato2 ); in test.php. This needs the information from AJAX (latitude and longitude) when the customer completes this in the same page. How I can modify this to work?
function shipping($rates){
...
$dato2 = $_POST['dato1lat'];
$dato3 = $_POST['dato2long'];
$origen = new Address( $dato1, $dato2 );
$destino = new Address( -85.582, -58.585 );
$order = new Order();
$order->setAddresses( [$origen, $destino] );
$orderEstimado = $api->estimateOrderPrice( $order );
$shipping_cost = $orderEstimate['total']['amount'];
WC()->session->set( 'shipping_city_cost', $shipping_cost );
foreach ( WC()->cart->get_shipping_packages() as $package_key => $package ) {
WC()->session->set( 'shipping_for_package_' . $package_key, false );
}
//Price
add_filter( 'woocommerce_package_rates', 'adjust_shipping_rate', 50 );
function adjust_shipping_rate( $rates ){
foreach ($rates as $rate) {
$cost = $rate->cost;
$rate->cost = WC()->session->get( 'shipping_city_cost' );
}
return $rates;
}
My Javascript code:
var dato1lat = $('#billing_billing_lat').val();
var dato2long = $('#billing_billing_lon').val();
$.ajax({
data:{ dato1lat: lat,dato2long: lng},
url:"/wp-content/plugins/test.php",
contentType: "application/json",
success: function(output) {
alert(output);
}
});
jQuery('body').trigger('update_checkout');
Thanks!

I see a wrong variable in ajax call data.
Could you try this;
Change:
data:{ dato1lat: lat,dato2long: lng},
with:
data:{dato1lat: dato1lat,dato2long: dato2long},
Because of:
var dato1lat = $('#billing_billing_lat').val();
var dato2long = $('#billing_billing_lon').val();
EDIT:
I found another problem, change your variables in your php file;
$dato1 = $_POST['dato1lat'];
$dato2 = $_POST['dato2long'];
$origen = new Address( $dato1, $dato2 );
In comments, you asked an ajax sensitive to change if I understood correctly.
Here is codes which I use in these situation
$('.yourClasswhichInputs').on('change keyup paste', function () {
var dato1lat = $('#billing_billing_lat').val();
var dato2long = $('#billing_billing_lon').val();
$.ajax({
url: "test.php",
type: "POST",
data: {dato1lat:dato1lat, dato2long:dato2long},
success: function(output){
alert(output);
}
});
});

I cannot get $_POST in php from js ajax in wordpress

This is my php file:
add_action( 'wp_ajax_mon_action', 'mon_action' );
add_action( 'wp_ajax_nopriv_mon_action', 'mon_action' );
function mon_action() {
if (isset($_POST["form_data"])) {
$field1=$_POST["form_data"];
}else{
$field1='heye';
}
var_dump($_POST);
die();
}
And this is js file:
function sayHelloWorld() {
window.alert('hey');
var div = document.getElementById('alt_textarea');
var div_tmp = document.createElement('div');
div_tmp.innerHTML = div.innerHTML;
var images = Array.prototype.slice.call(div_tmp.getElementsByTagName('img'));
var form_data = new FormData();
for (var i = 0; i < images.length; i++) {
var altImage = document.createTextNode("articleImage_" + i);
images[i].parentNode.insertBefore(altImage,images[i]);
images[i].parentNode.removeChild(images[i]);
form_data.append('eyecatch[]',images[i].src);
};
form_data.append('body',div_tmp.innerHTML);
jQuery.ajax({
url: 'admin-ajax.php',//I wrote absolute path here.
type:'POST',
data: {
'action': "mon_action",
'form_data': form_data
},
timeout:10000
}).done(function(data) {
window.alert(data);
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
window.alert("error");
});
}
But var_dump($_POST) did not work.
My window.alert stops only with 'hey'.
When I change to "formdata: 'some strings'" in data in js file, I can use var_dump($_POST).
So my question is why I cannot use $_POST when I use these files.
Please tell me.

How To Upload File In jquery and HTML with complicated input form

I knew so much duplicate question. But I don't know, how to upload it with complicated form with arrays in form. This is my html:
And this jquery:
function saveDraft(){
var scope = $('#scope').val();
var secrecy = $('#secrecy').val();
var priority = $('#prio').val();
var cc = $('#cc').val();
var subject = $('#form-field-subject').val();
var msg = $('.wysiwyg-editor')[0].innerHTML;
var attachment = document.getElementById('attachment');
var refnd = $('#refnd').val();
var refarsip = $('#refarsip').val();
var from = $('#from').val();
var approval = [];
$('.approval :selected').each(function(i, selected){
approval[i] = $(selected).val();
});
var receiver = [];
$('.for :selected').each(function(i, selected){
receiver[i] = $(selected).val();
});
$.ajax({
type: 'post',
url: '<?php echo $this->baseurl; ?>/memo/saveDraft',
data: {
scope : scope,
secrecy : secrecy,
priority : priority,
from : from,
approval : approval,
receiver : receiver,
cc : cc,
subject : subject,
msg : msg,
attachment : formData,
refnd : refnd,
refarsip : refarsip
}

Try this:
HTML:
<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>
JS:
$('#upload').on('click', function() {
var file_data = $('#pic').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url : 'upload.php', // point to server-side PHP script
dataType : 'text', // what to expect back from the PHP script, if anything
cache : false,
contentType : false,
processData : false,
data : form_data,
type : 'post',
success : function(output){
alert(output); // display response from the PHP script, if any
}
});
$('#pic').val(''); /* Clear the file container */
});
Php:
<?php
if ( $_FILES['file']['error'] > 0 ){
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
{
echo "File Uploaded Successfully";
}
}
?>
This will upload a single file to server. Make some changes so that you can upload multiple file as well.

jQuery Ajax GET request not working correctly

I'm trying to call an AJAX query and have had lots of trouble recently.
Im trying to call a api that I have custom made myself, it displays this when the url api/reverse/test - tset (is just uses a php function to reverse the text given in the slug3.
That function works fine, just wanted to give some back on what gets requested.
reverse.php - HTML File
<textarea id="input"></textarea>
<div id="output">
</div>
index.js - All of my jQuery and AJAX
$(document).ready(function(){
var $input = $('#input');
var $output = $('#output');
$input.on('keyup', function(){
var text = $input.val();
var url = 'http://coder.jekoder.com/api/?area=reverse&text='+text;
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
success: function(data) { var output = data; },
error: alert('fail')
}) // End of AJAX
$output.html = output;
});
});
api.php - PHP file being called
<?php
$area = $_GET['area'];
if ($area == 'reverse') {
if (isset($_GET['text']) ) $text = $_GET['text'];
else $text = 'Hello';
echo strrev($text);
}
It's then supposed to take the output variable and display that in a div but that's not the main thing that matters.
error removed - was trying to see if it fixed it

There are several issue I found:
Jquery:
var text = $('#input').val(); // if you are getting value from any inputbox - get value using .val() function
var url = 'http://localhost/test.php?data='+text; // pass data like this ?data='+text
// AJAX START
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
async: true,
success: function(data) { var output = data; alert(output)},
error: function(data) { alert('fail') }
});
In php you ca get data like this:
echo $_GET['data'];
exit;

Try this. Scope of variable output is within the success call and you are using it outside the ajax call.
$(document).ready(function()
{
var $input = $('#input');
var $output = $('#output');
$input.on('keyup', function()
{
var text = $input.val();
var url = 'http://coder.jekoder.com/api/?area=reverse&text='+text;
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
success: function(data) { var output = data; $output.html = output;},
error: alert('fail')
}) // End of AJAX
});
});

JQuery AJAX retrieving an Array of Objects

I am trying to use json_encode so that my jquery ajax function can retrieve data from my php script however the array I am attempting to encode and retrieve is an array of objects
$la_uselessinfo = array();
$lv_cnt = 0;
$uselessinfo = pg_execute($gv_dbconn, "uselessinfo_cur", array());
while($la_row = pg_fetch_row($uselessinfo)) {
$la_uselessinfo[$lv_cnt]["uinf_idno"] = $la_row[0];
$la_uselessinfo[$lv_cnt]["uinf_desc"] = $la_row[1];
$lv_cnt = $lv_cnt + 1;
}
echo json_encode($la_uselessinfo);
I am trying to retrieve this using the jquery ajax function
$.ajax({
url : 'scripts/phpfunctions.php',
type : 'GET',
data : {'action':'sel_uselessinfo'},
success : function(data) {
//console.log(data);
console.log(data["uinf_desc"][0]);
},
error : function(log) {
console.log(log.message);
}
});
I am getting the following error
Uncaught TypeError: Cannot read property '0' of undefined
I can't tell if it's going wrong in the php code or the jquery code, what is the correct way to retrieve an array of objects?

Change your PHP to:
$la_uselessinfo = array();
$lv_cnt = 0;
$uselessinfo = pg_execute($gv_dbconn, "uselessinfo_cur", array());
while($la_row = pg_fetch_row($uselessinfo)) {
$la_uselessinfo[$lv_cnt]["uinf_idno"] = $la_row[0];
$la_uselessinfo[$lv_cnt]["uinf_desc"] = $la_row[1];
$lv_cnt = $lv_cnt + 1;
}
echo json_encode($la_uselessinfo); //$la_uselessinfo is already an array, no need to wrap it again, and doing so causes you to misjudge the depth of your array
Then change your jQuery to :
$.ajax({
url : 'scripts/phpfunctions.php',
type : 'GET',
data : {'action':'sel_uselessinfo'},
success : function(data) {
//console.log(data);
console.log(data[0]["uinf_desc"]); // this line changed
},
error : function(log) {
console.log(log.message);
}
});
To loop over your results do this:
// sample data
var data = [{
"uinf_idno": "1",
"uinf_desc": "website db "
}, {
"uinf_idno": "2",
"uinf_desc": "local apache "
}]
$.each(data,function(i,e){
var uinf_idno = e.uinf_idno;
var uinf_desc = e.uinf_desc;
$('#result').append('uinf_idno= '+uinf_idno+' and uinf_desc= '+uinf_desc+' <br>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

$.ajax({
url : 'scripts/phpfunctions.php',
type : 'GET',
data : {'action':'sel_uselessinfo'},
dataType: "json",
success : function(data) {
console.log(data[0]["uinf_desc"]);
console.log(data[0]["uinf_desc"]);
},
It should be data[0]["uinf_desc"] as written in your PHP