Discussion :

[delpphil]

Bonjour,

Comme explicité dans l'intitulé, je cherche une solution pour conserver ma sélection dans une table malgré que le submit du formulaire actualise la page.
Avant d'exposer mon code, mes lectures m'apprennent qu'il vaudrait mieux utiliser AJAX pour traiter ce formulaire et empêcher l'actualisation par return false;
Cette solution apporte son lot d'autres problème et nécessiterait pour moi de devoir revoir entièrement mon code. Si aucune autre solution ne se révèle, je devrai sans doute le faire.

Toujours est il, que votre avis au préalable m’intéresse :

Deux tables : l'une qui crée des commandes (orders) via son formulaire
l'autre : qui contient les "articles"
En selectionnant une "tr" de la table order, je filtre le contenu de la table2 sur l'id de la commande choisie.
MAIS AUSSI :
je récupère le contenu qui vient d'être inséré dans ma table pour le réinjecter dans le formulaire1 et une partie dans le formulaire2

Tout va comme je le souhaite sauf que si j'entre un nouvel article, après le submit je perds la selection de ma commande dans la table 1

Je souhaite donc savoir s'il est possible de "fixer" cette selection
ou
s'il est possible de ramener la sélection là où elle se trouvait avant l'actualisation.
ou
s'il est possible de n'actualiser qu'une partie de la page avec l'envoi du formulaire en lieu et place de la page complète.

Le code jquery :

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
 
//===========  Selection d'une ligne dans Order  =======================
var pickedup;
 
    $( "#list_Orders tr" ).on( "click", function( event ) 
    {
        if (pickedup != null) 
        {
            pickedup.css( "background-color", "#FFF" );  //well color
        }
        $("#numOrderLine").val($(this).find("td").eq(1).html());    
        $( this ).css("background-color", "#78a3d4" ); //select color
        pickedup = $(this);
        $("#numOrder").val($(this).find("td").eq(1).html());
        $("#titleInsert").val($(this).find("td").eq(2).html());
        $("#dateStartInsert").val($(this).find("td").eq(3).html());
        $("#dateCloseInsert").val($(this).find("td").eq(4).html());
        $("#noteInsert").val($(this).find("td").eq(5).html());
        $("#titleOrderLine").val($(this).find("td").eq(2).html());           
        var idorder =  $(this).find("td").eq(1).html();
        $("#list_proposals tr ").filter(function() 
        {
            $(this).toggle($(this).text().toLowerCase().indexOf(idorder) > -1)
        });
 
    });
 
 
</script>

Je n'ai pas mis la partie php car longue et peut être inutile pour ce que je demande. si besoin dite !

[Toufik83]

Salut,
si tu ne veux pas utiliser ajax, tu peux alors utiliser localStorage

[psychadelic]

une actualisation de page lors de l'envoi du formulaire, c'est une manière déguisée de dire rechargement complet et à zéro de la page.

Si tu a des données à placer sur le formulaire de ta page soit tu les concerve avant dans des cookies ou dans un LocalStorage, ou un sessionStorage ou si ta page envoie des données sur un serveur alors le serveur à le moyen d'envoyer la page en la composant avec les valeurs qu'il à reçu, par exemple en les mettant dans des variables de session PHP ou autre suivant le langage de ton serveur.

[delpphil]

disons qu'avec AJAX, outre la structure de mon code qui en serait ébranlé, j'ai appris à mes dépends que Ajax ne veut pas fonctionner si le fichier destination n'est pas un fichier à part entière.
Hors c'est bien le cas mais avec les "includes" ben lui il ne fait pas la différence.
sinon je m'en servirais ...

[psychadelic]

J'ai rien compris.

En Ajax il n'y a pas de "fichier de destination", et "un fichier à part entière" je vois pas ce que tu sous entends, un fichier c'est un fichier, je vois pas en quoi on peu y conférer la moindre "part entière" ou que ce soit.

En Ajax tu fait un appel à un fichier contenant du code, celui-ci peut renvoyer ou non une réponse en retour qui peut être juste un "ok" ou milles autres choses.

la demande Ajax peut elle même être de milles façons différentes. il existe des "protocoles" de dialogue (comme SOAP), ou des architectures (comme REST) pour cadrer ce mode de dialogue, mais rien n'interdit d'en faire ce que cela te chante.

les données transférées peuvent avoir x formats différents, mais on y utilise souvent le format JSON.

[delpphil]

oui justement, c'était de Json dont il était question.

J'avais entrepris de faire passer mes formulaires avec Ajax. Lorsque je dis fichier de destination je parle de la partie url où les POST vont être envoyés pour traitement côté serveur.
Ca ne fonctionnait pas et j'ai lu qu'avec Json le fait d'incluse des fichiers de permets pas à Json d'envoyer les datas car il estime que ce ne sont pas des fichiers distincts.

Est ce que c'est un peu plus clair comme explication ?

