sanumolu5

Hi,

The document.write() that I am using to output time on the frontend is not working at all since W3 Total cache is enables.

Also I am facing the issue with W3 Total Cache in another website too. The css changes that I am making are not reflecting on the front end, even after doing purge all caches.

@vmarko

Thank you for your reply and offer to help.

We are not using any other cache like server-side or proxy cache.

Please refer to the screenshot where time is supposed to be displayed for one class. Similarly for all classes time has to be shown at the similar place.

https://www.awesomescreenshot.com/image/39753095?key=27d01cfe39c39ae2c129ca846210e8f0

@annuman Thank you for the reply. Could you please tell me how and where to submit a query?
And fyi, I just remembered that the NInja table is actually created by importing csv file which is from the export of Tablepress. Does this issue have to do something because of this? May be I should try creating fresh Ninja table from scratch?

Is what I did the optimum solution? Can’t we do anything to make it to pitch perfection from user experience point of view?

Hi @bcworkz ,

Thank you very much for the reply.

1. When you suggested custom template for the entire page, what does that mean? I will be having different number of classes on each day. So without having to create custom template for each day, will I be able to generate online classes with just one custom template?
2. And how can I generate that structure for each class recursively (per day)?
3. Also I want to let you know that few classes repeat on multiple days. Few classes on all days. Few classes only once per week.

• This reply was modified 1 year, 7 months ago by sanumolu5.

Hi @bcworkz ,

Thank you for your reply. I contacted Siteground support (Our hosting server is Siteground) and they said there is nothing wrong at their end. It seems, since we are currently using PHP 7.4, the version of the timezone database is 2022.01.

This means that the list of countries which is available for us was last updated on this date, and that all countries should be available there.

Below is my PHP code:

//Using cookie
    global $user_timezone_offset;
    $userTimezone;

    $offset_seconds = -$user_timezone_offset*60; // The timezone offset to search for in seconds
    $timezone_identifiers = DateTimeZone::listIdentifiers(); // Get a list of timezone identifiers
    foreach ($timezone_identifiers as $timezone_identifier) {
        $timezone = new DateTimeZone($timezone_identifier);
        $timezone_offset = $timezone->getOffset(new DateTime());     
        if ($timezone_offset == $offset_seconds) {              
            $userTimezone = new DateTimeZone($timezone_identifier);           
            break;
        }
    }

    $originalTimezone = new DateTimeZone('America/Chicago');    
    $dateTime = new DateTime($input_arr['input_time'], $originalTimezone);   
    $dateTime->setTimezone(new DateTimeZone($userTimezone->getName()));

    echo $dateTime->format('g:i A T');

And it is showing offset as shown in the screenshot.

https://www.awesomescreenshot.com/image/39326805?key=73f494d9ec20671e53134cfe4bdf35ec

@catacaustic ,

Thank you for your reply. I want to show timezone as “IST”, “CST” etc.. in PHP code. But looks like using PHP Datetime -> format(T”), it isn’t showing abbreviated timezone, rather it is showing the offset format. And this is happening for almost all the countries across the world, except for places in “US&Canada” timezone.

I did.

@bcworkz ,

Thank you for your reply.

1. In the first option you provided, I think, if we were to come to the page through any link, we could directly set a cookie for user timezone offset and access it. It’s just that the cookie won’t be set when the website is opened for the first time freshly in a browser. And we don’t even have to pass it as Querystring anymore, rather we could access a global variable set from the cookie.
2. I did not clearly understand about second option at all.

One more thing is,

I would like to generate the online class details (shown in the screenshot) dynamically. Currently all the online class details are entered statically. Ecah one is a combination of header, image, header, text-editor, and a “LIVE” button which becomes visible based on a condition. There are more classes if you scroll down. There are placed inside columns of each section using Edit with Elementor. How can I accomplish this dynamically? I don’t know exactly how can I do that, but have a faint idea, Like, may be, I can create one template for class details using Elementor widgets (header, image, header, text-editor and button), and then in PHP I can loop through the classes and load, fill the template with appropriate values.

