Partage

Modifier un enregistrement dans la même page

10 janvier 2018 à 13:20:46

Bonjour,

J'ai créé une boucle en php pour afficher une liste des jours fériés de la base de donnée, voir le mon code

<?php foreach($jours as $jour): ?>
<a href="#" data-toggle="modal"  data-target="#edit-day"> <div class="external-event bg-success" data-class="bg-success">
<i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i><?php  echo($jour['titre']);?>

                                                        </div> </a>
<?php endforeach; ?>

Quand je clique sur un jour de ma liste une pup up s'affiche dans la même page avec un petit formulaire de deux champs qui permet dele modifier ou le supprimer je ne voulais pas l'afficher dans une autre page, alors là je trouve le problème pour récupérer l'id de la journée qu'on a cliqué sur elle pour la modifier sur ma base de données, je ne sais pas encore utiliser Ajax, et je ne sais pas si ça sera la solution dans mon cas ? J'aimerais savoir s'il y avait une autre façon pour gérer ça ?

Merci.

-
Edité par Mariyam@chemrah 10 janvier 2018 à 13:24:08

cernkor

10 janvier 2018 à 15:00:50

Bonjour,

1. Ton code est très mal indenté, c'est illisible
2. Ce que tu écris n'a pas de sens.

Si ta question est : Est-ce que je peux modifier ou supprimer mon événement sans recharger de page ?
La réponse est oui. Le plus simple étant de le gérer en Ajax. Tu peux aussi utiliser les Websockets en fonction de ce que tu as besoin de faire derrière.

Mariyam@chemrah

10 janvier 2018 à 15:53:23

Bonjour,

Merci de ta réponse, ce n'est pas ça du tout ma question, je voudrais récupérer l'id de l’élément que je veux modifier dans la liste des jours affichés par cette boucle, quand je clique sur un jour, comment je peux récupérer l'id de ce jour dans la base de données, d'habitude j'envoie l'id de cet élément par l'URL mais dans mon cas je suis obligée de le modifier dans la même page dans un formulaire qui s’affiche sur un pop up en cliquant sur l’élément,

PS: je ne cherche pas un code tout fait mais de me montrer le chemin pour le faire car je suis débutante et je ne connais pas toutes les technologies surtout Ajax

Merci,

-
Edité par Mariyam@chemrah 10 janvier 2018 à 15:54:43

Benzouye

10 janvier 2018 à 16:32:07

Bonjour,

Je déplace dans le fourm JavaScript, visiblement tu vas avoir besoin de AJAX.

L'idée de départ c'est quand même de mettre dans ta <div> l'id que tu souhaites passer à ta modale (pop up).

Exemple :

<?php
	foreach( $jours as $jour ) {
?>
	<a href="#" data-toggle="modal"  data-target="#edit-day" data-id="<?php echo($jour['id']);?>">
		<div class="external-event bg-success" data-class="bg-success">
			<br>
			<i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i>
			<?php echo($jour['titre']);?>
		</div>
	</a>
<?php
	}
?>

Ensuite il va te falloir une fonction JavaScript qui écoute le clic sur les balises <a> générées par PHP.

Dans cette fonction tu pourras récupérer la valeur de data-id et l'utiliser pour alimenter la modale ...

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Mariyam@chemrah

10 janvier 2018 à 18:20:27

Bonjour,

Merci pour ta réponse, donc aucune solution sans passer par Ajax :/ Je dois oser à l'utiliser

Benzouye

11 janvier 2018 à 9:21:06

merychemrah a écrit:

aucune solution sans passer par Ajax

Si, mais il faudrait recharger la page pour exécuter un script PHP différent ... Ce que tu ne semble pas vouloir ...

Essaye de bien comprendre la différence entre "côté client (ou navigateur)" et "côté serveur" ...

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Mariyam@chemrah

11 janvier 2018 à 21:03:11

D'accord, mais pas forcément de ne pas recharger la page mais justement, je ne peux pas récupérer l'id de cet élément en cliquant dessus, je sais pas comment expliquer ça je te mets le code de toute la page espérant que tu comprendras malgré que mon code pas du tout propre

