JQuery code does not run

Question

I am very new to jquery, please help me in running the app on this link. I have added below resource files in my app, but still it is not rendering the color blocks.

These is what I have included in my head tag:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"/>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js" type="text/javascript"/>
<script src="jquery.mobile.carousel.js" type="text/javascript" language="javascript"/>
<script src="jquery.ui.ipad.js" type="text/javascript" language="javascript"/>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function($) {
        $("#carousel1").carousel();
    })(jQuery);
</script>

you dont' need http://code.jquery.com/jquery-1.6.4.min.js And use the firebug console. You might have an error. — machineaddict, Feb 03 '12 at 09:24
its working fine as you send the link. so what's the problem. — Code Lღver, Feb 03 '12 at 09:32

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

You are also using self-closing script tags which aren't always allowed. i.e. switch

<script src="..." type="text/javascript"/>

for:

<script src="..." type="text/javascript"></script>

see: Why don't self-closing script tags work?

edited May 23 '17 at 12:27

Community

1
1

answered Feb 03 '12 at 09:32

Mark Rhodes

9,713
4
46
51

feco · Answer 2 · 2012-02-03T09:48:18.550

0

Seems you are missing the jquery UI framework, Add jquery UI to your head tag

http://code.google.com/apis/libraries/devguide.html#jqueryUI

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"/>

edited Feb 03 '12 at 09:48

answered Feb 03 '12 at 09:35

feco

4,273
5
28
44

score 0 · Answer 3 · answered Feb 03 '12 at 09:37

0

  $(function(){
        $("#carousel1").carousel();
});

answered Feb 03 '12 at 09:37

Yorgo

2,638
1
15
24

Phill Pafford · Accepted Answer · 2012-02-03T14:18:32.053

You have:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"/>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js" type="text/javascript"/>
<script src="jquery.mobile.carousel.js" type="text/javascript" language="javascript"/>
<script src="jquery.ui.ipad.js" type="text/javascript" language="javascript"/>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function($) {
        $("#carousel1").carousel();
    })(jQuery);
</script>

My suggestions would be:

Upgrade jQM to the latest version as you are using a RC
Close your tags properly as suggested by @MarkRhodes
update the links to your frameworks as suggested by @feco
Use pageInit(), not $(document).ready()

Might look something like:

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<!-- I'm asuming this is where you are getting these from -->
<!-- https://github.com/blackdynamo/jQuery-Mobile-Carousel -->
<script src="jquery-ui-1.8.7.custom.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.mobile.carousel.js" type="text/javascript" language="javascript"></script>
<script src="jquery.ui.ipad.js" type="text/javascript" language="javascript"></script>


<script type="text/javascript" language="javascript"  >
    $('#pageId').live('pageinit',function(event){
        $("#carousel1").carousel();
    });
</script>

JQuery code does not run

4 Answers4