Mettre le focus sur un résultat Ajax

**anti91** · 26/04/2021, 15h28

bonjour à tous,

étant débutant en javascript, je bloque sur une chose :

j'affiche une liste de bien immo , avec un select et un appel a ajax par method get .

sachant que le select, et l'affichage des biens se fait dans cette page test_tri_bien.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
17
18
19
$(document).ready(function(){
   $("#biens_vente").change(function(){
   var biens_vente= $(this).val();
   var data = 'motclef=' + biens_vente;
 
        $.ajax({
        type : "GET",
        url : "affichage_biens_vente.php",
        data : data,
        success: function(server_response){
 
           $("#affichage_biens_vente").html(server_response).show();
        }
        });
 
 
 
});
});

cela fonctionne parfaitement , je peux dans cette liste de biens, aller modifier un bien et revenir sur ma liste .

quand je reviens sur ma liste, je passe en get le statut du bien ( par exemple : vente ) et l'id du bien ( par exemple :741 ) ce qui donne au niveau url : https://........./test_tri_bien.php?...te&Id_bien=741

je souhaiterais qu'au retour des modifications effectués, revenir dans la liste à la ligne du bien que j'ai modifié comme on peut le faire en html avec #741 par exemple , et c'est la que je bloque .

j'ai bien essayé la fonction focus , mais sans succès , je dois oublier qq chose ou ne pas utiliser la bonne fonction, merci pour votre aide ( voici le fichier test_tri_bien.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
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
<?php
session_start()
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="search_biens_vente.js"></script>
<?php
$Id_bien = ($_GET['Id_bien'])   
?>
<script type="text/javascript">
	function vente(){
		$(document).ready(function(){
		var vente = 'vente';
    	var data = 'motclef=' +vente;
 
        $.ajax({
        type : "GET",
        url : "affichage_biens_vente.php",
        data : data,
        success: function(server_response){
 
           $("#affichage_biens_vente").html(server_response).show();
 
		}
     });
  });
}
</script>
<script type="text/javascript">
function donner_focus(<?php echo $Id_bien;?>)
{
document.getElementById(<?php echo $Id_bien;?>).focus();
}
</script>
</head>
 
<body <?php if($_GET['bouton'] == vente)echo "onload='vente(),donner_focus($Id_bien)'"?>>
 
<label class="tri_par">Tri par : </label>
<select class="tri" id="biens_vente">
   <option value="" selected="selected">Choix</option>
   <option value="vente"<?php if(($_GET['motclef'] == vente) || ($_GET['bouton'] == vente)){ echo 'selected="selected"';}?>>Vente</option>
   <option value="location"<?php if($_GET['motclef'] == location){ echo 'selected="selected"';}?>>Location</option>
   <option value="estimation"<?php if($_GET['motclef'] == estimation){ echo 'selected="selected"';}?>>Estimation</option>
   <option value="archive"<?php if($_GET['motclef'] == archive){ echo 'selected="selected"';}?>>Archivé</option>
</select>
</div>
<div id="affichage_biens_vente">
 
 
	</div>
</body>
</html>

l'affichage des biens se fait sous cette forme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="Resultat_biens" id="741"></div>
<div class="Resultat_biens" id="742"></div>
<div class="Resultat_biens" id="743"></div>

etc ....

merci pour votre aide

**ABCIWEB** · 26/04/2021, 19h45

Je ne suis pas certain de comprendre les conditions dans lesquelles tu reviens sur ta liste. Sur le principe tu peux te positionner vers un élément avec le bout de code ci-dessous

Code javascript :

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
<script>
// Trouve la position par rapport au parent le plus haut (html) avec offsetTop
function findPos(obj) {
	var curtop = 0;
 
	if (obj.offsetParent) {
	do {
		curtop += obj.offsetTop;
 
		} while (obj = obj.offsetParent);
	}
	return curtop;
}
 
//id à cibler
var cible = "#742";
 
// défilement vers la position 
window.scrollTo(0,findPos(document.querySelector(cible)));
</script>

**anti91** · 28/04/2021, 16h50

bonjour ABCIWEB,

et merci pour ton retour....

par contre , je ne sais pas comment inserer ton script ? je l'ai mis à la suite du script function vente, et appelé en même temps que la function vente dans la page test_tri_bien.php .....

pour infos , l'affichage des biens se fait toujours en décroissant n du dernier bien rentré au premier ....

