11540 sujets

JavaScript, DOM et API Web HTML5

Fonction onclick

Bonjour,

dans l'une de mes pages d'administration de bdd, j'ai un tableau dans lequel s'affiche les info.
Dans la la première colonne, il y a écris "actif" ou "old". J'aimerais faire en sorte de pouvoir changé spontanément ce statue directement dans le tableau.

comme suit:
Quand je clique sur le mot "actif" ou "old", un formulaire apparait dans la colonne à la place. Je sélectionne le nouveau statue plus click sur ok, le nouveau statue est mis à jours dans la bdd et s'affiche à nouveau dans la colonne.

Pour l'instant je n'arrive pas à faire apparaître/disparaître le formulaire.

Voici mon code:
<script type="text/javascript">
function updateStatue(id) {
	document.getElementById(upStatue).style.display = 'block';
	document.getElementById(action).style.display = 'none';
}
</script>

<a id="action" onclick="updateStatue(this.value);return false;"><?php echo $v['statue']; ?></a>
<?php
if (empty($_POST['ok'])){
	if($requete = mysql_query("SELECT statue FROM software WHERE id='$id'") or die("82"/*mysql_error()*/)){
		while($modif = mysql_fetch_array($requete)){
			$etat = $modif['statue'];
		}
	}
	?>
<form action="software_admin2.php?id=<?php echo $id;?>" method="post" name="form" id="upStatue" onsubmit="return verif()">
        <select name="statue" id="statue">
                  <option value="actif">actif</option>
                  <option value="old">old</option>
                  <option value="test">test</option>
        </select>
        <input name="ok" type="submit" value="OK" />
</form>
	<?php
	}
	else{
		$statue = trim($_POST['statue']);
								
		if($requete = mysql_query("UPDATE software SET statue = '$statue' WHERE id='$id'")or die("101"/*mysql_error()*/)){
		?>
<a href="#"><?php echo $v['statue']; ?></a>
	<?php
	}
}
?>
Modérateur
Salut,

Ce que j'ai compris, tu essaies de faire une push/pull sur un bouton. C'est simple à faire :


window.onload = function(){
	var 	statutBtnOldActif = false,
		btnAction = document.getElementById('action');
		
	btnAction.onclick = function(){
		if(statutBtnOldActif == false){
			statutBtnOldActif = true;
			//fait ceci
		}else{
			statutBtnOldActif = false;
			//fait cela
		}
		return false; //bloque comportement browser
	}
}

Modifié par niuxe (04 Jan 2013 - 20:27)
J'ai fait quelque recherche à propos des push/pull... push, si j'ai bien compris, ne correspond pas à ce que je cherche à faire.

Je me suis peut-être mal exprimé. quand je fait ma sélection, le statue doit être REMPLACÉ par le nouveau qui a été cliqué dans la bdd.
Modifié par juliesunset (04 Jan 2013 - 22:08)
Modérateur
Si j'ai bien compris,

Quand tu veux appuyer sur le btn action, un formulaire apparait. Quand tu rappuies sur le même bouton, le formulaire disparait.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
    <p><a href="#" id="Action">plier/déplier</a></p>
    <form action="#" method="post" id="UnFormulaire">
        <fieldset>
            <legend>un formulaire</legend>
            <input type="texte" name="unChamp" />
            <button type="submit">envoyer</button>
        </fieldset>
    </form>
    <script type="text/javascript">
        window.onload = function(){
                var 	statutBtnOldActif = true,
                        btnAction = document.getElementById('Action'),
                        UnFormulaire = document.getElementById('UnFormulaire');
                if(UnFormulaire){
                    UnFormulaire.style.display = 'none';        
                    btnAction.onclick = function(){
                            if(statutBtnOldActif == false){
                                    statutBtnOldActif = true;
                                    UnFormulaire.style.display = 'none';
                            }else{
                                    statutBtnOldActif = false;
                                    UnFormulaire.style.display = 'block';
                            }
                            return false; //bloque comportement browser
                    }
                }
        }
    </script>
