Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème d'intégration du framework jQuery

Impossible d'utiliser jQuery. Big problème

Sujet résolu
    3 novembre 2010 à 21:04:16

    Bonjour à tout les zéros qui ont bien voulus s'occuper de ce cas,

    Mon probléme est étrange, et je poste ici car je n'arrive pas à le résoudre. Je suis en train de créer un site pour un ami artiste. Ce site, est hebergé sur un ftpperso free. Il y a donc deux possibilité pour y accéder. La premiére, c'est avec l'adresse du ftp free, soit lucas25.free.fr/hugtime. Et la deuxiéme via un nom de domaine www.hugtime.me.
    Lorsque l'on affiche la source, dans le premier cas on obtient ceci:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- XHTML 1.0 Strict, like HTML4.01 Strict, allows the use of structural and semantic markup, but not presentational or deprecated elements (such as font); framesets are not allowed. Unlike HTML 4.01, the markup must be written as well-formed XML. -->
    <html>
    	<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>&hearts; HUG TIME &hearts;</title>
            
            <!--Stylesheets-->
    
    
    <!--[if lt IE 8]><link rel="stylesheet" href="../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
    
    </head>
    <body>
    <div class="container">   
     
    <!--HOME-->
     <div id="home">
      
      <div class="languages">
      	<a href="#" class="english on"></a>
        <a href="#" class="francais"></a>
        <a href="#" class="espanol"></a>
      </div>
      
      <div class="navigation">
      	<ul>
        	<li class="nav-gauche"></li>
            <li><a href="#" class="on Home">Home</a></li>
            <li><a href="#" class="01">01</a></li>
            <li><a href="#" class="02">02</a></li>
            <li><a href="#" class="03">03</a></li>
            <li><a href="#" class="04">04</a></li>
            <li><a href="#" class="05">05</a></li>
            <li><a href="#" class="06">06</a></li>
            <li><a href="#" class="07">07</a></li>
            <li><a href="#" class="08">08</a></li>
            <li><a href="#" class="09">09</a></li>
            <li><a href="#" class="10">10</a></li>
            <li class="nav-droite"></li>
            <li><a href="#" class="cart">My Cart</a></li>
        </ul>
      </div>
      
      <div class="about">
      	<h1>WE WANT MORE LOVE!</h1>
        <span class="quote">- The Animals -</span>
        <h2>About Hugtime...</h2>
        <p>Hugtime is a series of whimsical illustrations depicting friendly hugs between unlikely matches.<br /><br />A cat and a dog, an elephant and a mouse - All hugs are shared by characters who appear on the surface to be completely opposite from one another.<br />The strong and the not so strong, the fast and the slow, the gigantic and the tiny... oftentimes all that is needed to bridge these gaps is a little kindness and understanding.<br /><br />A commentary on the need for more unlikely partnerships in everyday life, Hugtime shows how sometimes polar opposites make the best friends of all!
        </p>
      </div>
      
      <div class="welcome">
      	<a href="#"><h3>Welcome<br />to the<br /><span>HugTime</span><br />Project!</h3></a>
      </div>
      
     </div>
    <!--HOME-->
    
    
    <!--Illustration01-->
     <div id="illustration01">
      <div class="languages">
      	<a href="#" class="english on"></a>
        <a href="#" class="francais"></a>
        <a href="#" class="espanol"></a>
      </div>
      <div class="clear"></div>
      <div class="navigation">
      	<ul>
        	<li class="nav-gauche"></li>
            <li><a href="#" class="on Home">Home</a></li>
            <li><a href="#" class="01">01</a></li>
            <li><a href="#" class="02">02</a></li>
            <li><a href="#" class="03">03</a></li>
            <li><a href="#" class="04">04</a></li>
            <li><a href="#" class="05">05</a></li>
            <li><a href="#" class="06">06</a></li>
            <li><a href="#" class="07">07</a></li>
            <li><a href="#" class="08">08</a></li>
            <li><a href="#" class="09">09</a></li>
            <li><a href="#" class="10">10</a></li>
            <li class="nav-droite"></li>
        </ul>
      </div>
      <div class="imageholder">
      	<h1>The Complices</h1>
        <img src="images/hugtime_01.jpg" alt="01" />
      </div>
      
      <div class="columnRight">
      	<div class="leavecomment">
            <h2>Leave a Comment on the Fly:</h2>
            <form action="post.php" method="post">
            <input type="text" name="name" id="name" class="form" value="Pick up a name" />
            <input type="text" name="email" id="email" class="form" value="Email" />
            <textarea name="comment" class="form">Comment</textarea>
    	<input type="hidden" name="illustration" value="1" /> <!--here, you have to increase the value (1 here) in the next illustrations, depending the iluustration number-->
    	<input type="submit" />
            </form>
        </div>
        
        <div class="buytab">
        	<h1>Buy a Print!</h1>
            
            <div class="infobuy">
            	<p>Available in 3 sizes on 18g. glossy paper, protected in a plastic slleves</p>
                <img src="images/paypal.jpg" alt="Paypal" />
            </div>
            
            <div class="paypalform">
            	<form>
                	<select >
                    	<option>Size</option>
     					<option>4"x6"</option>
      					<option>8"x10"</option>
                        <option>10"x12"</option>
                    </select><br />
                    <select >
                    	<option>Qty</option>
     					<option>1</option>
      					<option>2</option>
                        <option>3</option>
                        <option>4</option>
     					<option>5</option>
      					<option>6</option>
                        <option>7</option>
                    </select><br />
                    <button>Add to Cart</button>
                </form>
            </div>
            <div class="clear"></div>
        
        </div>
        <div class="clear"></div>
        
        <div class="commentslist">
        	<ul>
    		        	<li class="bgdark">- <span class="date">24 September 1971</span> - by  <span class="username">jj</span><br />
    		super !		</li>
    		        	<li class="bglight">- <span class="date">03 November 2010</span> - by  <span class="username">Pick up a name</span><br />
    		Comment		</li>
    		        	<li class="bgdark">- <span class="date">03 November 2010</span> - by  <span class="username">lucas</span><br />
    		pas mal		</li>
    		        	<li class="bglight">- <span class="date">03 November 2010</span> - by  <span class="username">Pick up a name</span><br />
    		Comment		</li>
    			</ul>
        </div>
      
      </div><!--end of column right-->
      
     <div class="clear"></div> 
     </div><!--illustration01-->
    
    
    
      
    
    </div>
    <script type="text/javascript" src="script/jquery.js"></script>
    
    </body>
    </html>
    


    Dans le deuxiéme cas (www.hugtime.me), on obtient un cadre qui pointe vers l'emplacement du site. Ce cadre doit certainement être créé automatiquement, et je n'ai aucune idée de la façon de l'enlever:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
      <title>Hug Time </title>
      <META name="description" content="Artwork by Lucas Lopvet">
    </head>
    <frameset rows="100%,*" border="0">
      <frame src="http://lucas25.free.fr/hugtime/" frameborder="0" />
      <frame frameborder="0" noresize />
    </frameset>
    
    <!-- pageok -->
    <!-- 07 -->
    <!-- -->
    </html>
    


    Bref, tout cela ne me générais pas si il n'y avait pas un big probléme avec jQuery. En effet, vous pouvez essayer d'éxecuter la fonction jQuery dans la console de Google Chrome ou de Firebug.
    Lorsque j'essaye, par exemple ceci:
    $('document');
    

    Cela ne me renvoie rien du tout (null). De même, la fonction $() existe mais n'est pas la même que d'habitude tandis que la fonction jQuery, elle, n'existe pas.
    Le plus troublant, c'est que jQuery fonctionne sur lucas25.free.fr/hugtime, mais pas sur www.hugtime.me o_O . Je soupçonne donc la frame de poser des problémes. J'espére pouvoir trouver de l'aide ici, et merci d'avance :) .
    • Partager sur Facebook
    • Partager sur Twitter
      3 novembre 2010 à 21:37:04

      Si tu envoies une chaine de caractère à $(), elle va le traiter comme un sélecteur CSS, donc elle va chercher toutes les balises <document>... qui n'existe pas. Pour récupérer l'objet jQuery associé au document :

      $(document);
      


      Pour le problème de domaine, je suis pas sûr que ça soient les frames qui posent problème : le contenu d'une frame est traitée comme une page web à part entière, il n'y a pas de raison que ça pose souci...
      • Partager sur Facebook
      • Partager sur Twitter
        3 novembre 2010 à 21:42:54

        Oui, certe. Mais jQuery ne fonctionne toujours pas. Il suffit d'utiliser la console pour s'en rendre compte.
        • Partager sur Facebook
        • Partager sur Twitter
          3 novembre 2010 à 22:06:19

          Citation : undead>

          Oui, certe. Mais jQuery ne fonctionne toujours pas. Il suffit d'utiliser la console pour s'en rendre compte.


          Faudrait encore qu'il y ai un script quelque part...
          • Partager sur Facebook
          • Partager sur Twitter
            4 novembre 2010 à 2:04:27

            jQuery est parfaitement bien inséré dans ton site.

            Il ne reste plus qu'à l'utiliser.
            • Partager sur Facebook
            • Partager sur Twitter
              4 novembre 2010 à 20:12:23

              Oui, je sais bien que jQuery est parfaitement bien installé. Mais vous n'avez pas bien compris mon problème. Tout d'abord, s'il n'y a pas de script dans ma page, c'est normal car j'ai mis jQuery dans le but de l'utiliser et n'ai encore rien codé. :p
              Seulement, jQuery marche bien sur http://lucas25.free.fr/hugtime/, alors que sur http://www.hugtime.me/ il ne marche pas. Je vous invite à vérifier mon propos en utilisant une console javascript sur ces deux pages (celle de Google Chrome ou de Firebug par exemple), et en selectionnant les liens de la page avec jQuery :
              $('a');
              

              Vous verrez alors que cette fonction renvoie null sur www.hugtime.me alors qu'elle marche sur http://lucas25.free.fr/hugtime/ :(
              • Partager sur Facebook
              • Partager sur Twitter
                4 novembre 2010 à 20:37:11

                Ce n'est pas parce que là console ne peut pas y accéder que jQuery n'est pas fonctionnel...

                La console ne peut pas accéder à jQuery car le script est chargé dans l'iframe...

                Mais fais un script et tu verras qu'il fonctionnera sur les adresses.
                • Partager sur Facebook
                • Partager sur Twitter
                  4 novembre 2010 à 20:44:39

                  Effectivement, je n'avait pas pensé à ça :-° . Merci :)
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Problème d'intégration du framework jQuery

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown