jQuery - problem using .css() with ajax data

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?

If you are expecting a json result try to add the dataType: 'json' to ajax options. — Arun P Johny
– Arun P Johny, Commented Mar 3, 2011 at 2:50
@Šime it is an echo response from PHP so I presume just a text string? — Chris J
– Chris J, Commented Mar 3, 2011 at 2:52
if you pass in a string into the css method, then jQuery tries to read the value of the CSS property which name is the string that you passed in. That's why it doesn't work for you. — Šime Vidas
– Šime Vidas, Commented Mar 3, 2011 at 2:55
Yep just figured that out, I have now made sure It is properly formatted json, declared it with dataType: 'json' and it works. Thanks — Chris J
– Chris J, Commented Mar 3, 2011 at 2:58

offex · Accepted Answer · 2011-03-03 03:05:23Z

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().

edited Mar 3, 2011 at 3:05

answered Mar 3, 2011 at 2:43

offex

1,8855 gold badges17 silver badges27 bronze badges

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

6 Comments

Šime Vidas Over a year ago

@offex What do you mean by dictionary? An object?

offex Over a year ago

Yes, JavaScript "dictionaries" are objects. Updated to reflect that.

Šime Vidas Over a year ago

@offex I guess you mean object literal. JSON string: '{ "foo": 1 }', object literal: { 'foo': 1 }

Chris J Over a year ago

Yes this is what I was trying to do. Thanks for your help. Also worth noting I had to use double quotes, not single quotes for properly formatted json ;-)

offex Over a year ago

Nice job figuring it out. Although, I would think single quotes or double quotes would work since both are valid in JavaScript.

|

Collectives™ on Stack Overflow

jQuery - problem using .css() with ajax data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related