</body>
</html>

Modifié par niuxe (05 Jan 2013 - 00:10)
Modérateur
Je comprends pas bien ta mise en page. Je ne vois pas l’intérêt d'un push/pull de toute manière et le système de formulaire. Il y a plus simple. 



<!-- mysql_connect, mysql_query .... --> 

<table summary="explication du tableau">
    <caption>descriptif du tableau</caption>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>action</th>
    </tr>
    <?php while($data = mysql_fetch_assoc($query)): ?>
    <tr>
        <td><?php echo $data['id'] ?></td>
        <td><?php echo $data['name'] ?></td>
        <td><a href="actionChangementStatus.php?id=<?php echo $data['id']?>&status=<?php echo ($data['status'] == 'actif')? 0 : 1?>"><?php echo ($data['status'] == 'actif')? 'actif' : 'old' ?></a></td>
    </tr>
    <?php endwhile; ?>
</table>

Je t'invite à bien lire une des dernières lignes. Là où il y a une ancre (a) afin de comprendre où je veux en venir. Il y a peut être une syntaxe que tu ne comprends pas. C'est la conditionnelle ternaire :

//echo (a == true)? "c'est vrai" : "c'est faux" ;
//cela équivaut à 
if(a == true){
    echo "c'est vrai";
}else{
    echo "c'est faux";
}


D'une manière générale, ce sujet ne devrait pas être dans le forum JS puisque ce n'est pas la peine de faire de l'AJAX.
Modifié par niuxe (05 Jan 2013 - 00:51)
En fait c'est pas un bouton, mais bien un lien qui fais apparaître un formulaire... et pour la mise en page, si je simplifie ça donne ça:
<a>actif</a>

Quand je clique dessus ça fais apparaître ce formulaire à la place (le lien disparaît pour laisser la place au formulaire)
<form action="" method="post" name="form" id="upStatue">
      <select name="statue" id="statue">
             <option value="actif">actif</option>
             <option value="old">old</option>
             <option value="test">test</option>
      </select>
      <input name="ok" type="submit" value="OK" />
</form>

Et quand je clique sur le bouton "ok" ok du formulaire, le formulaire disparaît et le lien s'affiche à nouveau.

Je regarde plus en profondeur ce que tu m'a donné. J'ai du mal avec le js...

EDIT: Si ce n'est pas la peine de faire du Ajax, alors qu'est-ce que je devrais utiliser à la place?
Modifié par juliesunset (07 Jan 2013 - 15:22)
OK, je commence à comprendre un peu mieux.
Donc là ça fonctionne, mais en partie seulement. Quand je clique sur le lien ça e formulaire apparaît à la place comme je veux, Quand je clique sur le "ok" du formulaire, le lien réapparaît comme voulu, cependant je ne peu refaire l'action.
En plus ça ne fonctionne que sur une seule ligne, pas toutes les lignes du tableau... Smiley confus

Revoici mon code:
window.onload = function(){
	var 	statutBtnOldActif = true,
		btnAction = document.getElementById('action'),
		upStatue = document.getElementById('upStatue');
	if(upStatue){
		upStatue.style.display = 'none';        
		btnAction.onclick = function(){
			if(statutBtnOldActif == false){
				statutBtnOldActif = true;
				upStatue.style.display = 'none';
			}else{
				statutBtnOldActif = false;
				btnAction.style.display = 'none';
				upStatue.style.display = 'block';
			}
			return false; //bloque comportement browser
		}
	}
}

<a id="action"><?php echo $v['statue']; ?></a>
<?php
if (empty($_POST['ok'])){
	if($requete = mysql_query("SELECT statue FROM software WHERE id='$id'") or die(mysql_error())){
		while($modif = mysql_fetch_array($requete)){
			$etat = $modif['statue'];
		}
	}
	?>
<form  method="post" name="form" id="upStatue">
	<select name="statue" id="statue">
		<option value="actif">actif</option>
		<option value="old">old</option>
		<option value="test">test</option>
	</select>
        <input name="ok" type="submit" value="OK" />
</form>
	<?php
	}
	else{
		$statue = trim($_POST['statue']);
								
		if($requete = mysql_query("UPDATE software SET statue = '$statue' WHERE id='$id'")or die(mysql_error())){
			?>
			<?php
		}
	}
