dimanche 10 mai 2015

Javascript works in JQuery but not JQuery Mobile

For some reason when I try to link to this page (code below) in JQM, the page doesn't load, but if I type the URL in directly the page loads fine. I'm really confused as to what is going on. I think it has something to do with the javascript, but I am not sure. Can someone help me out please?

<!DOCTYPE html>
<html>
<head>
    <title>Select Days</title>
    <link rel="stylesheet" href="http://ift.tt/1hqJ3b1">
    <link rel="stylesheet" type="text/css" href="css/pepper-ginder-custom.css">
    <link rel="stylesheet" type="text/css" href="css/mdp_abrv.css">
    <link rel="stylesheet" type="text/css" href="css/core.css">
    <link rel="stylesheet" type="text/css" href="css/datepicker.css">
    <link rel="stylesheet" type="text/css" href="css/button.css">
    <script src="http://ift.tt/15195HW"></script>
    <script src="http://ift.tt/1hqJ3aY"></script>
    <script type="text/javascript" src="http://ift.tt/1pTZRh4"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
        <a href="/main/planned/" data-icon="back">Start Over</a>
        <h1>Select Days</h1>
        <a href="/main/" data-icon="grid">Main</a>
    </div>
    <div data-role="main" class="ui-content">  
        <ul data-role="listview" data-inset="true" data-position="fixed">
            <li class='demo'>
                <div class='box'>
                    <div id="date" class="datepicker" style="display:block;"></div>
                    <button id="reset_dates">Reset</button>
                </div>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $("#date").multiDatesPicker({
                            addDates: ['05/10/2015', '05/14/2015']
                        });
                        // shows selected dates in an alert message
                        $('#show_dates').click(function(e) {
                          e.preventDefault();
                          var dates = $('#date').multiDatesPicker('getDates');
                          var dates_in_string = '';
                          for(d in dates) dates_in_string+= dates[d]+' ';
                          alert(dates_in_string);
                        });
                        $('#reset_dates').click(function(e) {
                            $('#date').multiDatesPicker('resetDates', 'picked');
                        });
                    });
                </script>
            </li>
        </ul>
    </div>
</body>
</html> 

Aucun commentaire:

Enregistrer un commentaire