jQuery: Changing the CSS on an element loaded with ajax?

Question

I need to change the position of an element i'm loading with ajax. I want to use .css() to change it but jQuery can't find the element cause it's not being recognized. How do i do to make jQuery "recognize" the element?

I've read about live() and delegate() but i can't get neither one of them to work as i want them to. I'd really appreciate some help!

post your code please, live and delegate works with an event — xkeshav, Jul 28 '11 at 21:40

score 20 · Accepted Answer · answered Jul 28 '11 at 21:39

20

Make the css change in the complete or success function of the ajax call. Assuming you're using load:

$('#el').load(
    url,
    data,
    function(){
        $('#selector').css('position', 'absolute');
    }
);

Alternatively (and easier to give as an example) register an ajaxComplete event

$(document).ajaxComplete(function(){
    if($('#elementID').length != 0) {
        $('#elementID').css('position', 'absolute');
    }
});

This is fired each time an ajax request completes, checks to see if #elementID exists and if so applies the css.

answered Jul 28 '11 at 21:39

Adam Hopkinson

28,281
7
65
99

I'm clearly too tired to be coding right now. I must have misspelled something because i tried doing that and it didn't work for me. Oh well, thank you! – qwerty Jul 28 '11 at 21:46
OK. Add some code or stick it on jsfiddle so I can have a look at some point. Welcome to Stack! – Adam Hopkinson Jul 28 '11 at 21:49
No probs @RIK, glad I could help! – Adam Hopkinson Apr 22 '13 at 14:26
What if you have no control over the ajax part? – Avatar Dec 05 '14 at 11:34
1

Ah, found it: `$(document).ajaxSuccess(function() { ... });` which listens to all ajax transfers. Similar as stated above with `$(document).ajaxComplete(function(){});` – Avatar Dec 05 '14 at 11:45

score 2 · Answer 2 · answered Jul 28 '11 at 21:41

2

If you have to markup in a js variable then you can do it as below.

$(markup).find("requiredElement").css({ set the properties here });

answered Jul 28 '11 at 21:41

ShankarSangoli

69,612
13
93
124

It's only fair to explain my downvote - the OP says he is trying to apply css to an element loaded using ajax. He obviously knows how to traverse the dom and set css, just not as part of an ajax request. – Adam Hopkinson Jul 28 '11 at 21:49
I upvoted him because I liked the solution of receiving the HTML from ajax and manipulating it before it gets loaded into the DOM. I can't tell if it saves on cycles though. – rkw Jul 28 '11 at 21:54
Ahh. I was assuming the user was using `.load`, which seems the easiest way of putting an element into a page using ajax. I don't know if you can intercept the element in a `load` call. – Adam Hopkinson Jul 28 '11 at 21:57
@adam - The OP has clearly mentioned in the quesion "Jquery is not able to recognize the element" that clearly says that he is not aware of how jquery looks for element in the dom. I think your down vote is completely unfair. – ShankarSangoli Jul 28 '11 at 23:41
OK - edit the answer and i'll remove it (votes can't be changed more than 10 hours after the last edit) – Adam Hopkinson Jul 29 '11 at 08:19

score 0 · Answer 3 · answered Jul 28 '11 at 21:39

0

If you want to edit it's CSS, you need to place it in the DOM first, then manipulate it.

Example:

$.ajax({
    ...
    success:function(data){
        $('<div/>').appendTo('body').html(data).css('border','3px solid red');
    }
});

answered Jul 28 '11 at 21:39

AlienWebguy

76,997
17
122
145

jQuery: Changing the CSS on an element loaded with ajax?

3 Answers3

Linked