?>
Je sèche toujours...

Bon ce que j'ai remarqué c'est que quand je clique sur le "ok" du formulaire, ce dernier disparaît complètement, c'est-à-dire qu'il n'existe plus après. D'où le fait que je ne puisse faire l’opération qu'une seule fois.
Modérateur
Bonsoir Juliesunset,

J'ai à peu près cerné ton souci. Est ce que tu as saisie ce que j'ai voulu te dire dans cette réponse ?

Je me doutais bien que tu arrivais sur une impasse vu ta problématique. Que l'on soit d'accord :
Tu es sur une page où sont répertoriés le contenu d'une table mysql. Dans cette table, il y a un champ qui peut être dans plusieurs état. A priori, j'en ai dénombré 2 puisque le 3e n'est que test.

S'il y a que 2 états (old/actif), je te recommande de suivre mon idée.

S'il y a plusieurs états, alors oui on peut inclure un formulaire dans chaque fiche. Ce qui amène à ce type de code :

<table summary="explication du tableau" id="GridView">
    <caption>descriptif du tableau</caption>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>action</th>
    </tr>
    <?php while($data = mysql_fetch_assoc($query)): ?>
    <tr>
        <td><?php echo $data['id'] ?></td>
        <td><?php echo $data['name'] ?></td>
        <td>
            <a href="#">changement status</a>
            <form action="changementEtat.php" method="post">
                <fieldset>
                    <legend>changement de status de <?php echo $data['name'] ?></legend>
                    <ul>
                        <li>
                            <label for="status">
                                <select name="status" id="status">
                                    <option value="actif">actif</option>
                                    <option value="old">old</option>
                                    <option value="test">test</option>
                                </select>
                            </label>
                        </li>
                        <li><input type="hidden" name="idFiche" value="<?php echo $data['id'] ?>" /><input name="ok" type="submit" value="OK" /></li>
                    </ul>
                </fieldset>
            </form>
        </td>
    </tr>
    <?php endwhile; ?>
</table>



[i]
<script type="text/javascript">
    window.onload = function(){
        var elGridView = document.getElementById('GridView'),
            elAncreGridView = elGridView.getElementsByTagName('a'),
            elFormGridView = elGridView.getElementsByTagName('form');
            
            if(elGridView){
                for (var i = 0; i < elAncreGridView.length; i++) {
                    elFormGridView[i].style.display = "none";
                    
                    elAncreGridView[i].onclick = function(){
                        var elCurrentForm = this.parentNode.getElementsByTagName('form')[0];
                        if(elCurrentForm.style.display == 'block'){ 
                                elCurrentForm.style.display = 'none';
                        }else{
                                elCurrentForm.style.display = 'block';
                        }
                        return false; //bloque comportement browser
                    }
                }
            }
    }
</script>

code fait de tête. Je peux m'être trompé [/i] [/i][/i]
Modifié par niuxe (09 Jan 2013 - 21:48)
Modérateur
Pour illustrer, l'exemple JS :