cela ne fonctionne pas du coup , je pense que je l'interprete mal , si tu peux m'en dire plus que je comprenne , merci

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php
session_start()
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="search_biens_vente_test.js"></script>
<?php
$Id_bien = ($_GET['Id_bien'])   
?>
<script type="text/javascript">
        function vente(){
                $(document).ready(function(){
                var vente = 'vente';
        var data = 'motclef=' +vente;
 
        $.ajax({
        type : "GET",
        url : "affichage_biens_vente.php",
        data : data,
        success: function(server_response){
 
           $("#affichage_biens_vente").html(server_response).show();
                        
                }
     });
  });
}
</script>
	<script>
// Trouve la position par rapport au parent le plus haut (html) avec offsetTop
function findPos(obj) {
        var curtop = 0;
 
        if (obj.offsetParent) {
        do {
                curtop += obj.offsetTop;
 
                } while (obj = obj.offsetParent);
        }
        return curtop;
}
 
//id à cibler
var cible = <?php echo $Id_bien;?>;
 
// défilement vers la position 
window.scrollTo(0,findPos(document.querySelector(cible)));
</script>
 
<link rel="stylesheet" href="style.css" type="text/css">
</head>
 
<body <?php if($_GET['bouton'] == vente)echo "onload='vente(),findPos(obj)'"?>>
 
<label class="tri_par">Tri par : </label>
<select class="tri" id="biens_vente">
   <option value="" selected="selected">Choix</option>
   <option value="vente"<?php if(($_GET['motclef'] == vente) || ($_GET['bouton'] == vente)){ echo 'selected="selected"';}?>>Vente</option>
   <option value="location"<?php if($_GET['motclef'] == location){ echo 'selected="selected"';}?>>Location</option>
   <option value="estimation"<?php if($_GET['motclef'] == estimation){ echo 'selected="selected"';}?>>Estimation</option>
   <option value="archive"<?php if($_GET['motclef'] == archive){ echo 'selected="selected"';}?>>Archivé</option>
</select>
</div>
<div id="affichage_biens_vente">
 
 
	</div>
</body>
</html>

**ABCIWEB** · 28/04/2021, 20h58

Salut,

Il manque des précisions dans

"cela fonctionne parfaitement , je peux dans cette liste de biens, aller modifier un bien et revenir sur ma liste .

quand je reviens sur ma liste, je passe en get le statut du bien ( par exemple : vente ) et l'id du bien ( par exemple :741 )"

Comment modifies-tu ce bien, c'est un formulaire qui renvoie sur une page php, la même que celle qui affiche les biens ? Si oui le problème est que PHP est exécuté avant javascript donc évidemment ton ancre dans l'URL ne peut pas fonctionner, puisque tu affiches les biens en javascript on change sur le select.

Donc soit, en retour de modification tu fais afficher ton bien en php dans le html et ton ancre fonctionnera, soit il faudra simuler un onchange en javascript pour afficher le bien correspondant et utiliser la fonction que je t'ai indiquée pour te positionner au bon endroit dans ta page. La première solution serait plus simple évidemment. Pour la seconde avant d'aller plus loin j'ai besoin de savoir si j'ai bien compris.

**anti91** · 29/04/2021, 11h52

re,

en fait pour l'instant en mode test , mais le principe , c'est d'afficher la liste dans test_tri_bien.php, quand tu clique sur modifier un bien cela t'envoie dans une autre page php avec un lien du style index.php?page=Modif_desc_bien&Id_bien=743&bouton=vente et au retour tu reviens sur la page test_tri_bien.php avec un lien comme ça test_tri_bien.php?bouton=vente&Id_bien=743 .

la fonction choix est donc lancé pour affiché la liste des biens à la vente , et c'est la que je souhaiterais scroller dans la liste au niveau du biens que j'ai modifié avec Id_bien .

**ABCIWEB** · 02/05/2021, 04h25

Salut,

Je t'ai fais un exemple de script que tu peux tester dans une page séparée. Etant donné que tu as plusieurs affichages possibles, j'ai fait un script générique qui te permettras d'afficher aussi bien les ventes que les locations etc. J'ai supposé qu'il pourrait y avoir plusieurs destination ajax possibles. Je les teste donc en haut dans le code php.

Ton script qui appelle ce ficher doit donc inclure trois valeurs GET :
- bouton
- Id_bien
- url_ajax

