jQuery charger l'url dans la div et remplacer le contenu actuel transmettre l'url de la fonction

Je suis en train d'appeler une fonction appelée loadPage sur le clic d'un a et la balise de passer une URL pour remplacer le contenu actuel dans un div appelé main via Ajax.

Cependant, mon code n'est pas de remplacer le contenu déjà dans la div principale ou même faire de l'appel Ajax aussi loin que je peux voir et je ne vois pas où ça va mal.

JavaScript:

$(document).ready(function () {
    function loadPage(urlToLoad) {
        $.ajax({
            type: "POST",
            alert(urlToLoad);
            url: urlToLoad,
            data: dataString,
            success: function (returnedData) {
                $('#main').html(returnedData);
            }
        });
    }
});

HTML:

<nav>
    <ul>
        <li><a onclick="loadPage('load.php');" href="javascript:void(0)" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a>
        </li>
    </ul>
</nav>
<div id="main">
    <section id="mainContent">abc</section>
</div>

Vous n'êtes pas à l'exécution de la fonction de n'importe où..
S'il vous plaît avoir un coup d'oeil dans cet article pour apprendre à débogage du code JavaScript.
1) vous avez "alerte" en ajax demande parametrs - il de l'erreur 2)votre fonction enveloppé par l'anonymat de la fonction, donc hors de portée mondiale
Si vous obtenez des erreurs à l'intérieur de la console (si vous utilisez google chrome, vous pouvez les voir en poussant f12), alors pouvez-vous s'il vous plaît coller le texte exact de sorte que nous pouvons fournir plus de réponses précises.

InformationsquelleAutor Ben Paton | 2013-03-25

Vous pouvez simplement le faire à l'aide de vide:

function loadPage(urlToLoad) {
    $('#main').load(urlToLoad, function () {
        alert('Load was performed.');
    });
}

Merci cela a fonctionné et c'est le plus propre code

InformationsquelleAutor palaѕн

1

pourquoi avez-vous une alerte à l'intérieur de l'ajax options.. c'est jeter l'erreur.. en retrait et il devrait fonctionner..
```
//$(document).ready(function() { <--here
    function loadPage(urlToLoad) {
     alert(urlToLoad); //you can check that here...
      $.ajax({
            type: "POST",
           //alert(urlToLoad); <--here
            url: urlToLoad,
            data: dataString,
            success: function( returnedData ) {
             alert("success") //to check if ajax call is successfull
            $('#main').html( returnedData );
          }
        });
```
et pas besoin de créer une fonction à l'intérieur du document.prêt()... le garder à l'extérieur de la fonction ready
- Même quand je la déplace à l'extérieur du document.deady() et supprimer l'alerte, il ne fonctionne toujours pas.
- c'est que la fonction s'appelle ?? si vous alerte quelque chose à l'intérieur de la fonction??
- Nous ne pouvons que travailler avec ce que vous nous donnez. Nous n'avons pas de pouvoirs psychiques à distance de déboguer votre code. Je vous recommande de lire l'article que j'ai lié à et faire un peu de débogage sur votre propre. Désolé si je sonne dur, mais "il ne fonctionne pas" n'est vraiment pas beaucoup de travailler avec. Le code JavaScript qu'il est "ok". Nous ne savons pas si il y a un autre code qui pourrait causer des problèmes ou si votre script PHP est correct. Ce sont toutes des choses que vous devez vérifier vous-même.
InformationsquelleAutor bipen

Vous pourriez le faire d'une autre manière, par l'ajout d'une mesure "données" attribut à votre point d'ancrage des balises, et à l'aide de jquery pour gérer l'événement click.

$(document).ready(function()
{
   $('a.nav').on("click", function(event){
      event.preventDefault();
      $.ajax({
            type: "POST",
            url: $(this).attr('data-page'),
            data: dataString,
            success: function( returnedData ) {
            $('#main').html( returnedData );
          }
      });
   });
});


<nav>
    <ul>         
        <li><a data-page="load.php" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a></li>
    </ul>
</nav>

 <div id="main">
    <section id="mainContent">
        abc
    </section>
 </div>

InformationsquelleAutor Stefan Candan

0

Votre fonction loadPage est portée à la fermeture utilisés pour jQuery document.ready. Plus tard, lorsque la fonction loadPage est appelé, l'appel vient de la portée globale. En conséquence, la fonction ne sera pas accessible. Prenez votre fonction de $(document).ready(function(){});

Également noter que lors de la tentative de débogage à l'aide de alert (pas vraiment recommandé, à tout le moins, vous devez utiliser console.log), que vous avez besoin de mettre l'alerte sur sa propre ligne de code, et pas seulement dans le milieu de code comme un point d'arrêt. Votre alerte doit venir avant l'appel ajax.
```
function loadPage(urlToLoad) {
 alert(urlToLoad);
 $.ajax({/*...*/});
}
```
- Je l'ai déplacé dans le document.deady() et ça ne fonctionne toujours pas
InformationsquelleAutor Travis J

Moveout la fonction de la doc ready gestionnaire:

function loadPage(urlToLoad) {
    $.ajax({
        type: "POST",
        url: urlToLoad,
        data: dataString,
        success: function (returnedData) {
            $('#main').html(returnedData);
        }
    });
}

$(document).ready(function () {
   $('nav a.nav').click(function(e){
      e.preventDefault();
      loadPage(this.href);
   });
});

essayer avec ce code html:

 <nav>
   <ul>
     <li>
       <a href="load.php" class="nav">
          <img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news
       </a>
     </li>
   </ul>
 </nav>

Vous ne devriez pas alerte dans l'ajax propriétés de la fonction, afin de supprimer l'alerte à partir de là. Il semble que vous voulez qu'il soit de travail sur le clic d'un lien spécifique. Donc vous pouvez essayer cette.

InformationsquelleAutor Jai

Vous devez vous connecter pour publier un commentaire.