Passing JavaScript Variable into Ajax data:

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

Ruan Mendes · Accepted Answer · 2013-02-05 22:30:51Z

2

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 */
});

edited Feb 5, 2013 at 22:30

answered Feb 5, 2013 at 22:20

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user400654 Over a year ago

... the ajax request will be sent long before the variable is set.

Ruan Mendes Over a year ago

@KevinB Well, that's not what the question is about. If the user hasn't changed the sort order, OP needs to give it a default. I don't think the OP is making the AJAX call as soon as the page is loaded. Do I need a warning "above code is just an example?" The real question is about variable scope

Josh Kissel Over a year ago

@JuanMendes Super Globals are way to messy for me but the answer of setting data: $('#social_list').sortable('serialize') seems to work. (The only reason I say seems to is I think I have an error on my php page)

Supericy · Accepted Answer · 2013-02-05 22:18:37Z

-1

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

answered Feb 5, 2013 at 22:18

Supericy

5,8911 gold badge23 silver badges25 bronze badges

1 Comment

Josh Kissel Over a year ago

That seemed to break my sortable action... I tried data: $('#social_list').sortable('serialize'), everything seemed to work it just doesn't seem to update my table

Collectives™ on Stack Overflow

Passing JavaScript Variable into Ajax data:

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related