CODEWITHSUNDEEP
jqueryajax
CodeyMonkey
CodeyMonkey

Reputation: 739

jQuery/Ajax - IE not grabbing data from external file?

The following code is to generate tooltips on hover... hover over some text with the following code e.g.

span class="ttip" rel="#tip_1"

It then pulls the div with the id of tip_1 from an external file (tooltips.html). Trouble is in IE 7 & 8 - it just loads the tooltip box - not the content inside... (Like it can't communicate with the tooltips.html file)

Any ideas please?

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.ttip').hover(function(){
            var offset = jQuery(this).offset();
            console.log(offset)

            var width = jQuery(this).outerWidth();
            var tooltipId = jQuery(this).attr("rel");

            jQuery('#tooltip-cont').empty().load('/tooltips.html ' + tooltipId).fadeIn(500);
            jQuery('#tooltip-cont').css({ top:offset.top, left:offset.left + width + 10 }).show();
        }, function(){
            jQuery('#tooltip-cont').stop(true, true).fadeOut(200);
        });
    });
</script>

Upvotes: 0

Views: 139

Answers (1)

JAAulde
JAAulde

Reputation: 19560

Unless this is a transposition error while posting your question, you have an extra space in your URL (after .html):

.load('/tooltips.html ' + tooltipId)

should probably be:

.load('/tooltips.html' + tooltipId)

Unrelated: you have a lot of inefficient re-querying going on in that code. You should store references to already queried elements, and use the chaining nature of jQuery where possible.

Upvotes: 1

Related Questions