<?php 
 include 'lib/includes.php';
 $select=$db->query("SELECT * FROM jours_feries");
 $jours=$select->fetchAll();

  if(!empty($_POST['titre']) && !empty($_POST['date']) ){



  $titre = $db->quote($_POST['titre']);
  $date = $db->quote($_POST['date']);

       /**
  * MODIFICATION DE actualites
  **/

    $db->query("INSERT INTO  jours_feries SET titre = $titre, date_jour = $date");
    header('location:'. WEBROOT .'calendar.php');
      die();


}
 
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">
        <!-- App title -->
        <title>GSIMT - FGP</title>

        <!--calendar css-->
        <link href="plugins/fullcalendar/css/fullcalendar.min.css" rel="stylesheet" />
          <link href="plugins/clockpicker/css/bootstrap-clockpicker.min.css" rel="stylesheet">
        <link href="plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
        <!-- App css -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/components.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="plugins/switchery/switchery.min.css">

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <?php 
           include 'includes/top_bar.php';
           include 'includes/left_bar.php';
 

            ?>
            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">


                        <div class="row">
                            <div class="col-xs-12">
                                <div class="page-title-box">
                                    <h4 class="page-title">Calendrier </h4>
                                    <ol class="breadcrumb p-0 m-0">
                                        <li>
                                            <a href="index.php"><i class="glyphicon glyphicon-home"></i> Accueil</a>
                                        </li>
                                        <li class="active">
                                            Calendrier
                                        </li>
                                    </ol>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->



                        <div class="row">
                            <div class="col-lg-12">

                                <div class="card-box">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="row">
                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <a href="#" data-toggle="modal" data-target="#add-category" class="btn btn-lg btn-danger btn-block waves-effect m-t-20 waves-light">
                                                        <i class="fa fa-plus"></i> Créer un nouveau
                                                     </a>
                                                        <div id="external-events" class="m-t-20">
                                                        <br>
                                                        <p class="text-muted">Les jours firiés</p>

                                                        <?php foreach($jours as $jour): ?>
                                                       <a href="id=<?php echo($jour['id_jour']);?>" data-toggle="modal" data-target="#edit-category"> <div class="external-event bg-success" data-class="bg-success">
                                                       <i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i><?php  echo($jour['titre']);?>

                                                        </div> </a>
                                                      <?php endforeach; ?>
                                                    </div>

                                                    

                                                </div>
                                            </div>
                                        </div> <!-- end col-->
                                        <div class="col-md-9">
                                            <div id="calendar"></div>
                                        </div> <!-- end col -->
                                    </div>  <!-- end row -->
                                </div>

                          

                                <!-- Modal Add Category -->
                                <div class="modal fade none-border" id="add-category">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title">Ajouter un jour férié</h4>

                                            </div>

                                            <div class="modal-body p-20">
                                                  <form class="form-horizontal" action="#" method="post">

                                          <div class="row">
                                                        <div class="col-md-6">
                                                            <label class="control-label">Titre</label>
                                                            <input class="form-control form-white" placeholder="Enter name" type="text" name="titre"/>
                                                        </div>
                                                        <div class="col-md-6">
                                                             <div class="form-group">
                                                                    <label> Date</label>
                                                                    <div>
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose" name="date">
                                                                            <span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                                                        </div><!-- input-group -->
                                                                    </div>
                                                                </div>
                                                        </div>
                                                    </div>
                                      

                                        <div class="form-group account-btn text-center m-t-10">
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                <button type="submit" class="btn btn-danger"  name="submit">Enregistrer</button>
                                            </div>
                                        </div>

                                    </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- END MODAL -->
                            </div>

                                                      <!-- Modal Add Category -->
                                <div class="modal fade none-border" id="edit-category">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title">Modification</h4>

                                            </div>

                                            <div class="modal-body p-20">
                                                  <form class="form-horizontal" action="#" method="post">

                                          <div class="row">
                                                        <div class="col-md-6">
                                                            <label class="control-label">Titre</label>
                                                            <input class="form-control form-white" placeholder="Enter name" type="text" name="titre"/>
                                                        </div>
                                                        <div class="col-md-6">
                                                             <div class="form-group">
                                                                    <label> Date</label>
                                                                    <div>
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose" name="date">
                                                                            <span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                                                        </div><!-- input-group -->
                                                                    </div>
                                                                </div>
                                                        </div>
                                                    </div>
                                      

                                        <div class="form-group account-btn text-center m-t-10">
                                            <div class="modal-footer">
                                                <button type="submit" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                <button type="submit" class="btn btn-danger"  name="submit">Enregistrer</button>
                                            </div>
                                        </div>

                                    </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- END MODAL -->
                            </div>
                                <!-- END MODAL -->
                            </div>
                            <!-- end col-12 -->
                        </div> <!-- end row -->


                    </div> <!-- container -->

                </div> <!-- content -->

                <footer class="footer text-right">
                    2017 © GSIMT.
                </footer>

            </div>

