What am I doing wrong? the form shortcode(in functions.php):
function ranking(){
ob_start();
?>
<form id="get_rank" method="POST">
<label for="customRange1" class="form-label">דרגו את נותן השירות</label>
<div style="display: flex; justify-content: space-between; width: 100%;"><p><i class="fas fa-thumbs-down"></i></p><p><i class="fas fa-heart"></i></p></div>
<input type="range" class="form-range" min="0" max="10" step="0.5" id="customRange1" name="customRange1" required>
<input type="submit" value="שליחת דירוג" id="rank-submit"/>
</div>
</form>
<div class="success_msg" style="display: none">הדירוג התקבל, תודה רבה</div>
<div class="error_msg" style="display: none">
חווינו תקלה, נסו שוב במועד מאוחר יותר.
</div>
<?php
$result = ob_get_contents();
ob_end_clean();
return $result;
}
add_shortcode('ranking_shortcode', 'ranking');
The js scripts i am adding (at the top of the functions.php)
add_action('wp_enqueue_scripts', 'hello_child_styles');
function hello_child_styles(){
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/assets/js/script.js' );
wp_localize_script( 'custom-js', 'digitact_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
The form handling using ajax (located at a separated folder and i call it as you saw above )
jQuery(document).ready(function($){
$( document ).on( 'submit', '#get_rank', function(e){
e.preventDefault();
alert('form submited');
let score =$(this).find('#customRange1').val()
jQuery.ajax({
url: digitact_ajax_object.ajax_url,
type:"POST",
dataType:'json',
data: {
action:'ranking_process',
rank:score,
}, success: function(response){
$(".success_msg").html(response.data).css({
"color":'#f58634',
"font-size":'25px',
"font-family": 'Heebo',
"text-align":'center'});
}, error: function(data){
$(".error_msg").html(data.data).css({
"color":'tomato',
"font-size":'25px',
"font-family": 'Heebo',
"text-align":'center'}); }
});
});
})
And last - my php commands and actions in functions.php
//connect to ajax
add_action( 'wp_ajax_ranking_process', 'ranking_process' ); //execute when wp logged in
add_action( 'wp_ajax_nopriv_ranking_process', 'ranking_process'); //execute when logged out
//check for post request
function ranking_process(){
if(!empty($_POST['rank'])){
//set global variables needed
global $post;
$current_user = wp_get_current_user();
$ranking_score = $_POST['rank'];
$save_ranks = [];
//create new repeater row
$row = array (
'field_60ee94521a800' => $ranking_score,
'field_60ee9daf715b3' => $current_user->user_email
);
add_row('field_60ee7a633d5d3', $row);
//push to local array for tracking;
if( have_rows('ranking') ):
while ( have_rows('ranking') ) : the_row();
$sub_value = get_sub_field('user_ranking');
array_push($save_ranks, $sub_value);
endwhile;
else :
//if proccess failed and no ranking was added
exit();
endif;
//calculations based no the users rankings and saving it in custom fields
$sum_of_ranks = array_sum($save_ranks);
if(count($save_ranks) > 0){
$avarage_rank = ($sum_of_ranks)/(count($save_ranks));
update_field('ranking_result',$avarage_rank,$post->ID);
update_field('voters_amount', count($save_ranks),$post->ID);
}
//send email
$message = ' ,קיבלתם דירוג חדש בדיגיטקט';
$message .= ' - הדירוג שקיבלתם הוא';
$message .= $ranking_score;
wp_mail(get_the_author_meta('user_email'),'קיבלתם דירוג בדיגיטקט',$message,'From: Digitact<support@digitact.co.il>');
$current_post_slug = $post->post_name;
};
wp_die();
};
The result i am getting is that the page refreshes, but nothing happends, the request is not handled by ajax. Please help I have no idea what is wrong I follow a few tutorials and read the documentation.