Forum : Cordova/Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code que je developpe sous Visual Studio .

J'essai d'utiliser un 'plugin' du nom de Swiper (qui permet de simuler le slide en css)
http://www.idangero.us/swiper/#.VsGNfPnhCUl
ce plugin utilise
une page js: scripts/swiper.min.js
une page css: swiper.min.css

et le code suivant:

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
             <div class="swiper-slide">Slide 2</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
     <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });
    </script>

mon application se compose de 3 pages:
la premiere index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script>document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);</script>
    <title>test</title>

   <script type="text/javascript" src="cordova.js"></script>
    <!-- test references -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/swiper.min.css" rel="stylesheet" />
    <!--Login-->
    <script type="text/javascript" src="scripts/login.js"></script>
    <script type="text/javascript" src="scripts/swiper.min.js"></script>

    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
    }

    </script>
</head>
<body onload="onDocLoad()" >
    <script>
     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });

        function onDocLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("container").innerHTML = xmlhttp.responseText;

                } else {
                    document.getElementById("container").innerHTML = "chargement en cours...";

                }
            }
            xmlhttp.open("Get", "http://ip/test/login.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send();
        }        
    </script>
    <div id="tetetete">
    </div>
    <div id="1">
    </div>
    <div id="container" >
    </div>
</body>
</html>

La seconde est une page en javascript login.js:

xmlhttp = new XMLHttpRequest();

function login(idPremierPage, pseudo, pays) {

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("container").innerHTML = xmlhttp.responseText;
        }else{
            document.getElementById("container").innerHTML = "chargement en cours...";
        }   
    }   
    xmlhttp.open("get", "http://ip/test/login.php", true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send();

    xmlhttp.open("POST", "http://ip/test/login.php", true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send("idPrP="+idPrP+"&pseudo="+pseudo+"&pays="+pays);

}

et la derniere en php qui est sur un serveur login.php

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
             <div class="swiper-slide">Slide 2</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

si j'ecris le code dans la page index.html comme ca: cela fonctionne

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script>document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);</script>
    <title>test</title>

   <script type="text/javascript" src="cordova.js"></script>
    <!-- test references -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/swiper.min.css" rel="stylesheet" />
    <!--Login-->
    <script type="text/javascript" src="scripts/login.js"></script>
    <script type="text/javascript" src="scripts/swiper.min.js"></script>

    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }

    // Handle the back button
    //
    function onBackKeyDown() {
    }

    </script>
</head>
<body onload="onDocLoad()" >
    <script>

        function onDocLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("container").innerHTML = xmlhttp.responseText;

                } else {
                    document.getElementById("container").innerHTML = "chargement en cours...";

                }
            }
            xmlhttp.open("Get", "http://ip/test/login.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send();
        }        
    </script>
    <div id="tetetete">
    </div>
    <div id="1">
    </div>
    <div id="container" >
    </div>
     <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
             <div class="swiper-slide">Slide 2</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });
    </script>
</body>
</html>

mais a partir du moment ou je le mets comme mis sur les premieres pages de code... il n'en ressort rien... je ne comprends pas pourquoi... quelqu'un pourait il m'eclairer?
J'espere que cela est assez claire.

Cordialement
Blacksad

Cordova/Javascript

2 réponses