load dynamically jquery

Question

I'm using the following script to load jquery in the head in case if is not already loaded.

<script type="text/javascript">
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<script type="text/javascript">


$(document).ready(function() {
        $("#nav li:has(ul)").hover(function(){
            $(this).find("ul").slideDown();
        }, function(){
            $(this).find("ul").hide();
        });
    });
</script>

<style>
#nav {position: fixed; white-space:nowrap;}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;list-style: none;}
#nav li a { width:220px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:90%; border:1px solid #ccc;text-transform: uppercase;font-weight: bold; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0;width: 178px; }
* html li li { display:inline; } /* IE6 Bugfix... */
</style>

but it doesn't appear in the head.

Is there a reason you are not using the src attribute of a script tag? — Aaron Kurtzhals
– Aaron Kurtzhals, Commented Aug 13, 2012 at 21:58
What do you mean: "it doesn't appear in the head". You won't see it in View/Source in the browser. What exactly is your question? — jfriend00
– jfriend00, Commented Aug 13, 2012 at 22:00
What do you mean it doesn't appear in the head? It won't appear when you view the source of the page, but it should work if you inspect the document using the inspector. — Adam Jenkins
– Adam Jenkins, Commented Aug 13, 2012 at 22:00
just copy/pasted your code on jsFiddle.net and it works perfectly — MrOBrian
– MrOBrian, Commented Aug 13, 2012 at 22:01

Derek Hunziker · Accepted Answer · 2012-08-13 22:06:56Z

3

Based on your comment '$ is not defined' this would indicate that your jQuery fallback is loading too late in the process. As SLaks pointed out, your fallback runs asynchronously.

Try inserting the script block in the head with a document.write(). This will force the browser to evaluate the script before any execution can continue.

<script type="text/javascript">
    if (typeof (jQuery) === 'undefined') {
        document.write(unescape("%3Cscript src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

answered Aug 13, 2012 at 22:06

Derek Hunziker

13.2k4 gold badges61 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

load dynamically jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related