changer le contenu d'un div avec javascript et php include

Question

Je souhaite faire quelque chose comme iframe-like avec mon div j'ai aller ici.

En fait, je suis devenu aussi loin que des liens faisant modifier le contenu de la div comme ceci:

<a href="#self" onClick="document.getElementById('maincontent').innerHTML = '<?php include 'file.php'; ?>';">Open file</a> 

Cela fonctionne assez bien, malheureusement bien, si je fais un autre lien à l'intérieur que pour modifier le contenu Retour au premier fichier, le serveur est bloqué dans une boucle infinie et se bloque. J'essaye vraiment de trouver un moyen de changer dynamiquement le contenu, et de récupérer ce contenu à partir d'un fichier utilisant PHP. Si ma façon d'aborder cette question est complètement ludique, j'apprécie les suggestions.

Answer 1

Je pense que la meilleure et la plus simple est d'utiliser jQuery:

<script type="text/javascript"> 
$('#addContent').click(function(){ 
    $("#maincontent").load("file.php"); 
    return false; 
}); 
</script> 

<a href="#" id="addContent">Open File</a> 
<div id="maincontent"></div> 

Ce script va charger le contenu de file.php dans div sélectionné à l'aide appel ajax.

Answer 2

Cela ressemble à un bon endroit pour la fonction jQuery's load(). Donnez simplement un ID au div, ajoutez un événement click au lien et demandez à l'événement de charger le contenu de votre script php dans le div. Peut-être ajouter une classe (par exemple, 'mise à jour') à la div lorsque vous chargez les nouvelles données. De cette façon, votre événement click peut vérifier ('. Uploaded') sur le div et le réactiver quand le lien est cliqué à nouveau.

Answer 3

Placez les divs dans #maincontent qui contiennent le contenu différent que vous voulez. Donnez les ID divs. Lorsque le lien est cliqué masquer/afficher le contenu approprié

Ceci est un fil similaire: Tabbing in PHP?

Answer 4

Tout d'abord, je vous suggère de ne pas construire le gestionnaire d'événements comme ça. Pour une chose, vous devrez être très prudent pour vous échapper correctement le contenu. Je le ferais de cette façon:

<div id="content1"> 
<?php include 'file1.php'; ?> 
</div> 
<div id="content2"> 
<?php include 'file2.php'; ?> 
</div> 

puis de manipuler ceux avec Javascript. Vous pouvez définir innerHTML ou simplement masquer/afficher les divs correspondants. Donc:

<script type="text/javascript"> 
var content = 1; 

function swap_content() { 
    document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML 
    if (content == 1) { 
    content = 2; 
    } else { 
    content = 1; 
    } 
} 
</script> 
<a href="#" onclick="swap_content();">Open File</a> 

Alternativement, vous pouvez simplement les masquer/montrer comme il convient plutôt que de copier du contenu. Enfin, bien que cela ne soit pas obligatoire, c'est beaucoup plus trivial à faire dans une bibliothèque Javascript comme jQuery.

Answer 5

Pour moi, il semble que vous devriez utiliser AJAX. Sur le clickevent (que vous ne devriez pas non plus lier avec du code inline), vous devez plutôt charger le contenu avec une requête XHR.

Pour vous faciliter la vie, je vous recommande de regarder une bibliothèque JavaScript, où mon favori personnel serait jQuery (www.jquery.com). Pour atteindre ce que vous essayez de faire, vous feriez simplement:

$('#id_to_the_a_tag').click(function() { 
    $("#maincontent").load("file.php"); 
    return: false; 
});