11540 sujets

JavaScript, DOM et API Web HTML5

Modifier le contenu d'une <div>

Bonjour bonjour,

Je ne sais pas si c'est le bon endroit pour poster mon message en tant que débutant en javascript.... Smiley confused

Mais je me permet de créer ce post afin de solliciter votre aide...

Je suis en train de développer une galerie afin d'avoir une liste de tutos qui s'affiche de manière dynamique...
Je m'explique un peu plus en détails et en image.

Tout d'abord voici à quoi ressemble le résultat final :
upload/21216-galerie.jpg

Maintenant je vais vous expliquer ce que c'est en détails.
On a sur la droite les titres de toutes les catégories de logiciels utilisé...
Et sur la gauche les tutos relatif à la catégorie sélectionnée.
J'ai donc tout développer en php et etc. Le tout fonctionne bien pour le moment...

Mais je me heurte maintenant à un problème...
Quand on clic sur le titre d'une des catégories, la div comprenant les tutos doit se rafraichie automatiquement pour afficher les tutos de la catégories sélectionnée.
Enfin, elle doit rafraichir la requête SQL pour aller chercher les données sur la BDD, et ensuite mettre à jour la <div> concernée...

J'ai donc fait pas mal de recherche sur comment rafraichir une div via du javascript. Et j'ai trouver un petit tuto. Ce tuto procédais en gros de cette manière : 
voirlist.js

function voirList(el) {
   
var xhr;
try { xhr = new XMLHttpRequest(); }
catch (e) {
xhr = new ActiveXObject(Microsoft.XMLHTTP);
             }  
 xhr.onreadystatechange = function () {
if (xhr.readyState == 4)
if (xhr.status == 200)
document.getElementById("mydiv").innerHTML=xhr.responseText;
        else
alert(xhr.status);
}

xhr.open('POST', 'ajax.php', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
 xhr.send('ajax=' + el.options[el.selectedIndex].value);
      }

ajax.php

<?php 

if ( isset($_POST['ajax']) ) {
 switch ($_POST['ajax'] ){

case'page 1':include('p1.php');

break;


case'page 2':include('p2.php');

break;


case'page 3':include('p3.php');

break;


case'page 4':include('p4.php');

break;


case'page 5':include('p5.php');

break;


default:include ('p1.php');

break;
   }

   }

?>

index.php
entre les balises <body> et </body> ajouter:

<form action='#' >

  <fieldset>

    <legend>Theme</legend>


    <label for="list">Rubriques</label>

<select id="list" onChange="voirList(this)">

<option value="1" >-------------</option>

 <option value="p1" >Page 1</option>

 <option value="p2" >Page 2</option>

  <option value="p3" >Page 3</option>

  <option value="p4" >Page 4</option>

  <option value="p5" >Page 5</option>

 

</select>

</fieldset>

</form>

et le div qui recevra le texte:

<div id="mydiv"></div>


Je l'ai bien sur un peu remanier car j'ai une liste qui me permet d'afficher tout les titres de mes catégories. Et donc cela ne fonctionne pas du tout...
J'ai donc fait d'autres recherche sur le sujet, regarder un peu si l'on pouvait le faire en JQuerry (je me suis donc renseigné sur les catégories .ajax)...
Je voudrais donc savoir si il y a un moyen plus simple de faire en sorte qu'en cliquant sur le titre de la catégorie la div se refresh directement via la requête SQL associé au titre....

Merci d'avance et bonne journée.
Cordialement BenjH.
En une ligne avec jQuery

$("#dynamicDivId").load('liste.php');


Voila Smiley smile
Modifié par spiral123 (05 Oct 2010 - 15:46)
Hello,

Tout d'abord merci pour ta réponse si rapide Smiley smile

Vu que je début un peu dans ce langage je ne sais pas vraiment où mettre cette ligne de code sans faire de bêtises... Smiley confused
Alors ...
Au onclick de tes liens tu appelles la fonction 

<a href="javascript:;" onclick="loadList()">Theme 1</a>


Et le code javascript 

function loadList(){
$("#dynamicDivId").load('liste.php');
}


Pour élaborer un peu plus, on ajoute un paramètre: 

<a href="javascript:;" onclick="loadList('theme1')">Theme 1</a>



function loadList(theme){
$("#dynamicDivId").load('liste.php?theme'+theme);
}

Modifié par spiral123 (05 Oct 2010 - 16:03)
Cela doit donné quelque chose dans ce style ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Galerie tuto</title>
<meta name="description" content="Site web spécialisé dans le test d'applications iPhone" />
<meta name="keywords"  content="iphone, applications, ipad, test applications" />
<link type="text/css" rel="stylesheet" href="style_tuto_galerie.css" title="styles" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="slider.js"></script>

<script type="text/javascript">
    function loadList(p){ 
        $("#letuto").load('liste.php?p'+p); 
    }
</script>

</head>

<body>
    
<div id="global">
    <div id="haut">
        <h2>LES TUTORIAUX LES PLUS VUS</h2>
    </div>
    <div id="bas">
        <div id="gauche">
            <p class="titre_categories">CATEGORIES</p>
            <form action='#' >
                <fieldset>
                    <ul>
                        <?php
                        $requete="SELECT id_cat, nom, image, home FROM wp_cat_tuto WHERE home='non' ORDER BY id_cat ASC";
                        $req=mysql_query($requete) or die(mysql_error());
                        while($cat=mysql_fetch_assoc($req)){
                        ?>
                        <li style="background:transparent url(image/<?php echo $cat['image']; ?>) no-repeat left top;" value="<?php echo $cat['nom']; ?>" ><a href="javascript:;" id="list" onclick="loadList('p1')"><?php echo $cat['nom']; ?></a></li>
                        <?php } ?>
                        <li class="autres_logiciels" value="Autres logiciels"><a href="javascript:;" id="list" onclick="loadList('p2')">Autres logiciels</a></li>
                    </ul>
                </fieldset>
            </form>
        </div>
        <div id="droite">
            
            <div id="slideshow">  
                <div id="slidesContainer">
                    <?php
                    for($i=0; $i<4; $i++){
                    ?>
                    <div class="slide">  
                        <?php
                        for($j=0; $j<4; $j++){
                        ?>
                        <div class="letuto"></div>
                        <?php } ?>
                    </div>
                    <?php } ?>
                </div>  
            </div>
            <div class="fleches"></div>
        </div>
    </div>
</div>

</body>
</html>


Je suis désolé de t'embêter avec des questions si bête... Smiley confused
Chez toi "letuto" est une classe, l'appel jquery doit donc se faire : 

$(".letuto").load("liste.php?p="+p)
Ah oui en effet...
Et donc si j'ai compris le système de la "chose", on fait véhiculer dans l'url des données que l'on récupère avec un GET sur la page liste.php pour qu'il choisisse quelle requête SQL il va prendre...
Et donc quel contenu il va générer dans la div en question...
Hello,

J'ai une petite question (qui est un peu plus de l'ordre du php)...

Pour récupérer la valeur de "p" que je stock dans l'url, je fait bien un $_GET ??
Dans ce style : 
$categorie = $_GET['p'];


Merci d'avance.
Cordialement BenjH.
Sujet clos
Aller à