J'ai passé toute la journée à comprendre comment utiliser Ajax pour l'integrer mais j'ai pas pu l'utiliser surtout je suis pressée par le temps s'il y a une solution sans utiliser ajax mais en travaillant toujours sur la meme page

-
Edité par Mariyam@chemrah 11 janvier 2018 à 21:12:23

Benzouye

12 janvier 2018 à 8:58:15

La balise <a> doit comporter un lien vers une page avec une variable GET qui contient l'id du jour férié. Là, l'attribut href de ta balise <a> vaut "id=X" ... cela ne t'enverra nulle part en cliquant dessus ...

L'idée c'est d'avoir un fichier PHP comme celui que tu as actuellement, appelons le calendrier.php, puis un autre fichier PHP pour afficher un jour ferié, appelons le ferie.php.

Dans calendrier.php, ta balise <a> serait :

<a href="ferie.php?id=<?php echo($jour['id_jour']);?>">
    <div class="external-event bg-success" data-class="bg-success">
        <i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i> <?php echo($jour['titre']);?>
    </div>
</a>

Et dans le fichier ferie.php, un truc du genre :

<?php
	if( isset( $_GET['id'] ) ) {
		include 'lib/includes.php';
		$select=$db->prepare("SELECT * FROM jours_feries WHERE id = ?");
		$select->execute( array( intval($_GET['id']) );
		$ferie=$select->fetch();
		$select->closeCursor();
		
		if( $ferie ) {
			// On affiche ce que l'on veut
			var_dump( $ferie );
		} else {
?>
		<p>Aucun jour férié ne correspond à l'id demandé.</p>
<?php
		}
		
	} else {
?>
		<p>Aucun jour spécifié.</p>
<?php
	}

Je te conseille fortement la lecture du cours PHP et notamment comment passer des variables de page en page :

https://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql/transmettre-des-donnees-avec-l-url

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Mariyam@chemrah

12 janvier 2018 à 9:45:20

merychemrah a écrit:

Bonjour,

Merci beaucoup Benzouye, mais moi je veux garder (modal ) qui s’affiche sur la même page quand je clique sur
 <a href="ferie.php?id=<?php echo($jour['id_jour']);?>" data-toggle="modal" data-target="#edit-category">
 <div class="external-event bg-success" data-class="bg-success">
 <i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i><?php  echo($jour['titre']);?>
 </div></a>  
C'est ça qui m'a créé le problème, mais je prends ta première solution avec Ajax, normalement c'est moi qui n'arrive pas à exprimer bien mon problème, merci de votre aide

-
Edité par merychemrah il y a moins de 5s

-
Edité par Mariyam@chemrah 12 janvier 2018 à 10:23:30

Benzouye

12 janvier 2018 à 10:46:35

merychemrah a écrit:

je veux garder (modal ) qui s’affiche sur la même page quand je clique

Donc oui, il te faut utiliser AJAX.

Benzouye a écrit:

L'idée de départ c'est quand même de mettre dans ta <div> l'id que tu souhaites passer à ta modale (pop up).

Exemple :
<?php
	foreach( $jours as $jour ) {
?>
	<a href="#" data-toggle="modal"  data-target="#edit-day" data-id="<?php echo($jour['id']);?>">
		<div class="external-event bg-success" data-class="bg-success">
			<br>
			<i class="mdi mdi-checkbox-blank-circle m-r-10 vertical-middle"></i>
			<?php echo($jour['titre']);?>
		</div>
	</a>
<?php
	}
?>
Ensuite il va te falloir une fonction JavaScript qui écoute le clic sur les balises <a> générées par PHP.

Dans cette fonction tu pourras récupérer la valeur de data-id et l'utiliser pour alimenter la modale ...

Je te conseille la lecture du cours jQuery et sa partie AJAX : https://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec-jquery/premiers-pas-avec-ajax

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Mariyam@chemrah

12 janvier 2018 à 12:40:26

D'accord merci

Modifier un enregistrement dans la même page

Supprimer

Modérer

Signaler le message aux modérateurs