[Watilin]

[…] ou un sessionStorage ou si ta page envoie des données sur un serveur alors le serveur à le moyen d'envoyer la page en la composant avec les valeurs qu'il à reçu, par exemple en les mettant dans des variables de session PHP ou autre suivant le langage de ton serveur.

Est-ce que tu ne confondrais pas par hasard l’API client sessionStorage avec les sessions PHP ? Je reconnais que sessionStorage est mal nommée, il aurait fallu qu’elle s’appelle tabStorage (« stockage par onglet ») ou clientStorage ou un truc du genre.

une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation, ce qui diffère du comportement des sessions utilisant des cookies.

Source : https://developer.mozilla.org/fr/doc...sessionStorage

[psychadelic]

non non, je confonds pas (mais j'ai mis en gras les "ou" pour bien montrer qu'il s'agit de choses distinctes :

soit tu les conserve avant
- dans des cookies
- ou dans un LocalStorage,
- ou un sessionStorage
- ou si ta page envoie des données sur un serveur/../dans des variables de session PHP

j’aurais pu ajouter la possibilité d'utiliser IndexedDB mais c'est inégalement supporté par les Navigateurs; il y a existe aussi la présence de SQL Lite sur certaines anciennes versions, mais le W3C n'a pas validé l'expérience et cela va disparaître des radars.

[delpphil]

je me suis résolu à transformer mes scripts pour utiliser Ajax.

Il s'agit donc d'un formulaire qui reçoit dans ses inputs des données insérées par l'utilisateur.

un extrait :

Code HTML :

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
 
<!-- --------------------------------------------- Form Proposals  ---------------------------->
    <div class="col-md-6">
        <form id="formProp" action="" method="POST" >
            <div class="well well-md">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="card-header text-center font-weight-bold text-uppercase py-1">Proposals</h3><br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4">                          
                                <label for="numOrder" class="align-bottom">N° Order : </label>
                                <input class="form-control" type="text" style="background-color:#f5f5f5;" id="numOrderLine" name="idOrderProposal" value="" />                                      
                            </div>
                            <div class="col-md-8">                            
                                <label for="name">Titre : </label>
                                <input class="form-control" type="text" style="background-color:#f5f5f5;" id="titleOrderLine" value="" />
                            </div>
                        </div>
                </div>
                </div><br>
                <div class="row">
                    <div class="col-md-2">
                        <label for="subject">Langue</label>
                        <select class="d-block w-100 " id="langInsert" name="langInsert">
                        <option value="na" selected="">Choose</option>
                            <?php
                                while($data = $reqlang->fetch())
                            {?>
                                <option value="<?php echo $data['lang'];?>"><?php echo htmlspecialchars($data['lang']);?></option>
                            <?php
                            } $req->closeCursor();?> 
                        </select>                                         
                    </div>       
                    <div class="col-md-6">                        
                        <label for="name">Etablissement</label>
                        <select class="d-block w-100 " id="nameJailInsert" name="nameJailInsert">
                            <option value="na" selected="">Choose</option>
                            <?php
                                while($data = $reqJail->fetch())
                            {?>
                                <option value="<?php echo $data['nameJail'];?>"><?php echo htmlspecialchars($data['nameJail']);?></option>
                            <?php
                            } $req->closeCursor();?> 
                        </select>                                    
                    </div> 
                             ................

au niveau du fichier 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
 
/ Insert Proposals
    $("#formProp").submit(function(e){
        e.preventDefault();
        idOrderProposal = $(this).find("input[name=idOrderProposal]").val();
        nameJailInsert = $(this).find("input[name=nameJailInsert]").val();
        gradeInsert = $(this).find("input[name=gradeInsert]").val();
        qtInsert = $(this).find("input[name=qtInsert]").val();
 
 
        $.ajax({
                type: "POST",
                url: "./inc/manager.inc.php",
                data:{idOrderProposal: idOrderProposal, 
                      nameJailInsert: nameJailInsert,
                      gradeInsert: gradeInsert,
                      qtInsert: qtInsert},
                success:function(data){
                    location.load();
                }
        });
   // return false;
    });
...................

si je laisse le return false ça ne fonctionne pas rien ne se passe
si je laisse le preventdefault ça ne fonctionne pas rien ne se passe.
je suis obligé de remettre mon url dans l'attribut action de mon formulaire pour que ça parte du coup c'est un submit php qui se produit donc refresh

Voici une vue de ma page pour comprendre

Formulaire de gauche alimente le tableau de gauche (commande)
formulaire de droite alimente le tableau de droite
un clic sur une ligne du tableau de gauche trie le tableau de droite pour n'afficher QUE ce qui concerne la commande cliquée.
Sauf qu'à chaque ajout à droite, je perds le focus de cette ligne à gauche et j'aimerais que la commande sélectionnée reste sélectionnée à chaque submit