salut

j'utilise bootstrap, jquery et handlebar.

Dans une SPA, j'ai un fichier html qui contient quelques tab panel.

Lorsque j'arrive sur la dite page, un appel ajax est fait est les données sont envoyé dans un template handlebard qui affiche le tout. Dans ce template, une fonction helper est appelé.

Les données sont bien affichés.

Je clique ensuite sur le deuxième tab... idem... si je reviens sur le premier tab, ma fonction helper n'est pas reconnue.

J'obtiens cette erreur

Uncaught Error: Missing helper: "getContactCategoryById"

La méthode getContactCategoryById est définie dans mon fichier lise.js.

Le code html et js

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
 
...html
<script> 
    $(document).ready(function () {
 
        feedSetupContact();
 
        $("a[href='#setupContact']").on('shown.bs.tab', function (e) {
            console.log("setupContact - show");
            feedSetupContact();
        });
 
    }
    Handlebars.registerHelper("getContactCategoryById", getContactCategoryById);
 
    function feedSetupContact() {
        var sourceSetupContact = $("#setup-contact-template").html();
        var templateSetupContact = Handlebars.compile(sourceSetupContact);
 
        //contact
        jQuery.ajax({
            type: "GET",
            url: "http://localhost:8080/rest/contacts",
            success: function (data, status, jqXHR) {
                $("#setupContactDivTemplate").empty();
                if (data.length != 0) {
                    $("#setupContactDivTemplate").append(templateSetupContact(data));
                    $('#setupContactTableResult').bootstrapTable();
                    $('#setupContactTableResult tr').bind("dblclick", null, contactSelectedRow);
                }
            },
            error: function (jqXHR, status) {
                // error handler
                alert("error " + jqXHR + " -  " + status);
            }
        });
 
        //feed location for contact every time we display the tab, in case a new contact has been created
        assignLocationToSelector($("#setupContactLocation"));
    }
 
</script>
 
<script id="setup-contact-template" type="text/x-handlebars-template">
    {{getContactCategoryById contactCategoryId}}
</script>
 
<script src="js/bootstrap-table.min.js" type="text/javascript"></script>
<script src="js/handlebars.min.js" type="text/javascript" ></script>
<script src="js/lise.js" type="text/javascript" ></script>
je n'arrive pas à comprendre pourquoi ça fonctionne la première fois et non la deuxième.