changed add_var_to_front back to using add_inline instead as localize, because need to not overwrite the variables

plugins/wp_model_plugin/html/index.html

@@ -1,6 +1,7 @@
 <div id="model_plugin_shortcode">
 	<p>i am a new p</p>
 	<p class="first_el_to_change">to change</p>
+	<button id='test_ajax_1' name="ajax_button_1" value="2024">2024</button>
 	<?php
 		foreach($names as $name) {
 			include($html_dir."templates/presentation.html");

plugins/wp_model_plugin/js/ajax.js

@@ -1,13 +1,17 @@
 /*
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 */
-function ajax_post(mydata, action, callback_response, callback_error) {
+function ajax_post(ajax_data, action, callback_response, callback_error) {
+console.log("in ajac_post, ajax_data :");
+console.log(ajax_data);
 	const data = new FormData();
 	data.append('action', action);
-	data.append('_ajax_nonce', php_data.nonce);
-	data.append('data', mydata);
+	data.append('_ajax_nonce', nonce);
+	data.append('data', ajax_data);
+console.log("data: ");
+console.log(data);
 
-	fetch(php_data.ajax_url, {
+	fetch(ajax_url, {
 		method: 'POST',
 		credentials: 'same-origin',
 		body: data

plugins/wp_model_plugin/js/init.js

@@ -1,4 +1,10 @@
 
 const title = document.querySelector(".first_el_to_change");
-title.innerHTML = "--- coucou ;) " + php_data.myvar_1;
-console.log(php_data);
+title.innerHTML = "--- coucou ;) " + myvar_1;
+
+const ajax_button_1 = document.querySelector("#test_ajax_1");
+console.log("ajax_button_1: ");
+console.log(ajax_button_1);
+ajax_button_1.addEventListener('click', () => {
+	ajax_post(ajax_button_1, 'get_data');
+});

plugins/wp_model_plugin/js/menu/menu.js

@@ -3,6 +3,5 @@ const sendButton = document.getElementById('mybutton');
 
 sendButton.addEventListener('click', () => {
 	const inputValue = inputElement.value;
-
 	ajax_post(inputValue, 'get_data');
 });

plugins/wp_model_plugin/js/myscript3.js

@@ -1,4 +1,4 @@
 
 const title3 = document.querySelector(".third_el_to_change");
-title3.innerHTML = "--- bye bye, " + php_data.myvar_2;
-console.log(php_data.myvar_2);
+title3.innerHTML = "--- bye bye, " + myvar_2;
+console.log(myvar_2);

plugins/wp_model_plugin/php/utils/add_to_front.php

@@ -7,6 +7,7 @@
 function add_files_to_front($files_arr) {
 	//wp_enqueue_script(<give_it_a_name>, /url/to/file, [depends on], version, defer? );
 	//wp_enqueue_style( <give_it_a_name>, /url/to/file, [depends on], version, media );
+	global $first_script;
 
 	// always adding ajax file first
 	$files_arr = ["ajax.js", ...$files_arr];
@@ -28,6 +29,8 @@ function add_files_to_front($files_arr) {
 		$file_version = date("ymd-Gis", filemtime($file_path));
 
 		if ($file_ext === "js") {
+			if (is_null($first_script))
+				$first_script = $file_basename;
 			wp_enqueue_script( $file_basename, $file_url, $previous_js_basename, $file_version, true);
 			$previous_js_basename = $file_basename;
 		}
@@ -52,24 +55,41 @@ function add_files_to_front($files_arr) {
 
 /*
  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-pass variables to front as global variables, accessible in js as an object
-it also adds the ajax url
+pass variables to js front as global variables
 @param two params :
 1. an array of key => value
    with the key being name of the variable, like this :
     'my_var' => 'value',
    simpler way to do it is to use compact when calling the function :
     add_var_to_front(compact("var1", "var2", "var3"));
-2. name of first embended script (if we want to have the variables
-   availables to all js : it will be available to the script and all following)
-	 - default value is "ajax", assuming the first script is "ajax.js"
-	   since it's automatically added first by `add_files_to_front`
+2. (optionnal) name of first embended script that need these variables
+   (it will be available to this script and all followings)
 */
-function add_var_to_front($vars, $handle = "ajax") {
+function add_var_to_front($vars, $handle = null) {
+	if (is_null($handle)) {
+		global $first_script;
+		$handle = $first_script;
+	}
 	$handle = pathinfo($handle, PATHINFO_FILENAME);
-	$object_name = "php_data";
-
-	wp_localize_script($handle, $object_name, $vars);
+	
+	extract($vars);
+	foreach ($vars as $key => $var)
+	{
+		$js_var  = 'const ' . $key . ' = ';
+		$js_var .= json_encode($var);
+		$js_var .= ';';
+		wp_add_inline_script($handle, $js_var, 'before');
+	}
+//
+//	the other way with localize has multiple incidences :
+//  - it creates an object from wich you can access the variables
+//  - so if you call it again wiht the same name, it will overwrite the previous
+//	{
+//		$handle = pathinfo($handle, PATHINFO_FILENAME);
+//		$object_name = "php_data";
+//
+//		wp_localize_script($handle, $object_name, $vars);
+//	}
 }
 
 ?>

plugins/wp_model_plugin/php/utils/create_html.php

@@ -24,8 +24,6 @@ https://stackoverflow.com/a/4402045/9497573
 function create_html($files, $vars = null) {
 	$files = (array)$files;
 	$html_dir = PLUGIN_DIR.'html/';
-	console_log("vars: ");
-	console_log($vars);
 	if (!is_null($vars))
 		extract($vars);
 

plugins/wp_model_plugin/php/utils/globals.php

@@ -11,4 +11,9 @@ const CONSOLE_OFF = true;
 */
 const CONSOLE_OFF = false;
 
+/* switch console_log
+const CONSOLE_OFF = true;
+*/
+$first_script = null;
+
 ?>

plugins/wp_model_plugin/plugin_hooks.php

@@ -70,6 +70,10 @@ function main_shortcode() {
 		)
 	);
 
+	global $wp_scripts;
+	console_log("wp_scripts: ");
+	console_log($wp_scripts);
+
 	return $html_front;
 }
 add_shortcode('wp_model_plugin', 'main_shortcode');