0

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.

0

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();
    // });
});
  • i actually had quite a few things incorrect, including some false assumptions, i will post updated code shortly – Onelostpuppy Oct 12 at 11:33
  • You still have misconception in your answer. wp_localize_script is the standard practice to access php variables into javascript file. You didn't have added your php code that you're processing. I was confident that you know that but wp_ajax_item_sort this action allow user to make ajax call who are logged into the website. if non logged user also can get that work you have to use wp_ajax_nopriv_item_sort action with other details same. – Vantiya Oct 13 at 5:16
  • As I wrote in my answer that every ajax call are process through admin-ajax.php file that could be found into wp-admin, it's not for admin tab only. If you want to make ajax call in WP through that file you only has to add do_action('wp_ajax_nopriv_item_sort', 'my_save_item_order') along with add_action('wp_ajax_item_sort', 'my_save_item_order'); – Vantiya Oct 13 at 5:19
0

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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.