How to access this jQuery/AJAX data in a PHP file/WordPress plugin

Question

I have a jQuery UI sortable list, connected to another list, so far my JavaScript can display the HTML ID's from both of the lists to the screen, but I am having trouble figuring out how to direct this data to a PHP file so I can work with it. Is wp_localize_script necessary for me? I have it pointing ajaxurl plugins_url( 'my-ajax.php' ). Does this need to go to admin_url( 'admin-ajax.php' )? I'm trying to use this on an admin page I created, not the front end. This is extremely confusing.

This is how I'm trying to enqueue jQuery in WordPress:

add_action( 'admin_enqueue_scripts',array($this, 'admin_scripts' ));
function admin_scripts() {
  wp_register_script( 'admin-js', plugin_dir_url(__FILE__) . '/admin.js', array('jquery'), '', true);
  wp_localize_script( 'admin-js', 'dtAjax', array( 'ajaxurl' => plugins_url( 'my-ajax.php' , __FILE__)));
  wp_enqueue_script( 'admin-js' );
  wp_enqueue_script( 'jquery-ui-core' );
  wp_enqueue_script( 'jquery-ui-sortable' );            
  wp_register_style( 'digitable_jquery', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css', false, '1.0.0' );
  wp_enqueue_style( 'digitable_jquery' );
}

Here is the HTML

<ul id="sortable3" class="filter-fields-list">
    <li id="1" class="ui-state-default">Item 1</li>
    <li id="2" class="ui-state-default">Item 2</li>
    <li id="3" class="ui-state-default">Item 3</li>
    <li id="4" class="ui-state-default">Item 4</li>
    <li id="5" class="ui-state-default">Item 5</li>
    <li id="6" class="ui-state-default">Item 6</li>
    <li id="7" class="ui-state-default">Item 7</li>
    <li id="8" class="ui-state-default">Item 8</li>
</ul>
<ul id="sortable4" class="filter-fields-list">
    <li id="9" class="ui-state-default">Item 9</li>
    <li id="10" class="ui-state-default">Item 10</li>
</ul>

And the JavaScript:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $('#sortable3, #sortable4').sortable({
            connectWith: ".filter-fields-list",
            stop: function (event, ui) {
                var data1 = $('#sortable3').sortable('toArray');
                var data2 = $('#sortable4').sortable('toArray');
                var sep = "/";
                var findata = (data1 + sep + data2);
                alert(findata);
                $.ajax({
                    data: findata,
                    type: 'POST',
                    url: dtAjax.ajaxurl,
                    failure: function(data) {
                        alert(("You suck" + dtAjax.ajaxurl));
                    },                  
                    success: function(data) {
                        alert(("You don't" + dtAjax.ajaxurl));
                    }
                });
            }
        }).disableSelection();
    });
});

What do I put into my-ajax.php to get the same data that the alert in the jQuery is giving me, and print it to the screen to verify? Please help me I don't program. All I need is to get that data into PHP and I can figure out what to do with it after that.

Answer 1

WordPress provides a way to access PHP variable into .js file using the wp_localize_script so if your follow that it's standard practice (standard practices are always advisable).

Your next question is my-ajax.php and plugin URL. All ajax in WordPress process through admin-ajax.php (Standard one) that file could be found in wp-admin so wp_localize_script should be like:

wp_localize_script( 'admin-js', 'dtAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));

Now to send data to PHP file with AJAX. Seems your code is ok for JS. I can advise you to use update: instead of stop: however the business logic is up to the requirements.

Also you should remove $(document).ready(function() { and it's closing bracket (second last line). it's not required now.

Here is your code that I've updated for your direct reference what I'm saying.

add_action( 'admin_enqueue_scripts',array($this, 'admin_scripts' ));
function admin_scripts() {
    wp_register_script( 'admin-js', plugin_dir_url(__FILE__) . '/admin.js', array('jquery'), '', true);
    wp_localize_script( 'admin-js', 'dtAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
    wp_enqueue_script( 'admin-js' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-sortable' );            
    wp_register_style( 'digitable_jquery', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css', false, '1.0.0' );
    wp_enqueue_style( 'digitable_jquery' );
}

JS file code should look like

jQuery(document).ready(function($){
    // $(document).ready(function() {
    $('#sortable3, #sortable4').sortable({
        connectWith: ".filter-fields-list",
        stop: function (event, ui) { // update: instead of stop
            var data1 = $('#sortable3').sortable('toArray'); // you can use serialize also instead of toArray
            var data2 = $('#sortable4').sortable('toArray'); // you can use serialize also instead of toArray
            var sep = "/";
            var findata = (data1 + sep + data2);
            // alert(findata);
            $.ajax({
                data: findata, 
                type: 'POST', 
                url: dtAjax.ajaxurl, 
                success: function(data) {
                    alert(("You don't" + dtAjax.ajaxurl)); 
                }, 
                error: function() {
                    alert(("You suck" + dtAjax.ajaxurl)); 
                },
            });
        }
    }).disableSelection();
    // });
});

Answer 2

I had quite a bit more wrong than i thought, but i was able to figure out what i needed. I completely removed wp_localize_script() it wasnt necessary(this is for an admin tab). I added include 'my-ajax.php'; to the main plugin.php fixed the Jquery and ended up with this

include 'my-ajax.php';
function admin_scripts() 
{
    if (is_admin()) {
        wp_register_script('admin-js', plugin_dir_url(__FILE__) . '/admin.js', array('jquery'), '', true);
        wp_enqueue_script('admin-js');
        wp_enqueue_script('jquery-ui-core');
        wp_enqueue_script( 'jquery-ui-sortable' );          
        wp_register_style( 'test_jquery', '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css', false, '1.0.0' );
        wp_enqueue_style( 'test_jquery' );
    }
}
add_action('admin_enqueue_scripts',array($this, 'admin_scripts'));

admin.js

jQuery(document).ready(function($){
    $('#sortable4, #sortable3').sortable({
        connectWith: ".filter-fields-list",
        update: function (event, ui) {
            var list = this.id;
            var order = $(this).sortable('toArray').toString();
            args = {
                url: ajaxurl,
                type: 'POST',
                async: true,
                cache: false,
                dataType: 'json',
                data:{
                    action: 'item_sort', 
                    order:  order, 
                    list: list
                },
                success: function(response) {
                    //alert(list+order);
                    return; 
                },
                error: function(xhr,textStatus,e) {  
                    alert(e);
                    return; 
                }
            };
            $.ajax(args);
        }
    }).disableSelection();
});

inside my-ajax.php

<?php
function my_save_item_order() { 
    $order = explode(',', $_POST['order']);
    $list = $_POST['list'];
    if($list == "sortable3"){
        update_option('filter_fields_order', $order);
    }
    if($list == "sortable4"){
        update_option('filter_fields_order2', $order);
    }
    wp_die();
}
add_action('wp_ajax_item_sort', 'my_save_item_order');