OwlCarousel et mise à jour

Bonjour,

J'ai une série d'images que je cherche à localiser. En géomatique, on dit qu'elles n'ont pas de géométrie ou que la géométrie est nulle.

Bien que déprécié, j'utilise OwlCarousel pour afficher ces images. Une fois localisée, le carousel doit se mettre à jour, avec deux scenarios : soit il ya rafraichissement de la donnée auquel cas, le carousel perd sa mise en forme, soit il y a rafraichissement du carousel en lui-même et là la donnée contenue n'est pas rafraichie.

Code:

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
      function NoGeometry(){ 
 
cartes.noGeom().then(nog => {
            var recs = nog.records;
 
            for(let rec of recs){
 
                $("#carousel").append(
                    `<div class="card item-carousel tooltipped" data-id_image="${rec.id_image}" data-tooltip="${rec.ref_image}" data-position="bottom">
                        <div class="card-content">
                            <center><img src="https://monimage.fr/${rec.id_image}.jpg"></center>
                        </div>
                    </div>`
                )
            }
 
            $("#carousel .item-carousel").on("click", function(e){
                e.preventDefault();
 
                var vignette = new Carte({
                    id_image:this.dataset['id_image']
                })
 
                vignette.readOne().then(res => {
 
                $("#info_carte").html(`
                        <div class="index-banner sarala-regular">
 
                                        <div class="row">
                                        <div class="col s12 m12">
                                            <div class="card" id="fiche_carte">
                                            <form action="" id="carousel_edit">
                                            <div class="card-image">
                                                <center><img src="https://monimage.fr/{vignette.id_image}.jpg"></center>
                                                <a id="trash" class="btn-floating btn-small halfway-fab waves-effect waves-light red darken-4"><i class="las la-trash"></i></a>   
                                                <a class="updt_geom btn-floating btn-small halfway-fab waves-effect waves-light brown lighten-2 tooltipped" data-position="top" data-tooltip="Mettre à jour" style="margin-right:45px"><i class="las la-ruler-combined"></i></a>  
                                                <button type="submit" id="updt" class="btn-floating btn-small halfway-fab waves-effect waves-light lime darken-2" style="margin-right:90px"><i class="las la-check"></i></button>
                                            </div>
 
                                            </form>
                                            </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                </div>`)
 
                $("#carousel_edit .updt_geom").on("click", function(e){
                    e.preventDefault();
                    cartes.map.off('click');
                    cartes.map.getCanvas().style.cursor = 'crosshair';
                    cartes.map.once('click', function(e) {
 
                    var longitude = e.lngLat.lng;
                    var latitude = e.lngLat.lat;
 
                    vignette.updateGeom({
                        sha1:vignette.sha1,
                        latitude:latitude,
                        longitude:longitude
                    }).finally((v) =>{
                        carteApi();
                        myCarousel.trigger("refresh.owl.carousel");
                        NoGeometry(); // le problème est ici, quand cette fonction n'est pas appelée le problème est contourné, néanmoins la donnée n'est pas mise à jour
                        M.toast({html: 'Géometrie mise à jour', displayLength: 5000, classes: 'toast_success'});
                    }).catch((err) => {
                        M.toast({html: 'Erreur de mise à jour de la géométrie : ' + err, displayLength: 5000, classes: 'toast_error'});
                    })
// cartes est une instance de classe qui fait référence à une fonction mais je ne pense que cela ait une importance dans le cas présent.
                    cartes.map.off('click');
                    cartes.map.getCanvas().style.cursor = '';                
                    })
                })
 
 
 
                });
            })
// Le problème est donc ici : à chaque mise à jour d'une géométrie nulle, la mise à jour ne repasse pas par cet élément ci-dessous
        var myCarousel = $(".owl-carousel").owlCarousel({
            nav:true,
            navText:[`<span class="badge red darken-4 white-text">${remaining} cartes restantes / <i>${remaining} cards remaining </i> </span>`],
            loop:false,
            margin:0,
            items:14
        })
 
        })
}

Pour ce qui est des images fournies, la première image (à gauche) est la bonne mise en forme, la fonction ligne 78 est lue sans problème. L'autre image montre ce qui est après le rafraichissement de la fonction updtGeom() ligne 55, mais le code de la ligne 78 n'est pas relue. La position de ce code est importante, selon la position elle est lue ou non.

Merci pour vos retours

Sylvain