Merge pull request #410 from Codeinwp/fix/options-reordering

fix: use fetch for saving meta group fields

Author: selul

inc/admin.php

@@ -275,8 +275,6 @@ function ppom_admin_save_form_meta() {
 		wp_send_json( $resp );
 	}
 
-	$_REQUEST['ppom'] = is_array( $_REQUEST['ppom'] ) ? $_REQUEST['ppom'] : json_decode( wp_unslash( $_REQUEST['ppom'] ), true );
-
 	global $wpdb;
 
 	extract( $_REQUEST );
@@ -285,6 +283,12 @@ function ppom_admin_save_form_meta() {
 	$aviary_api_key       = 'NA';
 	$show_cart_thumb      = 'NA';
 
+	if ( is_string( $_REQUEST['ppom'] ) ) {
+		$ppom_encoded = $_REQUEST['ppom'];
+		parse_str( $ppom_encoded, $ppom_decoded);
+		$_REQUEST['ppom'] = $ppom_decoded['ppom'];
+	}
+
 	$ppom_meta    = ( isset($_REQUEST['ppom_meta']) ? $_REQUEST['ppom_meta'] : isset($_REQUEST['ppom']) ) ? $_REQUEST['ppom'] : '';
 
 	if ( empty( $ppom_meta ) ) {
@@ -358,6 +362,11 @@ function( $pm ) {
 
 
 	$ppom_id = $wpdb->insert_id;
+	if ( is_string( $ppom ) ) {
+		$ppom_encoded = $ppom;
+		parse_str( $ppom_encoded, $ppom_decoded);
+		$ppom = $ppom_decoded['ppom'];
+	}
 
 	$product_meta = apply_filters( 'ppom_meta_data_saving', (array) $ppom, $ppom_id );
 	$product_meta = ppom_sanitize_array_data( $product_meta );
@@ -450,10 +459,14 @@ function ppom_admin_update_form_meta() {
 
 		wp_send_json( $resp );
 	}
-	$_REQUEST['ppom'] = is_array( $_REQUEST['ppom'] ) ? $_REQUEST['ppom'] : json_decode( wp_unslash( $_REQUEST['ppom'] ), true );
-	
 	global $wpdb;
 
+	if ( is_string( $_REQUEST['ppom'] ) ) {
+		$ppom_encoded = $_REQUEST['ppom'];
+		parse_str( $ppom_encoded, $ppom_decoded);
+		$_REQUEST['ppom'] = $ppom_decoded['ppom'];
+	}
+
 	$ppom_meta    = isset( $_REQUEST['ppom_meta'] ) ? $_REQUEST['ppom_meta'] : $_REQUEST['ppom'];
 	$product_meta = apply_filters( 'ppom_meta_data_saving', (array) $ppom_meta, $productmeta_id );
 	$product_meta = ppom_sanitize_array_data( $product_meta );

js/admin/ppom-admin.js

@@ -128,38 +128,40 @@ jQuery(function($) {
         jQuery(".ppom-meta-save-notice").html('<img src="' + ppom_vars.loader + '">').show();
 
         $('.ppom-unsave-data').remove();
-        const data = $(this).serializeJSON();
-        
-        const fieldsOrder = Array(...document.querySelectorAll('.ui-sortable-handle[id^="ppom_sort_id_"]'))
-            .map( node => node.id.replace('ppom_sort_id_', '') ); // ['2', '3']
-        data.ppom = fieldsOrder.map( fieldId => data.ppom[fieldId] );
+
+        const formData = new FormData();
+        const ppomFields = new URLSearchParams();
 
-        data.ppom = JSON.stringify(data.ppom);
-
-        // Send the JSON data via POST request
-        $.ajax({
-            url: ajaxurl,
-            data: data,  // Send as regular object (no need to stringify)
-            type: 'POST',
-            success: function(resp) {
-
-                const bg_color = resp.status == 'success' ? '#4e694859' : '#ee8b94';
-                jQuery(".ppom-meta-save-notice").html(resp.message).css({ 'background-color': bg_color, 'padding': '8px', 'border-left': '5px solid #008c00' });
-                if (resp.status == 'success') {
-                    if (resp.redirect_to != '') {
-                        window.location = resp.redirect_to;
-                    }
-                    else {
-                        window.location.reload(true);
-                    }
-                }
-            },
-            error: function() {
-                // Handle error
-                jQuery(".ppom-meta-save-notice").html("An error occurred. Please try again.").css({ 'background-color': '#ee8b94', 'padding': '8px', 'border-left': '5px solid #c00' });
+        // NOTE: since the request is to big for small values of `max_input_vars`, we will send the PPOM fields as a single string.
+        (new FormData(this)).forEach(( value, key) => {
+            if ( key.startsWith('ppom[') && typeof value === 'string' ) {
+                ppomFields.append( key, value );
+            } else {
+                formData.append(key, value);
             }
         });
 
+        formData.append('ppom', ppomFields.toString());
+       
+        fetch(ajaxurl, {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(resp => {
+            const bg_color = resp.status == 'success' ? '#4e694859' : '#ee8b94';
+            jQuery(".ppom-meta-save-notice").html(resp.message).css({ 'background-color': bg_color, 'padding': '8px', 'border-left': '5px solid #008c00' });
+            if (resp.status == 'success') {
+                if (resp.redirect_to != '') {
+                    window.location = resp.redirect_to;
+                } else {
+                    window.location.reload();
+                }
+            }
+        })
+        .catch(() => {
+            jQuery(".ppom-meta-save-notice").html("An error occurred. Please try again.").css({ 'background-color': '#ee8b94', 'padding': '8px', 'border-left': '5px solid #c00' });
+        });
     });