Passing JavaScript Variable into Ajax data: - php

Question

I am working on a jQuery sortable. I pull information from my database to populate each orderable element and then repost the new order back to my data base. However I cannot figure out how to take the variable that I define in my serialize jQuery and enter it into my AJAX function in the data: area.
Here is my code:
$(document).ready(function()
{
$('#social_list').sortable(
{
update: function()
{
var order = $('#social_list').sortable('serialize');
alert(order);
}
});
});
$.ajax(
{
url: 'save_items_order.php',
data: ?,
type: '$_POST',
success: function(msg)
{
alert(msg);
}
});
So I want to take the string that var order creates and pass it into the ajax so data: = var order string
I tried data: $('#social_list').sortable('serialize'), everything seemed to work it just doesn't seem to update my table

Answer 1

Simplest solution is to make a global
$(document).ready(function() {
$('#social_list').sortable({
update: function() {
// global. you could just omit var, but I find this clearer
window.order = $('#social_list').sortable('serialize');
}
});
});
$.ajax({
url: 'save_items_order.php',
data: window.order, /* ...rest of code */
});
But I'm sure you know globals are bad, you can at least contain them to your namespace,
var myNs = {};
$(document).ready(function() {
$('#social_list').sortable({
update: function() {
myNs.order = $('#social_list').sortable('serialize');
}
});
});
$.ajax({
url: 'save_items_order.php',
data: myNs.order /* ... rest of code */
});
or re-organize your code so they can share variables.
$(document).ready(function() {
var order;
$('#social_list').sortable({
update: function() {
order = $('#social_list').sortable('serialize');
}
});
$('#myButton').click(function(){
$.ajax({
url: 'save_items_order.php',
data: order, /* ... rest of code */
});
});
});
Note that for this case, you could just do the following
$.ajax({
url: 'save_items_order.php',
data: $('#social_list').sortable('serialize') /* ... rest of code */
});

Answer 2

You just pass any javascript object in as the data.
For your specific case, I would probably wrap the AJAX call in a function, like:
function saveItemOrder(order)
{
$.ajax({
url: 'save_items_order.php',
data: { "order": order },
type: 'POST', // <-- this should be just "POST"
success: function(msg){
alert(msg);
}
});
}
And then:
update: function() {
var order = $('#social_list').sortable('serialize');
// alert(order);
saveItemOrder(order);
}