11550 sujets

JavaScript, DOM et API Web HTML5

Qui peut expliquer cela? (Jquery - Ajax)

bonjour les amis,

je suis en train de lire un bon livre récent: Pro Jquery - Adam Freeman - Apress
et là je bute sur un truc bizarre au chapitre Ajax.

le code proposé fonctionne dans affichage en direct de Dreamweaver cs5.5 et aussi dans Safari, mais pas dans Firefox ni IE.

Pour ces deux derniers, la partie Ajax ne fonctionne pas...., le div#oblock reste vide.

voici le code de la page:
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $.get("flowers.html",
                function(data) {
                    var elems = $(data).filter('div').addClass("dcell");
                    elems.slice(0, 3).appendTo('#row1');
                    elems.slice(3).appendTo("#row2");
            });       
        });    
    </script>
</head>
<body>
    <h1>Jacqui's Flower Shop</h1>
    <form method="post" action="http://node.jacquisflowershop.com/order">
        <div id="oblock">        
            <div class="dtable">
                <div id="row1" class="drow">
                </div>
                <div id="row2"class="drow">
                </div>            
            </div>
        </div>
        <div id="buttonDiv"><button type="submit">Place Order</button></div>                    
    </form>
</body>
</html>


et voici le code du fichier flowers.html appelé par Ajax

<div>
    <img src="astor.png"/><label for="astor">Astor:</label>
    <input name="astor" value="0" required />
</div>
<div>
    <img src="daffodil.png"/><label for="daffodil">Daffodil:</label>
    <input name="daffodil" value="0" required />
</div>
<div>
    <img src="rose.png"/><label for="rose">Rose:</label>
    <input name="rose" value="0" required />
</div>                
<div>
    <img src="peony.png"/><label for="peony">Peony:</label>
    <input name="peony" value="0" required />
</div>
<div>
    <img src="primula.png"/><label for="primula">Primula:</label>
    <input name="primula" value="0" required />
</div>            
<div>
    <img src="snowdrop.png"/><label for="snowdrop">Snowdrop:</label>
    <input name="snowdrop" value="0" required />
</div>


les images ne se chargent pas, avec Firefox, IE et aussi Opéra..

bizarre ça, non?
je me suis rendu compte que si je copie les fichiers du bouquin dans un contexte de host virtuel, avec wamp, alors ça marche, mais j'arrive pas à expliquer pourquoi.....
Sujet clos
Aller à