in need of feedback, Trying to initializing basic jqm 1.2.0! loader & triggers wont work!

in need of feedback, Trying to initializing basic jqm 1.2.0! loader & triggers wont work!

Hi, ive been trying to setup a basic jqm 1.2.0 page for my mvc application. and after 4-5 hours im in urgent need of some feedback!

The page loader dosent disappear, and i cant get the data-role="collapsible" to trigger on my Iphone 4.
on the computer it works just fine.

if someone can have a look at the code it would be very much appreciated! what im doing wrong?

Code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
    <head>
        <title>TEST</title>
           
           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
       
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
            <script type="text/javascript">
                // The mobileinit event
                // When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit.
                $( document ).bind("mobileinit", function(){
                    $.extend(  $.mobile , {
                        ajaxEnabled: false
                    });
                });
               
                // Document ready
                $( document ).bind( "pageinit", function( event, data )
                {
                        $.mobile.hidePageLoadingMsg();
                });
               
            </script>
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
           
            <meta http-equiv="content-type" content="text/html;" charset="<?php echo config_item('charset');?>" />
            <meta name="robots" content="none,nofollow" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
               
    </head>
    <body>
       
        <div data-role="page">
           
            <div data-role="header">
                    <h1>TEST</h1>
            </div><!-- /header -->

            <div data-role="content" class="ui-content" role="main">
               
                <div data-role="collapsible">
                    <h3>I'm a header</h3>
                    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
                </div>
               
        </div><!-- /content -->
           
            <div data-role="footer">
            </div>

        </div><!-- /page -->

    </body>
    </html>