IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Déplacement d'élément avec jQuery


Sujet :

jQuery

  1. #1
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Juin 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Aube (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2013
    Messages : 10
    Par défaut Déplacement d'élément avec jQuery
    Bonjour,
    J'ai une petite question, voilà je fais un planning où les événements sont déplaçables lorsqu'ils ont l'id "drag". Lorsqu'on double-clique sur un jour du planning, un nouvel événement s'insère, on peut modifier sa taille, et il faut ensuite appuyer sur un bouton pour l'insérer dans ma base de données. Lorsqu'un événement est dans la base de données, évidemment si l'utilisateur reviens sur la page, l’événement s'affichera.

    Maintenant imaginons que, après avoir ajouté cet événement à la base de données, l'utilisateur veule changer le jour de cet événement et donc le déplace avec sa souris..

    Là est mon problème, j'arrive à mettre à jour ma base de données si l'utilisateur change la durée de l’événement (en le redimensionnant) mais pas s'il le déplace sur un autre jour, même en faisant un alert du jour de l'evenement, il garde en mémoire le jour où on l'a inséré. J'aimerais savoir si c'est possible déjà, et si oui auriez vous une piste à me donner?

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    les événements sont déplaçables lorsqu'ils ont l'id "drag".
    Déjà, sans voir ton code, cette phrase pose un problème : un id doit être unique dans la page !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Juin 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Aube (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2013
    Messages : 10
    Par défaut
    Merci d'avoir pris le temps de répondre,
    Je me suis trompé c'est la classe de l'élément qui est nommé 'drag' ..

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, mais c'est tout ce que je peux te dire sans voir ton code...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Juin 2013
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 31
    Localisation : France, Aube (Champagne Ardenne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2013
    Messages : 10
    Par défaut
    Bah mon code est super long et je suis sure qu'il ferait peur à n'importe quelle personne qui s'y connait vu qu'il doit etre bourré de chose a ne pas faire lorsque l'on code, fin je peux vous montrer quelque petit bout qui semble important haha.

    Donc mon tableau avec une requete pour le remplir en fonction de ma bdd
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    $sql = "SELECT * FROM technicien ";
    	$sql = $sql . "LEFT JOIN (SELECT * FROM deplacement WHERE (mois = $mois AND annee = $annee)) AS dep ";
    	$sql = $sql . "ON technicien.num = dep.numTech "; // Jointure externe avec alias
    	$sql = $sql . "ORDER BY technicien.nomTech, jour;";  // Tri par technicien (important)
    	$resultat = $dbh->query($sql);
    	$row=$resultat->fetch();
     
    	// Constitution du tableau pret a etre affiché
    	$tabResultat = array();
    	$i = -1;
    	$tech = '';
    	while ($row) {
    		if ($tech != $row['nomTech']) {  // Changement de technicien
    			$i++;
    			$tech = $row['nomTech'];
    			$tabResultat[$i] = array($nbJourMois +1);
    			// Initialisation de la ligne
    			for ($j = 0; $j <= $nbJourMois; $j++) {
    				$tabResultat[$i][$j] = '';
    			}
    		}
    		$tabResultat[$i][0] = $tech;
    		$j = $row['jour'];
    		$tabResultat[$i][$j] = $row['type'];
    		$row=$resultat->fetch(); // lecture suivante
    	}
    	// Parcours du tableau et affichage
    	echo "<table id='tableau'>";
    	echo "<caption>Planning du mois de $moisS</caption>";
    	echo "<thead>";
    	// Affichage des nos de semaine
    	echo "<tr><th></th>";
    	for ($i=1; $i<=$nbJourMois; $i++) {
    		$dj = $mois . "/" . $i . "/" . $annee;
    		$noSem = date('W', strtotime($dj));
    		echo "<th>" . $noSem . "</th>";
    	}
    	echo "</tr>";
    	// Affichage des jours du mois
    	echo "<tr><th></th>";
    	for ($i=1; $i<=$nbJourMois; $i++) {
    		echo ("<th class='jour'>$i</th>");
    	}
    	echo "</tr></thead><tbody>";
    	$nbLigne = sizeof($tabResultat);
    	for ($i = 0; $i < $nbLigne ; $i++) {
    		$nom=$tabResultat[$i][0];
    		echo "<tr id='$nom'>";
    		for ($j = 0; $j <= $nbJourMois; $j++) {
    			if ($j == 0) {
    				echo "<td id='technicien'>" . $tabResultat[$i][$j] . "</td>";
    			}
    			else {
    				echo("<td id='$j' class='jour'>");
    				if ($tabResultat[$i][$j] <> '') {
    					$sql = "SELECT nbJour from deplacement where jour = '$j';";  // Tri par technicien (important)
    					$resultat = $dbh->query($sql);
    					$row=$resultat->fetch();
    					$nbJ = $row['nbJour'];
    					$taille = 25 + (28 * ($nbJ-1));
    					$tailleS = strval($taille);
    					$taillePx = $tailleS.'px';
    					$type = $tabResultat[$i][$j];
    					echo ("<div id ='$type' class='drag' style='width:$taillePx;'></div>");
    				}	
    				echo "</td>";
    			}
    		}
    		echo "</tr>";
    	}
    	echo "</tbody></table>
    	<input type ='submit' id ='btn' value ='Mettre à jour les déplacements'></input>";

    Un evenement est inséré avec ce bout de code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    $('.jour').dblclick(function(){
    	abs = prompt('Quel est le type d\'absence du technicien? Veuillez ecrire en majuscule');
    	switch (abs) {	
    		case 'SAVF' :
    			$(this).append($('<div id ="SAVF" class="drag"></div>'));
    			$('.drag').draggable({
    				revert : 'invalid',
    				grid : [28,28]
    			});
     
    			$('.drag').resizable({
    				minWidth : 25,
    				maxWidth : 865,
    				minHeight : 25,
    				maxHeight : 300
    			});
    			cpt2=cpt2+1;
    		break;
    		case 'CONGE' :
    			$(this).append($('<div id ="CONGE" class="drag"></div>'));
    			$('.drag').draggable({
    				revert : 'invalid',
    				grid : [28,28]
    			});
     
    			$('.drag').resizable({
    				minWidth : 25,
    				maxWidth : 865,
    				minHeight : 25,
    				maxHeight : 300
    			});
    			cpt2=cpt2+1;
    		break;
    }
    });
    et donc ma bdd est mise à jour grace a ce bout de code là
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    $('#btn').live('click', function(){
    	$('.drag').each(function(i){
    		nbJ = (($(this).width()-25) / 28)+1;  
    		var moisS = $('#ldrMois option:selected').val();
    		var mois = parseInt(moisS);
    		var type = $(this).attr('id');
    		var lesCases = $(this).parent();
    		var lesJourJ = lesCases.attr('id');
    		var lesLigneJ = lesCases.parent();
    		var lesTechJ = lesLigneJ.attr('id');
    		var jourJF = parseInt(lesJourJ)+nbJ-1;
     
      		$.post(
    			'postBDD.php',
    			{ jour : lesJourJ,
    			mois : mois,
    			tech : lesTechJ,
    			type : type,
    			nbJ : nbJ
    			},
    			function(data){
    				alert (data);
    			},
    			'text'
    		); 
    	});
    });
    Voilà le monstre ^^

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 22/04/2013, 12h13
  2. Réponses: 5
    Dernier message: 05/12/2012, 11h50
  3. Récupération d'un élément d'un tableau avec jQuery
    Par aymen8219 dans le forum jQuery
    Réponses: 16
    Dernier message: 22/11/2011, 13h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo