2011-04-29 5 views
1

J'essaie de charger le contenu de mon script Perl CGI dans la page HTML. .load() ne fonctionne pas. S'il vous plaît me dire quel est le problème ici:jQuery Ajax CGI: charger le script

$(document).ready(function() { 
    $('input:checkbox').change(function() { 
    var nom = $(this).attr("value"); 
    if ($(this).is(':checked')) { 
     alert('okok'); 
     $('body').load("../cgi-bin/essai.pl"); 
    } else { 
     //$("#" + nom).remove(); 
    } 
    }); 

Je voudrais:

  • Quand je vérifie la case à cocher (qui a comme valeur "toto") charge (Ajax) essai.pl?param=toto
  • Lorsque je désélectionne cette case, supprimez le contenu chargé auparavant.

J'espère que quelqu'un a un peu de temps pour m'aider à quitter ce cauchemar jQuery.
Salut.

Répondre

2

Vous chargez la sortie de votre script directement dans le corps, ce qui fait disparaître tout le contenu du corps précédent (y compris vos cases à cocher). Je suppose que c'est ce que vous ressentez.

Ce que vous devez faire est d'avoir un bloc dédié pour le contenu généré par le script, et utiliser ce bloc comme cible de votre fonction de chargement.

HTML:

<body> 
<div id="controller"> 
    <input type="checkbox" name="toto" id="toto"></input> Load/unload content 
    </div> 
<div id="target"> 
    Content comes here 
    </div> 
</body> 

JavaScript:

$('input:checkbox').change(function(){ 
    if ($(this).is(':checked')) { 
     var target_url = "../cgi-bin/essai.pl?param="+$(this).attr('name'); 
     $('div#target').load(target_url); 
    } 
    else { 
     $("div#target").html(''); 
    } 
}); 

Je voudrais aussi ne pas la définition de chemin relatif de type "../cgi-bin/" et utiliser le chemin absolu à la place.

Exemple de disponible à http://jsbin.com/izuni4/19

EDIT On dirait que je ne l'ai pas bien saisir ce que vous essayez d'atteindre. Voici une version modifiée du même javascript qui ajoute/supprime des blocs de contenu déclenchés par plusieurs cases à cocher. Espérons que résout votre problème:

http://jsbin.com/izuni4/22/

+0

Grand, qui est ce que je recherche. Mais j'ai 4 case à cocher, quand je coche la première case à cocher, nouvelle charge de div dans #target, mais rien ajouter quand je vérifie le second. Est-ce parce que la charge n'est pas comme append? Il ne peut pas ajouter plus, il efface? – eouti

+0

@eouti: Réponse éditée pour mieux répondre à vos besoins. –

+0

http://jsbin.com/izuni4/22/ est exactement ce dont j'ai besoin !! \ n \ n Je vote pour vous mec – eouti