Question

This should be really simple but for some reason I’m stumped on this…

I’m trying to set the position of an element on page load from ajax data

like so:

$.ajax({
    url: "session_data.php",
    type: 'POST',
    async: false,
    success: function (data) {
        $('#dragable_box').css( data );
        console.log("Stored Session Data: " + data);
    }
});

the data variable returns a correct result as I can see it in the console and I tried copying in the result as a test and it positioned the element as expected. It just wont work with data…

I tried with and without async: false

What am I doing wrong or not doing?

Answer 1

A couple things about css():
.css() with one string parameter like .css('font-size') will return the font size of the matched element.
.css('font-size', '1.1em') will set the font size of the matched element to 1.1em.
.css({'font-size':'1.1em'}) will also set the font size of the matched element to 1.1em.

Also, if you are meaning data to be an object literal like {‘text-color’:red} you probably need to add the dataType:’json’ parameter to your .ajax() call. It is most likely a string that looks like an object literal when you print it to the console. Declaring your return type to be json will cause jQuery to evaluate the result and give you an object literal that you can pass to .css().