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.