I'm trying to transcribe what my programmer told me. He and I may be doing this all wrong, so I need to make sure he and I am doing it in the right manner. Here is what we are trying to do:
I have a page on a website and within that page, I have a button. When you click on it, I want it to (via AJAX so the page doesn't refresh)
Send data (time capture) to the DB
See that the DB recorded the change and in turn return a different value back to the site
This would in turn change the button, noting that it is in a recording mode.
Think of it in this way, the button is a timer. On click, it records the time in the DB, and in the DB it also changes the state to recording. Since it is in the recording phase, somehow it gets sent back to the website page and changes the button showing that it is recording. Naturally clicking again would stop it and record the time in the DB.
Here is how the snippets are set up (not working I think) ATM:
*sidenote: This is in Joomla
Page:
<script src="js/ajax_link.js" type="text/javascript"></script>
<div id="ajaxlink" onclick="loadurl('php/ticket_timer.php',<?php echo $row->id?>)">Start Time</div>
ajax_link.js
function loadurl(dest,ticket_id) {
jQuery.ajax({
url: dest,
type: "POST",
data: "ticket_id="+ticket_id,
success: function(msg){
alert(msg);
jQuery('#ajaxlink').text("Timer Stop");
}
});
}
ticket_timer.php
<?php
define( '_JEXEC', 1 );
define( 'DS', DIRECTORY_SEPARATOR );
define( 'JPATH_BASE', $_SERVER[ 'DOCUMENT_ROOT' ] );
require_once( JPATH_BASE . DS . 'includes' . DS . 'defines.php' );
require_once( JPATH_BASE . DS . 'includes' . DS . 'framework.php' );
require_once( JPATH_BASE . DS . 'libraries' . DS . 'joomla' . DS . 'factory.php' );
$mainframe =& JFactory::getApplication('site');
$ticket_id = $_POST['ticket_id'];
$user =& JFactory::getUser();
$user_id=$user->get('id');
//DB Query
$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select($db->quoteName(array('id', 'ticket_id', 'user_id', 'times','current_time')));
$query->from($db->quoteName('#__support_ticket_times'));
$query->where($db->quoteName('ticket_id') . ' LIKE '. $db->quote($ticket_id));
$query->where('ticket_id = '. $ticket_id, 'AND')
->where('user_id=' . $user_id );
$db->setQuery($query);
// Load the results as a list of stdClass objects (see later for more options on retrieving data).
$results = $db->loadObjectList();
$current_time=$results[0]->current_time;
$times=$results[0]->times;
$id_results = $db->loadColumn();
$db->setQuery($idquery);
$timesString = $times . ',' . date('Y-m-d g:i');
echo($timesString);
if(empty($results[0])){
$values = array(max($id_results)+1, $ticket_id, $user_id, $db->quote(date('Y-m-d g:i')),$db->quote(date('Y-m-d g:i')));
//echo "YOU GET NOTHING, MAKING NEW ROW";
$columns = array('id', 'ticket_id', 'user_id', 'times','current_time');
// Prepare the insert query.
$insert_query = $db->getQuery(true);
$insert_query
->insert($db->quoteName('#__support_ticket_times'))
->columns($db->quoteName($columns))
->values(implode(',', $values));
// Set the query using our newly populated query object and execute it.
$db->setQuery($insert_query);
$db->query();
}else{
//echo("CURRENT TIME" . $current_time);
if($current_time=='0000-00-00 00:00:00'){
echo "NO TIME";
$fields = array(
$db->quoteName('current_time'). '=' . $db->quote(date('Y-m-d g:i'))
);
}
// . $db->quote(date('Y-m-d g:i'))
else{
echo "ADD TIME";
$fields = array($db->quoteName('times') . '=' . $db->quote($timesString) ,
$db->quoteName('current_time'). "='0000-00-00 00:00:00'"
);
}
$update_query = $db->getQuery(true);
$conditions = array(
$db->quoteName('user_id') . '=' . $db->quote($user_id),
$db->quoteName('ticket_id') . '=' . $db->quote($ticket_id)
);
$update_query->update($db->quoteName('#__support_ticket_times'))->set($fields)->where($conditions);
$db->setQuery($update_query);
$db->query();
//echo $update_query;
}
?>
Can anyone suggest how to get the timer to fire back that the timer has started? Are we butchering this and is there a better way to code this?
You need to exchange some data between the PHP and the HTML page. The HTML page can be modified with Javascript, of course. The notation typically used for this kind of an exchange is JSON. In this example, we're using JSON to:
Send a boolean timerRunning to the PHP,
change the value in PHP,
send a reply,
modify the HTML page, and
store the timerRunning value in the HTML element.
So, for starters, we pass some data from the HTML element to Javascript using the HTML5 data- attributes, like this:
<div id="ajaxlink" data-url="php/ticket_timer.php" data-ticketId="<?php echo $row->id; ?> " data-timerRunning="false">Start Time</div>
In your Javascript, we access the parameters set above and send them to your PHP script via AJAX:
jQuery(document).ready(function($){
// Add an 'onClick' handler to the element
jQuery('#ajaxlink').on('click', function(event) {
// Get the url and ticket_id from the element's 'data-' attributes
var url = jQuery(this).data( 'url' );
var data = {
'ticketId' : jQuery(this).data( 'ticketId' ),
'timerRunning' : jQuery(this).data( 'timerRunning' )
}
// Send an AJAX request
jQuery.ajax({
type: 'POST',
url: url,
data: data
}).done( function(response) {
// This runs when the AJAX request succeeds
if ( 'undefined' == typeof( response.timerRunning ) ) {
alert( 'The server didn\'t tell the timer state' );
return;
}
// Store the value in the element
jQuery('#ajaxlink').data( 'timerRunning', response.timerRunning );
// Change the element HTML
if ( response.timerRunning )
jQuery('#ajaxlink').html( 'Stop Timer' );
else
jQuery('#ajaxlink').html( 'Start Timer' );
}).fail( function(jqXHR, textStatus, errorThrown ) {
// This runs when the AJAX request fails
alert( 'The AJAX request failed with the error ' + errorThrown );
});
});
});
In your PHP script, check the timerRunning value and react accordingly:
if ( isset( $_POST['timerRunning'] ) ) { // Check that we got some value for 'timerRunning'
if ( $_POST['timerRunning'] ) {
// The 'timerRunning' value is TRUE, the timer is running, now stop it
your_code_here_to_stop_the_timer();
$reply = array( 'timerRunning' => false );
} else {
// The 'timerRunning' value is FALSE, the timer isn't running, now start it
your_code_here_to_start_the_timer_and_whatever();
$reply = array( 'timerRunning' => true );
}
// Send the correct header for a JSON response
header('Content-type: application/json');
// Send the $reply array encoded as JSON
echo json_encode( $reply );
}
Related
Basically, I'm trying to create a functionality where when the user watches my complete course video and it ends, I send an Ajax request to store some value to the user-meta and post-meta and print "you have already watched this".
Till now, I'm able to call jQuery event when the video ends and call Ajax to store value in post-meta but don't really find a way to store it the right way in database by which I can check if he watched the video already or not.
JS:
var iframe = document.querySelector('.embed_video');
var player = new Vimeo.Player(iframe);
jQuery(document).ready(function(){
player.on('ended', function(){
var likes = jQuery("#like").val();
jQuery.ajax({
type: 'POST',
url: MyAjax.ajaxurl,
data: {"action": "post_word_count", "like":likes},
success: function(data){
//alert("Thank You For Liking This Post");
jQuery("#imbed_into").html("You Have Watched Already!");
}
});
});
});
PHP:
function post_word_count(){
$name = $_POST['like'];
global $wpdb;
global $user_ID, $post;
$post_id = get_the_ID();
echo '<script>';
echo 'alert($post_id)';
echo '</script>';
$wpdb->insert(
'wp_postmeta',
array(
'input_like' => $name,
'meta_value' => $user_id,
),
array(
'%s'
)
);
die();
return true;
}
Here is my situation:
I have a JS function that creates an XMLHttpRequest object. The request is opened, and I'm calling the "GET" method on a specified url. The request works, as in it gets to the url destination and executes the code in the destination, but I'm not sure how to access a variable in the destination code.
Here's what I've got:
JS:
function fillTestsTable()
{
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.open("GET", "./db-queries/get-tests.php");
xhr.send(null);
}
PHP destination file:
<?php
$conn = mysqli_connect("localhost:3306" , "exampre2_tplugin" , ",Vyml.F!#(}{" , "exampre2_totaltoefltimeplugin");
if (!$conn) {
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
$sql = "SELECT * FROM TOEFLTESTS";
$result = mysqli_query($conn, $sql);
//return $result;
?>
What I am trying to do is return the data in the $result variable in the php. Is there a way of doing this?
In PHP, return is used to return a value from the current function to where that function was called.
To output data in the HTTP response use echo or print.
Note that mysqli_query returns a mysqli_result object so you will need to extact the data you want from that (e.g. with fetch_array) and then convert it to a suitable text format (e.g. with json_encode).
For example: if you wanted to return JSON formatted data for your Ajax callback function to play with you might do something like this:
<?php
$conn = mysqli_connect("localhost:3306" , "exampre2_tplugin" , ",Vyml.F!#(}{" , "exampre2_totaltoefltimeplugin");
$data=[]; //store recordset here
$sql = "SELECT * FROM TOEFLTESTS";
$result = mysqli_query($conn, $sql);
if( $result ){ /* iterate through the recordset, add each row to output data */
while( $rs=$result->fetch_object() ){
$data[]=$rs;
}
}
/* send data back to the ajax callback function */
exit( json_encode( $data ) );
?>
There are many ways you could proceed with this but it helps to clearly define the purpose and identify how your app is to work. The callback will then manipulate the response data to add new rows to your HTML table. Knowing what the callback is to do will generally ( or can ) affect the format of data you return - in your case if it is simply to be new rows in an HTML table it would be better to format the data server-side as HTML and send back raw html text.
Using Ajax allows your app to request data of whatever sort without the need to reload the page ( usually a traditional form submission )
As a basic example of populating an HTML table following a basic ajax request ( POST rather than GET but would work the same )
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'maps';
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
ob_clean();
$sql='select `name`,`address`,`lat`,`lng` from `maps` limit 10';
$res=$db->query( $sql );
while( $rs=$res->fetch_object() ){
printf('
<tr>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
</tr>',
$rs->name,
$rs->address,
$rs->lat,
$rs->lng
);
}
exit();
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Ajax: fetch data from db - add to table</title>
<script>
const ajax=function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
};
</script>
</head>
<body>
<input type='button' value='Fetch Data' />
<table></table>
</body>
<script>
document.querySelector('input[type="button"]').onclick=function(e){
ajax( location.href, false, function(r){
this.innerHTML=r
}.bind( e.target.nextElementSibling ))
}
</script>
</html>
Ok where to start, I will try and explain as much as I can.
I am using wordpress with contact form 7 and I am trying to populate 3 dropdown items on the contact form, I found some code that I was able to use with no problem but the problem with this was that it was getting the information from a excel file, the file is now to big and will not run on my website anymore so I would like to get the information from my database now.
I have made a table in my database "vehicle_information" with 3 columns "vehicle_type", "vehicle_make", vehicle_model"
I have code in my functions.php and code in my footer to be able to use the cf7 shortcodes.
Code from funtions.php
function ajax_cf7_populate_values() {
//MySQLi information
$db_host = '***';
$db_username = '***';
$db_password = '***';
$vehicles_makes_models = array();
//connect to mysqli database (Host/Username/Password)
$connection = mysqli_connect($db_host, $db_username, $db_password) or die('Error ' . mysqli_error());
//select MySQLi dabatase table
$vehicles_makes_models = mysqli_select_db($connection, 'vehicle_information') or die('Error ' . mysqli_error());
$sql = mysqli_query($connection, 'SELECT * FROM vehicle_type');
while($row = mysqli_fetch_array($sql)) {
$vehicles_makes_models[$row[0]][$row[1]][] = $row[2]; }
}
// setup the initial array that will be returned to the the client side script as a JSON object.
$return_array = array(
'vehicles' => array_keys($vehicles_makes_models),
'makes' => array(),
'models' => array(),
'current_vehicle' => false,
'current_make' => false
);
// collect the posted values from the submitted form
$vehicle = key_exists('vehicle', $_POST) ? $_POST['vehicle'] : false;
$make = key_exists('make', $_POST) ? $_POST['make'] : false;
$model = key_exists('model', $_POST) ? $_POST['model'] : false;
// populate the $return_array with the necessary values
if ($vehicle) {
$return_array['current_vehicle'] = $vehicle;
$return_array['makes'] = array_keys($vehicles_makes_models[$vehicle]);
if ($make) {
$return_array['current_make'] = $make;
$return_array['models'] = $vehicles_makes_models[$vehicle][$make];
if ($model) {
$return_array['current_model'] = $model;
}
}
}
// encode the $return_array as a JSON object and echo it
echo json_encode($return_array);
wp_die();
// These action hooks are needed to tell WordPress that the cf7_populate_values() function needs to be called
// if a script is POSTing the action : 'cf7_populate_values'
add_action( 'wp_ajax_cf7_populate_values', 'ajax_cf7_populate_values' );
add_action( 'wp_ajax_nopriv_cf7_populate_values', 'ajax_cf7_populate_values' );
Code from my footer
<script>
(function($) {
// create references to the 3 dropdown fields for later use.
var $vehicles_dd = $('[name="vehicles"]');
var $makes_dd = $('[name="makes"]');
var $models_dd = $('[name="models"]');
// run the populate_fields function, and additionally run it every time a value changes
populate_fields();
$('select').change(function() {
populate_fields();
});
function populate_fields() {
var data = {
// action needs to match the action hook part after wp_ajax_nopriv_ and wp_ajax_ in the server side script.
'action' : 'cf7_populate_values',
// pass all the currently selected values to the server side script.
'vehicle' : $vehicles_dd.val(),
'make' : $makes_dd.val(),
'model' : $models_dd.val()
};
// call the server side script, and on completion, update all dropdown lists with the received values.
$.post('<?php echo admin_url( 'admin-ajax.php' ) ?>', data, function(response) {
all_values = response;
$vehicles_dd.html('').append($('<option>').text(' -- choose vehicle -- '));
$makes_dd.html('').append($('<option>').text(' -- choose make -- '));
$models_dd.html('').append($('<option>').text(' -- choose model -- '));
$.each(all_values.vehicles, function() {
$option = $("<option>").text(this).val(this);
if (all_values.current_vehicle == this) {
$option.attr('selected','selected');
}
$vehicles_dd.append($option);
});
$.each(all_values.makes, function() {
$option = $("<option>").text(this).val(this);
if (all_values.current_make == this) {
$option.attr('selected','selected');
}
$makes_dd.append($option);
});
$.each(all_values.models, function() {
$option = $("<option>").text(this).val(this);
if (all_values.current_model == this) {
$option.attr('selected','selected');
}
$models_dd.append($option);
});
},'json');
}
})( jQuery );
The problem is I am still learning and this is the first time I have had to use this funtion.
and I am getting an error on my website
Warning: array_keys() expects parameter 1 to be array, null given in /customers/4/0/0/motobid.co.uk/httpd.www/wp-content/themes/storevilla-child/functions.php on line 38 {"vehicles":null,"makes":[],"models":[],"current_vehicle":false,"current_make":false}
any help would be very greatful.
Just like to say code was supplied by BDMW.
Where you use the method array_keys(), instead of:
$return_array['makes'] = array_keys($vehicles_makes_models[$vehicle]);
Try this:
$return_array['makes'] = ! empty($vehicles_makes_models[$vehicle]) ? array_keys($vehicles_makes_models[$vehicle]) : [];
From what I've read, the array_keys() has been an issue depending on php versions. Hope this helps!
I implemented my custom form and I need to post Image to custom field of my Custom Post Type, but it did not worked, cause image returns long string in base64 encoding...
javascript, ajax:
// get values to an array()
var requestArray = "";
requestArray = {"name" : $("#nameAdvertisement").val(),
"category" : $("#categoryAdvertisement").val(),
"description" : $("#descriptionAdvertisement").val(),
"photo" : $("#photoAdvertisement").val(),
"photoAdvertisement" : $("#pro-img-4").attr('src')};
$.ajax({
url: ajaxurl,
type: "POST",
data: {"action": "addAdvertisement", "formValidation": requestArray},
//dataType: "html",
success: function (data) {
}
});
functions.php, where code is incoming for posting my data ( $getData['photoAdvertisement'] represents long image string)
$getData = $_POST['formValidation'];
// Create post object
$my_post = array(
'post_title' => 'New Posts with Image',
'post_content' => 'Some testing content',
'post_status' => 'publish',
'post_author' => 1,
'post_type' => 'inzeraty'
);
// Insert the post into the database
$post_id = wp_insert_post( $my_post);
add_post_meta($post_id, 'name', 'Name of New post', true);
add_post_meta($post_id, 'description', 'Description of new Post', true);
add_post_meta($post_id, 'photo', $getData['photoAdvertisement'], true);
This will need to be tweaked -
This works with URls of images, but not sure how you will get the $image_data through post.
First, you will need to decode the base64 image.
$newImageFile = base64_decode($getData['photoAdvertisement']);
Then you will need to find the directories to work with :
$upload_dir = wp_upload_dir();
$image_data = file_get_contents($newImageFile);
$filename = basename($newImageFile);
Now that you have a filename, you can check if the file and the filename already exists in your library
if(wp_mkdir_p($upload_dir['path'])) $file = $upload_dir['path'] . '/' . $filename;
else $file = $upload_dir['basedir'] . '/' . $filename;
file_put_contents($file, $image_data);
$wp_filetype = wp_check_filetype($filename, null );
$attachment = array(
'post_mime_type' => $wp_filetype['type'],
'post_title' => sanitize_file_name($filename),
'post_content' => '',
'post_status' => 'inherit'
);
You will need the functionalities of post.php - so if you don't have it yet, then include it.
if ( ! function_exists( 'post_exists' ) ) {
require_once( ABSPATH . 'wp-admin/includes/post.php' );
}
this way you can check, if the same filename has already been used in your library like this
if (post_exists($filename)){
//Do whatever - maybe update the alt or something.
}else {
//The file does not exist, and can be inserted.
$attach_id = wp_insert_attachment( $attachment, $file, $post_id );
// $post_id comes from your earlier insertion
// You will need the functions from image.php as well..
require_once(ABSPATH . 'wp-admin/includes/image.php');
//Now we will generate the new image metadata
$attach_data = wp_generate_attachment_metadata( $attach_id, $file );
$res1= wp_update_attachment_metadata( $attach_id, $attach_data );
$filealt = "You alternative text here - maybe sanitize the filename or make an input for it";
//attach the metadata to the image
update_post_meta($attach_id, '_wp_attachment_image_alt', $filealt); // Add the alt text
//Now you can add the image to your meta fields
add_post_meta($post_id, 'photo', $attach_id);
}
Note, I have not tested this.
You will probably need to tweak it a little - Especially around the file_get_contents($newImageFile); part.
NOTE : This has to be done after your $post_id = wp_insert_post( $my_post); part
Good luck with it!
I am trying to implement "redeem coupon" functionality in a Woocommerce store, I have already found useful tutorial, but I can't make it work properly.
This is the tutorial.
What I've already done:
Created new page template with this code:
<div class="redeem-coupon">
<form id="ajax-coupon-redeem">
<p>
<input type="text" name="coupon" id="coupon"/>
<input type="submit" name="redeem-coupon" value="Redeem Offer" />
</p>
<p class="result"></p>
</form><!-- #ajax-coupon-redeem -->
Added this to my theme's functions.php file:
add_action( 'wp_ajax_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
add_action( 'wp_ajax_nopriv_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
Added this to my theme's functions.php file:
function spyr_coupon_redeem_handler() {
// Get the value of the coupon code
$code = $_REQUEST['coupon_code'];
// Check coupon code to make sure is not empty
if( empty( $code ) || !isset( $code ) ) {
// Build our response
$response = array(
'result' => 'error',
'message' => 'Code text field can not be empty.'
);
header( 'Content-Type: application/json' );
echo json_encode( $response );
// Always exit when doing ajax
exit();
}
// Create an instance of WC_Coupon with our code
$coupon = new WC_Coupon( $code );
// Check coupon to make determine if its valid or not
if( ! $coupon->id && ! isset( $coupon->id ) ) {
// Build our response
$response = array(
'result' => 'error',
'message' => 'Invalid code entered. Please try again.'
);
header( 'Content-Type: application/json' );
echo json_encode( $response );
// Always exit when doing ajax
exit();
} else {
// Coupon must be valid so we must
// populate the cart with the attached products
foreach( $coupon->product_ids as $prod_id ) {
WC()->cart->add_to_cart( $prod_id );
}
// Build our response
$response = array(
'result' => 'success',
'href' => WC()->cart->get_cart_url()
);
header( 'Content-Type: application/json' );
echo json_encode( $response );
// Always exit when doing ajax
exit();
}
}
Created "kody.js":
jQuery( document ).ready( function() {
jQuery( '#ajax-coupon-redeem input[type="submit"]').click( function( ev ) {
// Get the coupon code
var code = jQuery( 'input#coupon').val();
// We are going to send this for processing
data = {
action: 'spyr_coupon_redeem_handler',
coupon_code: code
}
// Send it over to WordPress.
jQuery.post( woocommerce_params.ajax_url, data, function( returned_data ) {
if( returned_data.result == 'error' ) {
jQuery( 'p.result' ).html( returned_data.message );
} else {
// Hijack the browser and redirect user to cart page
window.location.href = returned_data.href;
}
})
// Prevent the form from submitting
ev.preventDefault();
});
});
Called the script from functions.php with this code:
function my_scripts_method() {
wp_register_script('kody',
get_template_directory_uri() . '/js/kody.js',
array('jquery'),
'1.0' );
enqueue the script
wp_enqueue_script('kody');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
And here's the weird thing: it's sort of working. I've setup a page where I can enter the coupon code, I paste the code, click "Redeem" and it adds products related to the coupon to the cart. It doesn't, however apply pre-defined discounts.
The "redeem coupon" page is also only half-working. It should display error messages when someone leaves the field empty or enters an incorrect code - and it only does the former. Entering incorrect code results in redirection to cart.
My knowledge on Ajax and JS is very limited, I tried to find some other tutorials, but without any luck.
Is something wrong with the code? It's from 2014, so something might have change in Wordpress engine, causing troubles.
Thank you in advance for any reply!
Regards
Problems solved, if anyone encounters similar issues with the tutorial provided, here's what you have to do:
To apply discount, add following code:
global $woocommerce;
WC()->cart->add_discount( $code );
Just below these lines:
// Coupon must be valid so we must
// populate the cart with the attached products
foreach( $coupon->product_ids as $prod_id ) {
WC()->cart->add_to_cart( $prod_id );
To display invalid code message change this:
// Check coupon to make determine if its valid or not
if( ! $coupon->id && ! isset( $coupon->id ) ) {
To this:
// Check coupon to make determine if its valid or not
if( ! $coupon->id && ! isset( $coupon_id ) ) {
Everything is working now.
(Also changed the title to make it easier to others to find this post in the future.)