Comment faire pour que Ajax fonctionne avec Jquery?

C'est la première fois que j'utilise vraiment ce site. Je suis relativement nouveau à utiliser ajax avec mes sites et j'ai rencontré un problème il y a un peu de temps. La chose est, je ne suis pas sûr de ce que mon problème est exactement parce que chaque fois que je suis allé sur mon script, il a un sens pour moi (et il correspond à tout ce que j'ai cherché sur Google et le site Web jQuery). Fondamentalement, mon script ne fonctionne pas du tout et je dois le faire fonctionner d'une manière ou d'une autre. Si l'un d'entre vous pouvait m'aider, je l'apprécierais grandement. Voici le code:Comment faire pour que Ajax fonctionne avec Jquery?

$(document).ready(function(){ 
    $().ajaxSetup({cache: false}); 
    setInterval("checkAnchor()", 300); 
}); 

//Function which check if there are anchor changes, if there are, sends the ajax petition 
var currentAnchor = null; 

function checkAnchor() { 
    //Check if it has changed 
    if(currentAnchor != window.location.hash){ 
     currentAnchor = window.location.hash; 
     var hash = window.location.hash.substr(1); 
     var newLink=$('a[href='+hash+']'); 
     var toLoad = hash+'.html #content'; 

     $('.current').removeClass('current'); 
     newLink.addClass('current'); 

     $('.box').slideUp(1500,function(){ 
      //Send the petition 
      $('.box').load(toLoad,''); 
     }); 
     $('#nav').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     $('.box').slideDown(1500,function(){ 
      $('#load').fadeOut('normal'); 
      $('#load').remove(); 
     }); 
    }); 
}

Et le fichier html:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/general.css" /> 
</head> 
<body> 
    <!--Nav Bar--> 
    <div id="nav" class="center round"> 
    <ul> 
    <li><a class="current" href="#home">Home</a> | </li> 
    <li><a href="#upcomingevents">Upcoming Events</a> | </li> 
    <li><a href="#attractions">Attractions</a> | </li> 
    <li><a href="#facts">Facts</a> | </li> 
    <li><a href="#placestostay">Places to Stay</a> | </li> 
    <li><a href="#workscited">Works Cited</a></li> 
    </ul> 
    </div> 


    <!--This is where content is loaded via ajax--> 
    <div class="box center round"> 

    </div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/ajax2.js"></script> 
</body> 
</html>

Source

2010-10-17 Lobabob

Avez-vous une erreur sur la console? L'avant-dernière ligne devrait être '}' au lieu de '});' Peut-être que cela résout déjà ... –

Assurez-vous de changer $(). AjaxSetup en $ .ajaxSetup(). Sinon, oui, pouvez-vous nous donner ce qu'il dit dans la console d'erreur? –

J'ai modifié vos URL afin que tous ont l'id nav_link et un rel qui devrait porter l'URL que vous voulez charger .

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/general.css" /> 
    </head> 
    <body> 

    <!--Nav Bar--> 
    <div id="nav" class="center round"> 
     <ul> 
      <li><a href="home.html">   Home</a> | </li> 
      <li><a href="upcomingevents.html"> Upcoming Events</a> | </li> 
      <li><a href="attractions.html">  Attractions</a> | </li> 
      <li><a href="facts.html">   Facts</a> | </li> 
      <li><a href="placestostay.html"> Places to Stay</a> | </li> 
      <li><a href="workscited.html">  Works Cited</a></li> 
     </ul> 
    </div> 

    <a href="shall not trigger" >shall not trigger</a> 




    <!--This is where content is loaded via ajax--> 
    <div class="box center round"></div> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 


     $(document).ready(function(){ 

      $('#nav a').click(function(){ 

       var the_url = $(this).attr("href"); 
       alert(the_url); 
       $(".box").load(the_url); 

       return false; 
      }); 


     }); 


    </script> 


    </body> 
</html>

Comme vous pouvez le voir, le code jQuery est assez simple il TRAJECTOIRE tous cliqués id avec nav_link et recherche l'url propper et charges à votre boîte.

J'espère que ça aide!

Source

2010-10-17 07:48:00 Herr

vraiment, le même identifiant pour tous les liens? C'est tellement faux ... – Ventus

alors corrigez-le :) Ça marche et pour un débutant, le concept est très important. Il pourrait apprendre beaucoup de cet exemple – Herr

Je l'ai "corrigé", maintenant il semble encore mieux. :) J'espère que vous l'aimerez aussi, @ventus;) – Herr

Comment faire pour que Ajax fonctionne avec Jquery?

Répondre

Questions connexes