Remarque que je fais afficher ces valeur dans un élément html caché sous forme de tableau json. Javascript ira chercher ces variables si elles existent au chargement de la page. L'avantage c'est qu'il n'y a pas de mélange php/javascript dans ton code javascript, c'est plus propre et cela te permettrais d'externaliser ton script javascipt si tu veux. C'est une méthode pratique pour échanger des variables entre php et javascript.

Ensuite il faut s'assurer que le html soit affiché avant de scroller vers l'id, c'est pourquoi la fonction qui redirige vers l'id est dans le callback de la fonction "show". Cette fonction utilise "offset().top" et "scrollTop()", c'est un raccourci du script que je t'avais montré qui était en javascript vanilla (javascript sans jQuery), puisque tu utilises jQuery autant en profiter.

Donc pour que cet exemple nommé "fichier_test.php" fonctionne, je l'ai appelé en écrivant dans l'url : fichier_test.php?bouton=vente&Id_bien=tete&url_ajax=affichage_biens_vente

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
<?php
// Teste $_GET['url_ajax'] pour vérifier qu'elle fait partie des destinations ajax autorisées.
$url_ajax_ok = ['affichage_biens_vente','location_biens_vente','estimation_biens_vente','archive_biens_vente'];
if (isset($_GET['url_ajax']) && !in_array($_GET['url_ajax'],$url_ajax_ok)) exit('erreur url ajax');
 
// Valeur par défaut pour être parsée par javascript
$get_json = json_encode([]);
if(isset($_GET['url_ajax'],$_GET['bouton'],$_GET['Id_bien']))
{
	$get_json = json_encode(['url_ajax'=>$_GET['url_ajax'], 'bouton'=>$_GET['bouton'], 'Id_bien'=>$_GET['Id_bien']]);
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Scroll vers id, onload en retour de requête ajax</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
	var get = JSON.parse($("#get_retour").text());
 
	if(get.url_ajax && get.bouton && get.Id_bien)
	{
	    var data = 'motclef='+get.bouton;
	    $.ajax({
            type : "GET",
            url : get.url_ajax+".php",
            data : data,
            success: function(reponse){
 
            $("#"+get.url_ajax).html(reponse).show(
		   "slow",
		   function()
		   {
		       var cible = $("#"+get.Id_bien).offset().top;
		       $(document).scrollTop(cible);
		   });                       
             }
          });
       }
})
</script>
</head>
 
<body>
<span style="display:none" id="get_retour"><?=htmlspecialchars($get_json,ENT_NOQUOTES)?></span>
 
<div id="affichage_biens_vente"></div>
</body>
</html>

fichier test de destination ajax "affichage_biens_vente.php"

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
<?php
ob_start();
?>
<div id="toto" style="height:300px">toto</div>
 
<div id="titi" style="height:400px">titi</div>
 
<div id="tata" style="height:200px">tata</div>
 
<div id="tutu" style="height:200px">tutu</div>
 
<div id="tete" style="height:200px">tete</div>
 
<div id="aze" style="height:300px">aze</div>
 
<div id="qsd" style="height:400px">qsd</div>
 
<div id="ta" style="height:200px">ta</div>
 
<div id="tu" style="height:200px">tu</div>
<?php $html = ob_get_clean();
echo $html;
?>

Pour le reste et pour pouvoir faire une requête générique pour l'affichage dans ton code d'affichage initial, je te conseille si besoin d'utiliser des attributs "data" dans tes options (pour y placer les informations que tu veux), cela te permettras de les utiliser pour ne pas avoir à faire un script ajax différent pour chacune de tes options.

Après si tu n'as qu'une destination ajax pour toutes tes options, il te suffiras de remplacer "get.url_ajax" par du texte en dur et de modifier les conditions. J'ai voulu montrer un code le plus générique possible.

Remarques que tu peux supprimer la mention type="text/javascript" dans tes balises script, ce n'est pas un oubli de ma part, c'est déprécié en html5.

Cela dit puisqu'il ne s'agit ici que de récupérer des variables GET tu pourrais le faire directement en javascript avec l'interface URL :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
// https://some.site/?id=123
var parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // 123

Mais cela peut poser problème si tu fais de la réécriture d'URL via un .htaccess par exemple. Et puis c'est souvent plus pratique (et toujours plus sécurisé) de contrôler les variables en php.

Mettre le focus sur un résultat Ajax

jQuery

Vue hybride

Discussions similaires

Partager

Partager