[i]
<!-- mysql_connect, mysql_query et meme mysql_fetch_assoc .... --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
<table summary="explication du tableau" id="GridView">
    <caption>descriptif du tableau</caption>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>action</th>
    </tr>
    <?php //while($data = mysql_fetch_assoc($query)): ?>
    <!--<tr>
        <td><?php //echo $data['id'] ?></td>
        <td><?php //echo $data['name'] ?></td>
        <td>
            <a href="#">changement status</a>
            <form action="changementEtat.php" method="post">
                <fieldset>
                    <legend>changement de status de <?php //echo $data['name'] ?></legend>
                    <ul>
                        <li>
                            <label for="status">
                                <select name="status" id="status">
                                    <option value="actif">actif</option>
                                    <option value="old">old</option>
                                    <option value="test">test</option>
                                </select>
                            </label>
                        </li>
                        <li><input type="hidden" name="idFiche" value="<?php //echo $data['id'] ?>" /><input name="ok" type="submit" value="OK" /></li>
                    </ul>
                </fieldset>
            </form>
        </td>
    </tr>-->
    <?php //endwhile; ?>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>
            <a href="#">bla1</a>
            <form action="#">
                <fieldset>
                    <legend>bla1</legend>
                </fieldset>
            </form>
        </td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>
            <a href="#">bla2</a>
            <form action="#">
                <fieldset>
                    <legend>bla2</legend>
                </fieldset>
            </form>
        </td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>
            <a href="#">bla3</a>
            <form action="#">
                <fieldset>
                    <legend>bla3</legend>
                </fieldset>
            </form>
        </td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>
            <a href="#">bla4</a>
            <form action="#">
                <fieldset>
                    <legend>bla4</legend>
                </fieldset>
            </form>
        </td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>
            <a href="#">bla5</a>
            <form action="#">
                <fieldset>
                    <legend>bla5</legend>
                </fieldset>
            </form>
        </td>
    </tr>
</table>
<script type="text/javascript">
    window.onload = function(){
        var elGridView = document.getElementById('GridView'),
            elAncreGridView = elGridView.getElementsByTagName('a'),
            elFormGridView = elGridView.getElementsByTagName('form');
            
            if(elGridView){
                for (var i = 0; i < elAncreGridView.length; i++) {
                    elFormGridView[i].style.display = "none";
                    
                    elAncreGridView[i].onclick = function(){
                        var elCurrentForm = this.parentNode.getElementsByTagName('form')[0];
                        if(elCurrentForm.style.display == 'block'){ 
                                elCurrentForm.style.display = 'none';
                        }else{
                                elCurrentForm.style.display = 'block';
                        }
                        return false; //bloque comportement browser
                    }
                }
            }
    }
</script>
</body>
</html>

en Jcuicui, c'est plus simple :

(function($){
        var elGridView = $('#GridView');
        
        if(elGridView.length > 0){
            $('form',elGridView).hide();
            $('a',elGridView).click(function(e){
                var elCurrentForm = $(this).next();
                if(elCurrentForm.is(':visible')){
                    elCurrentForm.hide();
                }else{
                    elCurrentForm.show();
                }
                e.preventDefault();
            });
        }
    })(jQuery);


Cela fait à peu près deux jours que je voulais te répondre. Mais comme je suis occuppé et crevé en ce moment, pas facile. Smiley ohwell [/i][/i] [/i]
Modifié par niuxe (09 Jan 2013 - 22:04)
Modérateur
Une dernière petite chose, lis bien mes deux derniers messages (JS + PHP) afin de bien comprendre où je veux en venir. Smiley cligne
Merci pour ta réponse Niuxe!
Comme je disait plus haut, je commence tout juste à saisir, mais c'est pas encore ça. Dès que ça devient un peu plus complexe je me perd. J'ai du mal avec js...

Donc là je vais lire attentivement ce que tu m'as donné. Mais avant j'ai un problème de jointure en php à régler qui est plus urgent.

J'avais effectivement pensé utiliser jquery à la place. Je verrais.


niuxe a écrit :
Cela fait à peu près deux jours que je voulais te répondre. Mais comme je suis occuppé et crevé en ce moment, pas facile. ohwell

T'inquiète pour le délais de réponse, moi j'ai 2 enfants en bas de 2 ans à la maison, une fois les 2 couché, je suis lessivé! Donc je peux comprendre.
Modérateur
juliesunset a écrit :
J'avais effectivement pensé utiliser jquery à la place. Je verrais.

S'il y a d'autres scripts en jcuicui, y'a plus qu'à reprendre mon code.
Sujet clos
Aller à