Différences

Ci-dessous, les différences entre deux révisions de la page.

--- webdev:javascript:ajax [12/04/2017 16:30] – [PHP] dolo
+++ webdev:javascript:ajax [12/04/2017 16:32] (Version actuelle) – dolo
@@ Ligne 1: / Ligne 1: @@
+====== AJAX ======
+==== JS (jQuery) ====
+<Code>
+			$.ajax(
+			{
+				'type' : 'POST',
+				'dataType' : 'json',
+				'data' : $.parseJSON( '{"method" : "getTailoredFiles"}' ),
+				'success' : function(data)
+				{
+					// console.log('//////////////////////////////////////////////   SUCCESS   //////////////////////////////////');
+					// console.log(data);
+					filer = $('#filer_input').prop('jFiler');
+					for(var i = 0, max = data.length ; i < max ; i++)
+					{
+						filer.append(data[i]);
+					}
+				},
+				'error' : function(request,error)
+				{
+					// console.log('////////////////////////////////////////////////   ERROR   //////////////////////////////////');
+					// console.log(error);
+					// console.log(request);
+				},
+			});
+</Code>
+[[http://api.jquery.com/jQuery.ajax/|Doc jQuery]]
+==== PHP ====
+=== Spécifique à Prestashop 1.6 : ===
+<Code>
+	function getTailoredFiles()
+	{
+		// header('Content-Type: application/json');
+		if( !Tools::isSubmit('id_order') )
+		{
+			die(false);
+		}
+		$order = new Order(Tools::getValue('id_order'));
+		$order_folder = 'order-documents/order-' . $order->id . '-' . $order->reference . '/';// Trouver le dossier pour cette commande
+		if( is_dir(_PS_UPLOAD_DIR_ . $order_folder) )
+		{
+			$order_folder_files = scandir( _PS_UPLOAD_DIR_ . $order_folder );
+			$order_folder_files = array_diff( $order_folder_files, array('..', '.') );// On dégage les entrées ./ et ../
+			foreach($order_folder_files as $order_file)
+			{
+				$return[] = array(
+					'name'		=> $order_file,
+					'file'		=> _PS_BASE_URL_ . __PS_BASE_URI__ . 'upload/' . $order_folder . $order_file,
+					'type'		=> mime_content_type( _PS_UPLOAD_DIR_ . $order_folder . $order_file ),
+					'size'		=> filesize( _PS_UPLOAD_DIR_ . $order_folder . $order_file ),
+				);
+			}
+			if( !empty($return))
+			{
+				$return_json = json_encode( $return );
+				echo $return_json;
+				die();
+			}
+		}
+		die(false);
+	}
+</Code>
+=== Wordpress ===
+  * https://codex.wordpress.org/AJAX
+  * https://codex.wordpress.org/AJAX_in_Plugins
+  * https://codex.wordpress.org/wp_localize_script
+  * https://codex.wordpress.org/Function_Reference/wp_die
+  * http://solislab.com/blog/5-tips-for-using-ajax-in-wordpress/
+== 1. Ajouter le script ==
+<Code>
+wp_enqueue_script('home-filter', plugins_url(  '../js/home-filter.js', __FILE__ ), array('jquery'), false, true); // Ajoute le JS
+wp_localize_script('home-filter', 'home_filter', array( 'ajaxurl' => admin_url('admin-ajax.php') ) ); // Ajoute une variable globale en JS qui contient l'url à appeler en AJAX
+</Code>
+== 2. Appel AJAX en JS ==
+<Code>
+			$.ajax(
+			{
+				'type' : 'POST',
+				'dataType' : 'json',
+				'data' : $.parseJSON( '{"action" : "home_filter", "term_id" : "' + $(this).attr('value') + '"}' ),
+				'url' : home_filter.ajaxurl,
+				'success' : function(data)
+				{
+					// console.log('//////////////////////////////////////////////   SUCCESS   //////////////////////////////////');
+					// console.log(data);
+					$('.terrain-vignette').fadeOut(300, function()
+					{
+						$('#terrain-vignette-container').html(data);
+						$('.terrain-vignette').fadeOut(0).fadeIn(300);
+					});
+				},
+				// 'error' : function(request,error)
+				// {
+				// 	console.log('////////////////////////////////////////////////   ERROR   //////////////////////////////////');
+				// 	console.log(error);
+				// 	console.log(request);
+				// },
+			});
+</Code>
+== 3. Ajouter une fonction sur le custom hook ==
+<Code>
+add_action('wp_ajax_home_filter', [$this, 'ajaxHomeFilter']);
+add_action('wp_ajax_nopriv_home_filter', [$this, 'ajaxHomeFilter']);
+	public function ajaxHomeFilter()
+	{
+		header( "Content-Type: application/json" );
+		// On récupère les variables avec $_POST
+		$return = '';
+		// traitement...
+		echo json_encode($return);
+		wp_die();
+	}
+</Code>

Notes

Outils pour utilisateurs

Outils du site

Différences

Outils de la page