Charger le fichier html passé en paramètre en utilisant jquery?

Je suis un débutant dans jquery. J'essaye de créer une page, qui charge le contenu sans recharger la page. Dans ma page de test, j'ai 2 liens, à savoir le lien 1 et le lien 2. Lorsque la page par défaut est cliquée. Il dit juste 'Bonjour'. Quand on clique sur l'un ou l'autre lien, il faut dire 'Bonjour link1' (si on clique sur link1), 'Hello link2' (quand link2) est cliqué. Le contenu de Link1 (html) est dans le fichier link1.html et le contenu de link2 dans le fichier link2.html. Chaque fois que l'un des liens est cliqué, il devrait passer le nom de la page html du lien comme paramètre. voici ce que je l'ai fait:Charger le fichier html passé en paramètre en utilisant jquery?

<head> 
<title>Ajax Practice</title> 
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript">           
    $(document).ready(function(){ 
    $("a").click(function test(filename){ 
     alert(filename); 
     var b = $("a").attr("title"); 
     alert(b); 
     //$('#menuContents').load($(filename)).fadeIn("slow"); 
     //$('#menuContents').load('link1.html').fadeIn("slow"); 
     $('#menuContents').load(b).fadeIn("slow"); 
    }); 
    }); 
</script> 
</head> 

<body> 
<div id="page-wrap"> 
    <div id="menu"> 
     <a href="javascript:test('link1.html');" title="link1.html">link1</a> 
     <a href="#" title="">link2</a>  
    </div> 
    <div id="menuContents"> 
     <h1>Hello!</h1> 
    </div> 
</div> 

</body> 
</html>

Le problème est que si je passe juste le nom du fichier HTML en tant que paramètre, il ne se lit pas comme valeur de chaîne au lieu qu'il se Lisons comme objet. La première alerte dans le code donnera un message [object Object]. Je peux lire le texte du titre du lien en utilisant l'attribut .attr et peut charger la page en utilisant l'attribut .load. Je peux aussi changer le contenu de la page en donnant directement le nom de la page html dans l'attribut .load (mis en commentaire dans le code). Est-ce que quelqu'un peut dire comment je peux passer le nom de la page html comme paramètre plutôt que de coder en dur ou de lire le titre?

Merci. Le nom de fichier est en fait l'objet d'événement.

Source

2011-06-29 sanjeev40084

$("a").click(function test(filename){

S'il vous plaît vérifier sur http://api.jquery.com/click/

Par ailleurs, dans votre code:

<a href="javascript:test('link1.html');" title="link1.html">link1</a>

appellera le test de fonctionnement, de sorte que vous pouvez définir cette fonction dans votre code javascript

function test(filename){ 
    alert(filename) 
    // your code here 

}

Essayez l'exemple ici http://jsfiddle.net/WUBsq/

Il existe plusieurs façons de nettoyer, par exemple:

<a class="refresh" data-title="link1.html">click here</a>

...

$(document).ready(function(){ 
    $('a.refresh').click(function(){ 
     var title = $(this).attr('data-title'); 
     alert(title); 

     // your code here 
    }) 
})

Essayez ici: http://jsfiddle.net/WUBsq/3/

Source

2011-06-29 02:21:53

enlever tout prêt() et la fonction cliquez sur(), laissez la fonction de test seul

function test(filename){ 
    alert(filename); 
    //$('#menuContents').load($(filename)).fadeIn("slow"); 
    //$('#menuContents').load('link1.html').fadeIn("slow"); 
    $('#menuContents').load(filename).fadeIn("slow"); 
}

ps. en fait, lorsque vous définissez une fonction dans jquery cliquez sur la fonction, la fonction ne peut pas être appelée à l'extérieur, vous devez définir la fonction de test dans gloal, alors vous pouvez l'appeler partout include a.href

Il y a une belle façon de le faire ci-dessous

<html> 
    <head> 
    <title>Ajax Practice</title> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript">           
     $(document).ready(function(){ 
     $("a").click(function (e){ 
      $('#menuContents').load($(this).attr('href')).fadeIn("slow"); 
      e.preventDefault(); 
      return false; 
     }); 
     }); 
    </script> 
    </head> 

    <body> 
    <div id="page-wrap"> 
     <div id="menu"> 
      <a href="link1.html">link1</a> 
      <a href="link2.html">link2</a>  
     </div> 
     <div id="menuContents"> 
      <h1>Hello!</h1> 
     </div> 
    </div> 

    </body> 
    </html>

Source

2011-06-29 02:23:01 viclm

Malheureusement, cela ne fonctionnerait pas. voir http://jsfiddle.net/5zffN/2/ –

Au moins, vous devez empêcher la propagation, sinon le href sera déclenché après l'appel du $ ('a'). click –

Si vous utilisez des scripts côté serveur telles que PHP, vous pouvez regarder dans jQuery de $ .ajax()

Source

2011-06-29 02:26:26

Charger le fichier html passé en paramètre en utilisant jquery?

Répondre

Questions connexes