Afficher/masquer div dans jquery

Question

J'essaie d'afficher et de masquer un div basé sur une condition (pour facebook dans cet exemple). Voici le code que j'utilise, mais pour une raison quelconque, l'alerte fonctionne, mais elle montre toujours la div. Quelqu'un peut-il aider à déboguer cela. Merci.

<?php 
     // call the function to parse the signed request 
$sr_data = mySignedRequest(); 

// check like status 
if ($sr_data->page->liked==1) { 
    echo '<script language="javascript"> 
     alert("Hello You Are a Fan");  
      document.getElementById("header").style.display = "block"; 
     </script>'; 
} else { 
    echo '<script language="javascript"> 
     alert("You are not a fan");  
      document.getElementById("header").style.display = "none"; 
     </script>'; 
} 

?> 
<div id="header"> 

Hello You Are a Fan 
</div><!-- #header --> 

Answer 1

Ceci est un exemple typique de code essayant d'accéder à des éléments alors qu'ils n'existent pas encore. Vous êtes en train de récupérer un élément avec getElementById, mais l'élément est seulement défini après tout le code JavaScript. Vous devez utiliser $(document).ready. De plus, jQuery a .hide et .show de sorte que vous n'avez pas besoin getElementById et style.display:

echo '<script language="javascript"> 
    alert("Hello You Are a Fan"); 

    $(document).ready(function() { // only run when all elements are available 
     $("#header").show(); 
    }); 
    </script>'; 

Answer 2

Il ne fonctionne pas parce qu'au moment où le code JS court, #header n'existe pas encore sur la page. Si vous déplacez le PHP (et donc le JS) en dessous du div #header, cela fonctionnera.

La meilleure façon de le faire est d'envelopper le JS dans un appel $(document).ready() comme le suggère pimvdb. Cependant, je ne pense pas que cela vous donnera un bon résultat car #header sera effectivement visible brièvement, puis disparaîtra. La meilleure façon de résoudre ce cas particulier est de faire quelque chose comme:

<?php 

if ($sr_data->page->liked==1) { 
    $display = 'block'; 
} else { 
    $display = 'none'; 
} 

?> 

<div id="header" style="display:<?php echo $display ?>"> 

Hello You Are a Fan 
</div> 

En intégrant la ligne de style correct avec le div, il ne sera jamais montrer quand il ne devrait pas.

Answer 3

Modifier le document.getEle ... à ce qui suit:

$(document).ready(function() {  
    $("#header").show(); 
}); 

ou

$(document).ready(function() {  
    $("#header").show(); 
}); 

Answer 4

Changer le code morceau commande: html premier

<div id="header"> 

Hello You Are a Fan 
</div><!-- #header --> 
<?php 
     // call the function to parse the signed request 
$sr_data = mySignedRequest(); 

// check like status 
if ($sr_data->page->liked==1) { 
    echo '<script language="javascript"> 
     alert("Hello You Are a Fan");  
      document.getElementById("header").style.display = "block"; 
     </script>'; 
} else { 
    echo '<script language="javascript"> 
     alert("You are not a fan");  
      document.getElementById("header").style.display = "none"; 
     </script>'; 
} 

?> 

parce que quand js runing, le #header dom n'est pas exit.