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 :

recharger page apres validation formulaire


Sujet :

jQuery

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 616
    Points : 177
    Points
    177
    Par défaut recharger page apres validation formulaire
    Bonsoir

    j'utilise "tabs de jquery"
    dans un de ces tabs j'ai une liste de données et un bouton qui ouvre un "dialog" avec un formulaire
    il permet de rajouter une nouvelle ligne à la liste de données

    une fois le formulaire validé, je voudrais recharger ma page afin de mettre à jour la liste

    voici la fonction jquery que j'utilise :
    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
     
    			$('#dialog_form').dialog({
    					autoOpen: false,
    					width: 600,
    					modal: true,
    					buttons: {
    						'Valider le formulaire': function() {
    							var bValid = true;
    							if (bValid) {
    									var str = $("#formulaire").serialize();
    									$.ajax({
    										type: "POST",
    										url: "traitement_form.php",
    										data: str,
    										success: function(msg){
    											ici le rechargement de la page ???
    										}
     
    									});
    									alert(str);
     
    							$(this).dialog('close');
     
    						}
    					}}
    				});
    Merci de votre aide

  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
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Juste une chose que je ne comprends pas
    L'intérêt d'Ajax est de ne pas avoir à recharger la page... alors pourquoi passer par Ajax si tu veux la recharger ???
    Enfin, au pire :

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 616
    Points : 177
    Points
    177
    Par défaut
    effectivement
    ce que je veux dire c'est recharger par Ajax
    (formulaire validé --> affichage de la liste (requete mysql) actualisée
    ce qui n'est pas le cas actuellement

    donc ce qu'il faut faire dans le page de traitement php :
    - faire un nouveau select
    - le mettre dans une variable
    - envoyer le contenu de cette variable a un element

    sachant que j'affiche avant l'appel ajax :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <tbody>
    <tr>
    <td>'.$data['userName'].'</td>
    <td>'.$data['userRemark'].'</td>
    <td>'.$data['lastLog'].'</td>
    <td><a href="gestion_utilisateur.php?id='.$data['ID'].'">Editer</a></td>
    </tr>
    </tbody>
    il faut donc que la variable contienne ce bout de code ?
    ou bien avec quelquechose comme :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#tabs-2").tabs().load("accueil.php");
    qui m'actualise bien la liste mais qui m'affche sans le css

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    				<li><a href="#tabs-1">Tableau de bord</a></li>
    				<li><a href="#tabs-2">Gestion Admin</a></li>
    				<li><a href="#tabs-3">Interventions</a></li>
                    <li>
                    <form action="home.php" method="POST" name="deconnexion">
                    <input type="hidden" name="action" value="logout">
                    <a href="#" onclick="document.deconnexion.submit()" style="cursor: pointer">Déconnexion</a>
                    </form>
                    </li>
    en plus du code d'origine
    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
    36
    37
    38
    39
    40
    41
    42
     
    <div id="tabs">
    			<ul>
    				<li><a href="#tabs-1">Tableau de bord</a></li>
    				<li><a href="#tabs-2">Gestion Admin</a></li>
    				<li><a href="#tabs-3">Interventions</a></li>
                    <li>
                    <form action="home.php" method="POST" name="deconnexion">
                    <input type="hidden" name="action" value="logout">
                    <a href="#" onclick="document.deconnexion.submit()" style="cursor: pointer">Déconnexion</a>
                    </form>
                    </li>
    			</ul>
    			<div id="tabs-1">Tableau de bord (à definir)</div>
    			<div id="tabs-2">
                    <div id="accordion">
                        <div>
                            <h3><a href="#gest_util">Gestion des utilisateurs</a></h3>
                            <div>
                            <p>Liste des utilisateurs avec possibilité de création/modification/suppression</p>
                            <p><?php include('liste_utilisateur.php')?></p>
                            </div>
                        </div>
                        <div>
                            <h3><a href="#">Gestion des Intervenants</a></h3>
                            <div>ici la liste des Intervenants (societes) avec possibilité de creation/modification/suppression </div>
                        </div>
                        <div>
                            <h3><a href="#">Gestion des sites</a></h3>
                            <div>ici la liste des sites avec possibilité de creation/modification/suppression</div>
                        </div>
                        <div>
                            <h3><a href="#">Gestion des listes</a></h3>
                            <div>ici les listes de type : etages, bloc, loc, sous loc, equipement, disting, etat intervention avec possibilité de creation/modification/suppression </div>
                        </div>
                    </div>
                </div>
    			<div id="tabs-3">
                Liste Interventions affiché sous forme de tableau avec filtre<br />
                Site | Date demande | Date début | Date fin | Etat | Bouton detail
                </div>
    		</div>
    Merci de votre aide

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 616
    Points : 177
    Points
    177
    Par défaut
    un petit up histoire de recadrer le probleme toujours pas résolu

    - page de base accueil.php
    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
    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">Tableau de bord</a></li>
    <li><a href="#tabs-2">Gestion Admin</a></li>
    <ul>
    ...
    <div id="tabs-2">
                    <div id="accordion">
                        <div>
                            <h3><a href="#">Gestion des utilisateurs</a></h3>
                            <div>
                            <p>Liste des utilisateurs avec possibilité de création/modification/suppression</p>
                            <p><?php include('liste_utilisateur.php')?></p>
                            </div>
                        </div>
    ...
    - liste_utilisateur.php
    dans ce fichier qui affiche le resultat d'un select d'une table,
    j'utilise une boite "dialog" pour afficher un formulaire et plus particulierement le "button" de cette boite pour :
    valider le formulaire,
    appeler la fonction ajax qui va tranmettre les valeurs vers un fichier php qui fera l'insertion dans la base,
    fermer la boite de "dialog"

    et voilà où je bloque :
    c'est recharger la page avec le bon tabs afin d'afficher la nouvelle liste actualisée

    j'ai essayé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#tabs").tabs().load("accueil.php");
    qui reload bien la page avec la liste actualisée mais ça me detruit l'affichage du "tabs"

    le script :
    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
     
    $('#dialog_form').dialog({
    					autoOpen: false,
    					width: 600,
    					modal: true,
    					buttons: {
    						'Valider le formulaire': function() {
    							var bValid = true;
    							if (bValid) {
    								//$("#formulaire").submit(function(){
    									var str = $("#formulaire").serialize();
    									$.ajax({
    										ajaxOptions: { cache: false },
    										type: "POST",
    										url: "traitement_form.php",
    										data: str,
    										success: function(msg){
    										}
    									});
    							$(this).dialog('close');
    							var $tabs = $('#tabs').tabs();
    							var selected = $tabs.tabs('option', 'selected');
    						}
    					}}
    				});
    Merci de votre aide

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Bonsoir nicerico.

    J'espère avoir compris votre problème (modification du contenu d'un tabs par l'intermédiaire d'un dialogue). Voici un exemple:
    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
    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
     
    <!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Author" content="Daniel Hagnoul" />
        <title>Page type</title>
        <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" />
        <style type="text/css">
            body {
                background-color:#696969;
                color:#000000;
                font-family:Arial, Helvetica, sans-serif;
                font-size:medium;
                font-style:normal;
                font-weight:normal;
                line-height:normal;
                letter-spacing:normal;
            }
            h1,h2,h3,h4,h5 {
                font-family:"Times New Roman", Times, serif;
            }
            div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                margin:0px;
                padding:0px;
            }
            p {
                padding:6px;
            }
            ul,ol,dl {
                list-style:none;
                padding-left:6px;
                padding-top:6px;
            }
            li {
                padding-bottom:6px;
            }
            div#conteneur {
                width:95%;
                margin:12px auto;
                padding:6px;
                background-color:#FFFFFF;
                color:#000000;
                border:1px solid #666666;
                font-size:0.8em;
            }
        </style>
        <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#tabs").tabs();
     
                $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    dialogClass: "dialogue",
                    buttons: {
                        "Ok": function(event, ui) {
     
                            //Firebug
                            //console.log($(this).data('id_objet'));
     
                            //retrouve l'id du tabs
                            $("#"+$(this).data('id_objet')).append("<span style='color:#FF0000; font-size:2em;'>création/modification/suppression utilisateurs</span>");
     
                            $(this).dialog("close"); 
                        }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                        }
                    }
                });
     
                $("#btnChoix").click(function(){
                    //Firebug
                    //console.log($(this).parent()[0].id);
     
                    //stock l'id du tabs
                    $("#dialog").data('id_objet', $(this).parent()[0].id).dialog("open");
     
                    return false;
                });
             });
         </script>
    </head>
    <body>
        <div id="conteneur">
     
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Tableau de bord</a></li>
                    <li><a href="#tabs-2">Gestion Admin</a></li>
                    <li><a href="#tabs-3">Interventions</a></li>
                </ul>
                <div id="tabs-1">Tableau de bord (à definir)</div>
                <div id="tabs-2">
                    <div id="accordion">
                        <div>
                            <h3><a href="#gest_util">Gestion des utilisateurs</a></h3>
                            <div id="listeUtilisateurs">
                                <p>Liste des utilisateurs avec possibilité de création/modification/suppression</p>
                                <!-- <p><?php include('liste_utilisateur.php')?></p> -->
                                <button id="btnChoix" type="button">Ouvrir le dialogue</button>
                                <div id="dialog" title="Création/modification/suppression">
                                    <p>Un commentaire</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3><a href="#">Gestion des Intervenants</a></h3>
                            <div>
                                <p>ici la liste des Intervenants (societes) avec possibilité de creation/modification/suppression</p>
                            </div>
                        </div>
                        <div>
                            <h3><a href="#">Gestion des sites</a></h3>
                            <div>
                                <p>ici la liste des sites avec possibilité de creation/modification/suppression</p>
                            </div>
                        </div>
                        <div>
                            <h3><a href="#">Gestion des listes</a></h3>
                            <div>
                                <p>ici les listes de type : etages, bloc, loc, sous loc, equipement, disting, etat intervention avec possibilité de creation/modification/suppression</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tabs-3">
                    <p>Liste Interventions affiché sous forme de tableau avec filtre<br />Site | Date demande | Date début | Date fin | Etat | Bouton detail</p>
                </div>
            </div>
     
        </div>
    </body>
    </html>
    La patience est un art difficile, mais c'est une vertu.

    Répondre à une question prend le temps de la comprendre, de trouver la solution, de tester la solution, et de poster la réponse.

    Les personnes qui comme moi répondent aux messages sont des utilisateurs du forum comme vous.

    Ils ne sont pas toujours disposés à vous répondre, disponibles à l'instant et ils n'ont pas l'obligation de vous répondre.

  6. #6
    Membre habitué
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 616
    Points : 177
    Points
    177
    Par défaut
    Merci pour votre aide

    petite precision :
    je veux modifier le contenu d'un tabs apres une requete sql (insert)
    donc avant modification, le tabs affiche le resultat d'un "select" (liste de nom)
    le "dialog" contient le formulaire
    une fois validé, la fonction ajax va permettre l'enregistrement
    et c'est apres l'enregistrement que je veux afficher de nouveau le tabs avec la liste actualisée

    le plus simple n'est t il pas de réctualiser la page ?
    mais je ne trouve pas comment reactualiser la page tout en affichant le bon tabs sans destructurer la page

    Avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#tabs").tabs().load("accueil.php");
    je recharge bien la page mais mon tab devient :

    •Tableau de bord
    •Gestion Admin
    •Interventions
    •Autre
    • Déconnexion
    au lieu de s'afficher correctement

    Merci encore pour votre aide

Discussions similaires

  1. Réponses: 0
    Dernier message: 12/05/2011, 16h52
  2. ouverture new page apres validation formulaire
    Par jameson dans le forum Langage
    Réponses: 5
    Dernier message: 19/06/2008, 13h04
  3. Recharger page après validation de formulaire par POST
    Par Flynt dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 01/02/2008, 16h33
  4. Ouverture d'une page aprés validation d'un formulaire
    Par civodultrebor37 dans le forum Langage
    Réponses: 11
    Dernier message: 14/12/2006, 13h19
  5. [PEAR][HTML_QuickForm] Comment afficher une page après validation du formulaire ?
    Par jpinfotech dans le forum Bibliothèques et frameworks
    Réponses: 4
    Dernier message: 27/11/2006, 15h58

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