https://www.awesomescreenshot.com/image/39195322?key=99fa303839ef682328f10e3597695069

But I have no clue on the coding for this. Also if there is a better approach, please suggest so.

Thanks & Regards,

SA

• This reply was modified 1 year, 7 months ago by sanumolu5.

Hi,

There is an update. I changed my code in PHP and Javascript to the following:
Initially my javascript function will run which sets user’s timezoneoffset, and makes an Ajax request to PHP. In PHP the online classes timings are converted to user’s timezone based and also current live classes (those classes for which user’s current time falls within 1 hour range) are filtered. Now I have to show them on the front-end in the format of three columns (Class name, a button to open zoom link to the online class, A link to attendance tracker). All the currently LIVE classes should be shown in one section in this 3-column format. How can I accomplish this.

Currently I am echoing data from PHP (for testing purpose) which is sending back as response to Ajax call made from Javascript function and is displaying in a div. But this is slowing down the page like anything. It’s taking almost a minute to load.

my-custom-hooks.php

<?php

/*
Plugin Name:  JKY-Custom-Hooks
Version    :  1.0
Description:  Demonstrating WordPress Hooks (Actions and Filters) with multiple examples.
Author     :  Sam
Author URI :  https://staging59.courses.jkyog.org/
License    :  GPLv2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  my-custom-hooks
*/
    global $online_classes_usertimes , $live_classes;
    $online_classes_usertimes = array();
    $live_classes = array();
    
    /**
     * Proper way to enqueue scripts and styles.
     */
    function wpdocs_load_js_scripts() {
        wp_enqueue_script( 'jquery');
        wp_enqueue_script( 'moment-js', plugins_url('/assets/js/moment-js/moment.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone', plugins_url('/assets/js/moment-js/moment-timezone.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-data', plugins_url('/assets/js/moment-js/moment-timezone-with-data.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-tenyears', plugins_url('/assets/js/moment-js/moment-timezone-with-data-10-year-range.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-nineteenseventy', plugins_url('/assets/js/moment-js/moment-timezone-with-data-1970-2030.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script('custom-date-scripts', plugins_url( '/assets/js/custom-date-scripts.js' , __FILE__ ));
    }    
add_action( 'wp_enqueue_scripts', 'wpdocs_load_js_scripts' );
 
function wpb_hook_get_client_timezonetime($attr) {
    $input_arr = shortcode_atts( array(
					'input_time' => '5:00 PM',
                    'input_timezone' => 'CST'
				), $attr);
   
    return "<script type='text/javascript'>get_client_time( '". $input_arr['input_time'] ."', '". $input_arr['input_timezone'] ."' );</script>";
}
add_shortcode('get_client_timezonetime', 'wpb_hook_get_client_timezonetime');

function wpb_hook_get_liveinfo_client_time($attr) {
    $input_arr = shortcode_atts( array(
					'input_time' => '5:00 PM',
                    'input_timezone' => 'CST',
        			'id' => ''
				), $attr);
 
    return "<script type='text/javascript'>get_liveinfo_client_time( '". $input_arr['input_time'] ."', '". $input_arr['input_timezone'] ."', '". $input_arr['id'] ."' );</script>";
}
add_shortcode('get_live_info_client_time', 'wpb_hook_get_liveinfo_client_time');

function wpb_hook_process_classes(){
    
        // Debugging code to log incoming request data
error_log('Incoming AJAX request: ' . print_r($_POST, true));

// Retrieve the timezoneOffset value from the POST data
$timezoneOffset = isset($_POST['timezoneOffset']) ? $_POST['timezoneOffset'] : '';

// Debugging code to log the timezoneOffset value
error_log('timezoneOffset: ' . $timezoneOffset);

    
    $online_classes = array (
      "Daily Satsang" => array (
                "time_val" => "7:00 AM", 
                "time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Kripalu Paddhati" => array(
        		"time_val" => "8:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "7 Divine Laws - Book Club" => array(
        		"time_val" => "7:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Bhagavad Gita Study" => array(
        		"time_val" => "7:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
   		),
      "Prem Yoga" => array(
        		"time_val" => "9:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Upanishad Sarita" => array(
        		"time_val" => "9:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Weekly Satsang" => array(
        		"time_val" => "10:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Bhagavad Gita Recitation" => array(
        		"time_val" => "6:00 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Daily Scripture Reading - Ramayan" => array(
        		"time_val" => "7:00 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Daily Meditation" => array(
        		"time_val" =>"7:30 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Nutrition and Lifestyle Coaching" => array( 
        		"time_val" => "8:00 PM",
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	)
    ); 
    
    
    // Get the user's timezone offset from the AJAX request data
  $userTimezoneOffset = $_POST['timezoneOffset'];

    // Convert the times to the user's timezone
  convertTimesToUserTimezone($online_classes, $userTimezoneOffset);
  global $online_classes_usertimes , $live_classes; 
    // Return the list of times in the user's timezone as a JSON response
  $response = array('online_classes_usertimes : hello : ' => $live_classes);
  echo json_encode($response);   

}
add_action( "process_online_classes_action", "wpb_hook_process_classes" );
//add_shortcode( "process_online_classes", "wpb_hook_process_classes" );

// Function to convert a list of online classes with times from one timezone to another
function convertTimesToUserTimezone($online_classes, $userTimezoneOffset) {
    echo "userTimezoneOffset came : " . $userTimezoneOffset . "<br>";

  // Create a DateTimeZone object for the user's timezone
  $userTimezone = new DateTimeZone(sprintf('%+03d:%02d', abs($userTimezoneOffset / 60), abs($userTimezoneOffset % 60)));
    echo "userTimezone : " . $userTimezone->getName() . "<br>";

  // Create a DateTimeZone object for the original timezone (CDT in this example)
  $originalTimezone = new DateTimeZone('America/Chicago');

  global $online_classes_usertimes , $live_classes;
    
  // Convert each time to the user's timezone
  foreach ($online_classes as $online_class) {
    $dateTime = new DateTime($online_class["time_val"], $originalTimezone);
      echo "original datetime: " . $dateTime->format('Y-m-d h:i:s A') . "<br>";
    $dateTime->setTimezone($userTimezone);
      echo "user's datetime: " . $dateTime->format('Y-m-d h:i:s A') . "<br>";
    $online_classes_usertimes[] = $dateTime->format('Y-m-d h:i:s A');
    
      
    if(is_user_within_one_hour_of_class($userTimezone->getName(), $dateTime)) {
        $live_classes[] = $dateTime->format('Y-m-d h:i:s A');
    }
  }

  // Return the list of online classes in the user's timezone
  return $online_classes_usertimes;
}

function is_user_within_one_hour_of_class($user_timezone, $start_time) {
    // Get the current time in the user's timezone
    $user_time = new DateTime('now', new DateTimeZone($user_timezone));
    echo 'user_time : ' . $user_time->format('h:i:s A') . "<br>";

    // Get the start time of the class as a DateTime object
      // Add 1 hour to the current time
    $end_time = clone $start_time;
    $end_time->modify('+1 hour');
    
     echo 'start_time : ' . $start_time->format('h:i:s A') . "<br>";
     echo 'end_time : ' . $end_time->format('h:i:s A') . "<br>";

    if ($user_time >= $start_time && $user_time <= $end_time) {
        echo "time falls <br>";
        return true;
    } else {
        echo "time does not fall <br>";
        return false;
    }
}

function get_live_classes($online_classes, $timezone_offset) {
    // Get the current date and time in the user's timezone
    $user_time = new DateTime('now', new DateTimeZone('UTC'));
    $user_time->modify($timezone_offset . ' seconds');

    // Filter the online classes to those that are within 1 hour of the user's current time
    $live_classes = array();
    foreach ($online_classes as $class) {
        $class_time = new DateTime($class['time_val'], new DateTimeZone('America/Chicago'));
        $class_time->modify($timezone_offset . ' seconds');
        $time_diff = $class_time->diff($user_time);
        $hours_diff = $time_diff->h + ($time_diff->days * 24);
        if ($hours_diff >= -1 && $hours_diff <= 1) {
            $live_classes[] = $class;
        }
    }

    return $live_classes;
}

//=================================================
// Security: Abort if this file is called directly
//=================================================
if ( !defined('ABSPATH') ) { 
    die;
}

if (isset($_POST['timezoneOffset'])) {
    echo "this is not triggering hook <br>";
 	wpb_hook_process_classes();
}

?>

custom-date-scripts.js

    console.log(jQuery);

	var jq = jQuery.noConflict();

	// Call the function when the page loads
    jq(document).ready(function() {
        getUserTimezoneOffset();
    });

    // Function to get the user's timezone offset and send it to the server via AJAX
    function getUserTimezoneOffset() {
      var userTimezoneOffset = new Date().getTimezoneOffset();   
        
       try {
          jQuery.ajax({
            url: '../../my-custom-hooks.php',
            type: 'POST',
            data: {
              'timezoneOffset': userTimezoneOffset
            },
            noConflict: true,
            success: function(response) {
                debugger;
              // Handle the server response here
                //jQuery(document).trigger('process_online_classes_action', response);
                jQuery('#online-classes-container').html(response);
            },
              error: function(xhr, status, error) {
                  // handle the error here
                  console.log("Error: " + error);
              }
          });
         } catch(error) {
          // handle the error here
          console.log("Error: " + error);
      }   
    }

	function get_client_local_time($input_time, $input_timezone) {
        var dt = moment($input_time, ["h:mm A"]).format("HH:mm");               
        var splitTime = dt.split(/:/)
        var full_date = moment(new Date().setHours(splitTime[0], splitTime[1], 0)).tz("America/Chicago", true);
        var local_time = moment(full_date).tz(moment.tz.guess());
    
        return local_time;
    }
	
	function get_client_time($input_time, $input_timezone) {
        var local_time = get_client_local_time($input_time, $input_timezone);      
        var result = "<span style='color: #DA4505; font-size: 16px; font-weight: 600; font-style: italic; display: block; text-align: center'>" + local_time.format("h:mm a z") + "</span>";
        //document.write(result);
        return result;
    }

    function get_liveinfo_client_time($input_time, $input_timezone, $id) {     
        var result_bool = check_time_in_range($input_time, $input_timezone);
        if(result_bool) {
            var isLiveButton = document.getElementById($id);
            isLiveButton.style.visibility = 'visible';
        } else {
            var isLiveButton = document.getElementById($id);
            isLiveButton.style.visibility = 'hidden';
        }
    }

	function check_time_in_range($input_time, $input_timezone) {
        var start = get_client_local_time($input_time, $input_timezone);
        var end = moment(start).add(1, 'hours'); 
        var d = moment(); // current time
        
        var result_bool = false;
        
        if (start.hour() < d.hour() && d.hour() < end.hour()) {
            result_bool = true;
        } else if (start.hour() == d.hour()) {
            if (d.hour() == end.hour()) {
                if(start.minute() <= d.minute() && d.minute() <= end.minute()) {    
                    result_bool = true;
                } else {
                    result_bool = false;
                }
            } else if(start.minute() <= d.minute()) {
                result_bool = true
            } else {
                result_bool = false;
            }
        } else if (d.hour() == end.hour()) {
            if(d.minute() <= end.minute()) {
                result_bool = true;
            } else {
                result_bool = false;
            }
        } else {
            result_bool = false;
        }
      return result_bool;
    }

Please kindly help me out to get this working by tomorrow. My life and food depends on this work. Please.

Hi,

Any help here. Today whole day I tried on this trying to generate current live classes based on user’s timezone and display it on the front end. I tried various ways, but I am missing something. I really feel like dying out of frustration that this isn’t working. Any help would be highly and highly appreciated.

• This reply was modified 1 year, 7 months ago by sanumolu5.

Hello @bcworkz,

Just an update to the previous message. I researched and found that even though jQuery is loaded “Uncaught TypeError: $ is not a function” would be caused if there is jQuery conflict. Hence I changed my Javascript code to the following:

	var jq = jQuery.noConflict();

	// Call the function when the page loads
    jq(document).ready(function() {
        getUserTimezoneOffset();
    });

    // Function to get the user's timezone offset and send it to the server via AJAX
    function getUserTimezoneOffset() {
      var userTimezoneOffset = new Date().getTimezoneOffset();
      jQuery.ajax({
        url: '../../my-custom-hooks.php',
        type: 'POST',
        data: {
          'timezoneOffset': userTimezoneOffset
        },
        noConflict: true,
        success: function(response) {
          // Handle the server response here
             jQuery('#result').html(response);
        }
      });
    }

But still it is causing a 500 error due to ajax call. I did not change anything with respect to PHP code sent in my earlier message. Please kindly help.

@bcworkz

I am really trying my best to get this working. Meanwhile I added Jquery before my custom javascript in my custom plugin’s main file.

However I am getting this error:

custom-date-scripts.js?ver=6.2:3 Uncaught TypeError: $ is not a function
 

In my custom plugin, the code I have written to convert online-classes times to user timezone based including enque scripts is as follows:

<?php

/*
Plugin Name:  JKY-Custom-Hooks
Version    :  1.0
Description:  Demonstrating WordPress Hooks (Actions and Filters) with multiple examples.
Author     :  Sam
Author URI :  https://staging59.courses.jkyog.org/
License    :  GPLv2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  my-custom-hooks
*/
     
function wpdocs_load_js_scripts() {
        wp_enqueue_script( 'jquery');
        wp_enqueue_script( 'moment-js', plugins_url('/assets/js/moment-js/moment.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone', plugins_url('/assets/js/moment-js/moment-timezone.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-data', plugins_url('/assets/js/moment-js/moment-timezone-with-data.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-tenyears', plugins_url('/assets/js/moment-js/moment-timezone-with-data-10-year-range.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script( 'moment-timezone-nineteenseventy', plugins_url('/assets/js/moment-js/moment-timezone-with-data-1970-2030.min.js', __FILE__ ), array(), '1.0.0', false);
        wp_enqueue_script('custom-date-scripts', plugins_url( '/assets/js/custom-date-scripts.js' , __FILE__ ));
    }    
add_action( 'wp_enqueue_scripts', 'wpdocs_load_js_scripts' );

function wpb_hook_process_classes(){
     $online_classes = array (
      "Daily Satsang" => array (
                "time_val" => "7:00 AM", 
                "time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Kripalu Paddhati" => array(
        		"time_val" => "8:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "7 Divine Laws - Book Club" => array(
        		"time_val" => "7:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Bhagavad Gita Study" => array(
        		"time_val" => "7:00 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
   		),
      "Prem Yoga" => array(
        		"time_val" => "9:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Upanishad Sarita" => array(
        		"time_val" => "9:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
      "Weekly Satsang" => array(
        		"time_val" => "10:30 AM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Bhagavad Gita Recitation" => array(
        		"time_val" => "6:00 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Daily Scripture Reading - Ramayan" => array(
        		"time_val" => "7:00 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Daily Meditation" => array(
        		"time_val" =>"7:30 PM", 
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	),
	  "Nutrition and Lifestyle Coaching" => array( 
        		"time_val" => "8:00 PM",
        		"time_zone" => "CDT",
        		"zoom_link" => "https://us02web.zoom.us/j/83469428800",
        		"attendance_tracker" => ""
    	)
    ); 
    
    // Get the user's timezone offset from the AJAX request data
  $userTimezoneOffset = $_POST['timezoneOffset'];

    // Convert the times to the user's timezone
  $online_classes_usertimes = convertTimesToUserTimezone($online_classes, $userTimezoneOffset);
    
    // Return the list of times in the user's timezone as a JSON response
  $response = array('online_classes_usertimes' => $online_classes_usertimes);
  echo json_encode($response);
    
    //$live_classes = '<script>var live_classes = check_current_live_classes(' . json_encode($online_classes) . '); live_classes;</script>';
    //echo '<script>check_current_live_classes(' . $json_online_classes . ');</script>';
    //echo "live classes : " .$live_classes;
  
}
add_shortcode( "process_online_classes", "wpb_hook_process_classes" );

// Function to convert a list of online classes with times from one timezone to another
function convertTimesToUserTimezone($online_classes, $userTimezoneOffset) {
  // Calculate the user's timezone offset in hours
  $userTimezoneOffsetHours = $userTimezoneOffset / 60;

  // Create a DateTimeZone object for the user's timezone
  $userTimezone = new DateTimeZone('UTC');
  $userTimezone->modify(sprintf('%+d hours', $userTimezoneOffsetHours));

  // Create a DateTimeZone object for the original timezone (CDT in this example)
  $originalTimezone = new DateTimeZone('America/Chicago');

  // Convert each time to the user's timezone
  $online_classes_usertimes = array();
  foreach ($online_classes as $online_class) {
    $dateTime = new DateTime($online_class["time_val"], $originalTimezone);
    $dateTime->setTimezone($userTimezone);
    $online_classes_usertimes[] = $dateTime->format('Y-m-d H:i:s');
  }

  // Return the list of online classes in the user's timezone
  return $online_classes_usertimes;
}

if (isset($_POST['timezoneOffset'])) {
  wpb_hook_process_classes();
}

?>

And in custom-date-scripts.js, the code to get user timezone offset is as follows:

    // Call the function when the page loads
    $(document).ready(function() {
        getUserTimezoneOffset();
    });

    // Function to get the user's timezone offset and send it to the server via AJAX
    function getUserTimezoneOffset() {
      var userTimezoneOffset = new Date().getTimezoneOffset();
      $.ajax({
        url: '../../my-custom-hook.php',
        type: 'POST',
        data: {
          'timezoneOffset': userTimezoneOffset
        },
        success: function(response) {
          // Handle the server response here
        }
      });
    }

I really want to test my functionality, I am calling shortcode [process_online_classes] in WordPress Shortcode widget, and trying to see what it would echo to check if times are converted properly. But I am stuck at the first step itself with this error.

However, In view source of the page, I am able to see jquery.min.js loaded before custom-date-scripts.js. I am not understanding where is it going wrong. Any help in this regard is super highly appreciated.

• This reply was modified 1 year, 7 months ago by sanumolu5.
• This reply was modified 1 year, 7 months ago by sanumolu5.
• This reply was modified 1 year, 7 months ago by sanumolu5.
• This reply was modified 1 year, 7 months ago by sanumolu5.

@bcworkz , that was an awesome idea that you suggested. I will try to implement this, thank you so much.

Hi @sterndata ,

Thanks for your reply. Could you please tell me an idea on how can I filter these online classes data based on user’s time (only include those online classes for which user’s time falls within 1 hr range of online class start time), and show them in a section?

Currently I am trying to write a PHP shortcode handler that has online_classes data as a multi-dimensional associative array and I am passing this array to a function in Javascript file in order to filter out the online classes based on the aforementioned time condition. Then I am returning back the filtered array back to PHP shortcode handler where this function is called. Now I have no clue on how to proceed to show the filtered classes on the front-end page. Could you please help me out on this?