AJAX: loading HTML, CSS Links not working

Question

Performing a basic AJAX request, but when the HTML is displayed no HTML links work and now CSS:hover elements work either.

Confused as to what I've done wrong. Here's an example of the code below.

CSS:

li:hover{ background:red; }
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

HTML (index.php):

<script>
$(document).ready(function(){
    ajax();
});
</script>
<ul class="loadhere"></uL>

loadthis.php:

<li><a href="">Example</a></li>

JS (AJAX):

function ajax(){
$.ajax({
    type:"POST",
    url:"http://example.com/loadthis.php",
    dataType: "html" 
})
.done(function(result){
    $('ul.loadhere').html(result);      
});
}

possibly the paths are relative to the example.com/loadthis.php - so it can't find the css file. You can change the paths to absolute, so for the CSS for example: example.com/css/style.css — Seer
– Seer, Commented May 23, 2013 at 10:19
If you take ajax out of the question for now and just add an <li> to the list does the CSS work for that? — Alex
– Alex, Commented May 23, 2013 at 10:22
As @Andreas said, this should work... unless you are cross-domain! — mg007
– mg007, Commented May 23, 2013 at 10:33

Moshe Harush · Accepted Answer · 2017-05-10 04:38:01Z

1

You need to use the "success" option of ajax function, take off the done function and insert the function in success option in ajax object, like this:

function ajax(){
    $.ajax({
        type:"POST",
        url:"http://example.com/loadthis.php",
        dataType: "html" ,
        success: function(result){
            $('ul.loadhere').html(result);      
        }
    });
}

edited May 10, 2017 at 4:38

answered May 23, 2013 at 10:24

Moshe Harush

116 bronze badges

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

2 Comments

Andreas Over a year ago

stackoverflow.com/questions/8840257/…

hbowley Over a year ago

Still no luck unfortunately.

Mahesh · Accepted Answer · 2013-05-30 13:10:16Z

0

Try this

 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
        $(function(){
            ajax();
            function ajax(){
                $.get('loadthis.php', {}, function(){

                }).done(function(result){
                    $('ul.loadhere').html(result);
                });
            }
        });
    </script>

edited May 30, 2013 at 13:10

answered May 30, 2013 at 12:59

Mahesh

3201 silver badge11 bronze badges

Collectives™ on Stack Overflow

AJAX: loading HTML, CSS Links not working

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related