How to find current LIVE classes

It seems you’re using a plugin, “tutor-pro”. I’d ask the authors/developers of that plugin how best to do that.

Hello @sterndata ,

This page is not related to Tutor pro. The information fed in this page is directly static. But I want to make some processing with that static info in the backend. None of the Tutor pro features are used in this page. Please suggest another idea.

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

If you have the data, then the coding is up to you. It’s well beyond the scope here to address that. If you have specific questions, we can help you better.

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?

If your JS already has the filtered list, why not just output it on the current page? Your page could include an initially empty div container to receive JS content. Your JS would get the div container element out of the DOM and set its innerHTML property with appropriate content.

Instead of keeping data in a PHP array, it’s better off either within WP objects or within a custom table where the data is more easily maintained and queried. The one problem is WP doesn’t know what a user’s timezone offset is. JS would need to get it from the browser and relay it to your server as part of the request. With the appropriate timezone offset, PHP could query for appropriate data and generate related output.

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

@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, 11 months ago by sanumolu5.
• This reply was modified 1 year, 11 months ago by sanumolu5.
• This reply was modified 1 year, 11 months ago by sanumolu5.
• This reply was modified 1 year, 11 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.

The jQuery that ships with WP runs in “noConflict” mode. Nonsensically, not realizing this ends up looking like a conflict somewhere and can take you down a rabbit hole if you are not aware. noConflict means the common $ shortcut is not defined as expected. You have two options, either spell out the full jQuery in place of each $ use; or use a “noConflict wrapper”. A general example:

(function( $ ) {

	"use strict";
	
	// javascript code here. i.e.: $(document).ready( function(){} ); 

})(jQuery);