CSS not applying to jquery ajax content

Question

I have a page that has a jquery AJAX function

$(document).ready(function() { 
        var options = { 
            target: '#return',
            beforeSend: function() {
                $('#processing').show();
            },
            complete: function() {
                $('#processing').hide();
                $("#SymbolSearchResults tr:even").addClass("SSOdd");
                $("#previous").click(function(){ changestart('back'); });
                $("#next").click(function(){ changestart("forward"); });
                $("#lookup").click(changestart);
            }
            }; 
        $('#SymbolSearchForm').ajaxForm(options); 
    }); 

    function changestart(direction) 
    {
        var rowsElement  = $("#maxrows");
        var rowsValue    = parseInt(rowsElement.val());
        var startElement = $("#startID");
        var value        = parseInt(startElement.val());
        startElement.val(direction == "forward" ? value + rowsValue : direction == "back" ?
value - rowsValue : 1);
    }

</script>

I was having trouble rebinding the click handlers to the #next, #lookup and #previous as well as the class SSOdd to the table #SymbolSearchResults tr:even. I fixed it by adding it into the complete function. However I cannot apply any styles to the target div #return. I can style elements in the #return by ID, but again, nothing to the #return div itself. Is there a solution to this? I can only style the div by using inline CSS in the html page, not desired. I also think maybe I should use the .live function for the click functions inside the complete function? can you add a class with .live?

Please help unf**ck my code!

thx

.live() is for event handlers only, so you can't bind a class with that. I also don't see any attempt to style the <div id='return'> in that code. — Robert
– Robert, Commented Sep 21, 2010 at 21:18
@Robert I have to do it with inline css, when I move the style to the external CSS file, it has an id but no style. I don't see anything going on with it in firebug — Dirty Bird Design
– Dirty Bird Design, Commented Sep 22, 2010 at 0:12
Ill put the css back in the external file, 2 min. Then Ill apply with jquery — Dirty Bird Design
– Dirty Bird Design, Commented Sep 22, 2010 at 0:33
@Robert kinetick.com/Test/supportTest.php#Symbol-Search enter ;alskdjf;alksjdflkj or some such in the Search Text/String box, it will return "No records were found" in black serif font, find that div in firebug, #return it will show no styles. View the CSS and look for #return, its there and has styles — Dirty Bird Design
– Dirty Bird Design, Commented Sep 22, 2010 at 0:47

Robert · Accepted Answer · 2010-09-22 01:12:29Z

1

It doesn't appear to be linking via the ID identifier as you said, but I can change the class of that div to .purchase, and it takes on those class attributes. Possibly change the declaration to div.return and the id='return' to class='return'.

Edit

Going to update this until I find the answer on why it's not working, or someone else posts. So far, I'm able to reference the div via document.getElementById('return').style.color = '#FFFFFF';

edited Sep 22, 2010 at 1:12

answered Sep 22, 2010 at 1:05

Robert

21.4k9 gold badges57 silver badges67 bronze badges

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

9 Comments

Dirty Bird Design Over a year ago

Ill switch the container for the AJAX content from #return to .return and see what happens. Any idea why ID's wont work?

Robert Over a year ago

Not a clue yet, but you've piqued my interest.

Dirty Bird Design Over a year ago

$("#return").css('color','#FFFFFF') in the "complete: function block of the AJAX call seems to do it. I guess I could write a style in the CSS and do a $("#return").hasClass('foo'). Seems like I've already got a lot in that function though and doing it in the external CSS would be cleaner?

Robert Over a year ago

Right, I was talking about changing <div id='return'> to <div class='return'> and referencing it as .return everywhere rather than #return

Dirty Bird Design Over a year ago

Understood, I appreciate your help. Ill switch from ID to Class and see where that gets me. No luck, switching it to class had no affect

|

Collectives™ on Stack Overflow

CSS not applying to jquery ajax content

1 Answer 1

Edit

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

9 Comments

Related