CODEWITHSUNDEEP
cssajaxjquery-mobile
dangerChihuahua007
dangerChihuahua007

Reputation: 20915

How do I confer CSS properties upon elements retrieved from $.ajax()?

I loaded some HTML from another page via $.ajax:

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: '/getInfo',
            context: $('#contentBox'),
            success: function(data) {
                $(this).html(data);
            }
        });
    });

 </script>

 <style type="text/css">
     #makeMeRed {color: red !important;}
 </style>

 <div id="contentBox"></div>

The code loads this HTML into the div with ID contentBox:

<p id="makeMeRed">I'm supposed to be red.</p>

However, the paragraph is not red. How can I give elements loaded via Ajax CSS properties?

To be specific, jQuery Mobile CSS is not rendering in the HTML I pulled from Ajax: http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css

Upvotes: 2

Views: 176

Answers (1)

Alex Coplan
Alex Coplan

Reputation: 13371

Your markup is was invalid

<style="text/css">

should be 

<style type="text/css">

Otherwise CSS rules should be applied fine to HTML loaded via AJAX.

Update - Tips for debugging unmatched CSS:

  • Use the element inspector to find which rules are beign matched.
  • Check the markup is what you expected after you pulled it by AJAX.
  • Ensure there are no inline styling or other <style> tags in the new markup that could conflict.

Upvotes: 4

Related Questions