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: http://example.com/css/style.css — Seer, May 23 '13 at 10:19
If you take ajax out of the question for now and just add an `
As @Andreas said, this should work... unless you are cross-domain! — mg007, May 23 '13 at 10:33
@AlexThomas Yes, the CSS works perfect when not fetched via AJAX. — hbowley, May 23 '13 at 10:40
Would this have any effect on it?: `RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /index.php?page=$1 [NC,L]` — hbowley, May 23 '13 at 10:49
try using a relative path like `url:"loadthis.php"`, and add `.fail()` to see if the request could be sent. — Spokey, May 23 '13 at 10:55

Moshe Harush · Answer 1 · 2017-05-10T04:38:01.833

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 '17 at 04:38

answered May 23 '13 at 10:24

Moshe Harush

11
6

http://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done – Andreas May 23 '13 at 10:33
Still no luck unfortunately. – hbowley May 23 '13 at 10:35

Mahesh · Answer 2 · 2013-05-30T13:10:16.237

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 '13 at 13:10

answered May 30 '13 at 12:59

Mahesh

320
1
11

AJAX: loading HTML, CSS Links not working

2 Answers2