Discussion :

[Toufik83]

bonsoir,

est ce qu'on peut afficher des données JSON récupérés via Ajax dans un élément Colorboxe'd?

mon problème c'est le faite d'affecter le colorbox a des éléments qui sont créer dynamiquement avec javascript : <a class="Editer"></a>..., pour plus de détails voila le code == >au chargement initiale j'utilise :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    Charger_Intial = function () {
    $.ajax({
        type: "POST",
        url: "../GestionCatego/Default.aspx/Charger_donnee",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function (msg) {
            if (msg.d.length > 0) {
                for (var i = 0; i < msg.d.length; i++) {
                    //onclick='SpanId(" + msg.d[i].Id_cat + ")'
                    $("#divContenent").append('<span id="' + msg.d[i].Id_cat + '" >"' +
                        '<a href ="#" id="' + msg.d[i].Id_cat + '" class="Supp">Supprimer</a><a  id="' + msg.d[i].Id_cat + '" class="Editer inline"  >Editer</a>' +
                        '<a style="width:1.2em"> ' + msg.d[i].Id_cat + '</a> <a style="width:8em">' + msg.d[i].Titre + '</a>' +
                        '<a style="width:7em;overflow:hidden">' + msg.d[i].Image + '</a> <a style="width:7em">' + msg.d[i].Date + '</a>' +
                         '<a style="width:3.6em">' + msg.d[i].Id_admin + '</a>' +
                         '<a style="width:2.7em;">' + msg.d[i].devis + '</a>' +
                         '<a style="width:7em">' + msg.d[i].active_cat + '</a>' +
                         '<a style="width:5em;">' + msg.d[i].envoivMar + '</a>' +
                         '<a style="width:5em;">' + msg.d[i].group_repr + '</a>' +
                         '<a style="width:4em;">' + msg.d[i].id_adminp + '</a>' +
                         '<a style="width:7em">' + msg.d[i].order_cat + '</a></span>');

                }

            }
            else {
                $("#divContenent span").remove();
                $("#divContenent").append("<span><a>pas de résultat</a></span>");
            }
        },
        complete: function (msg) {

            MaFonction("divContenent", "span", 10);
        }

    });
    return false;

    
}

puis la fonction en clique sur a.Editer :

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
21
22
23
24
25
26
27
28
 
$("#Cont #divContenent").on("click", "span a.Editer", function () {
            var Id = parseInt($(this).attr("id"));
            var modal = ""; var donner = { Id: Id };
            if (Id != -1 && Id > 0) {
                var html = "";
                $.ajax({
                    type: "POST", contentType: "application/json; charset=utf-8",
                    url: "../GestionCatego/Default.aspx/Editer",
                    data: JSON.stringify(donner),
                    dataType: "json",
                    cache: false,
                    success: function (msgE) {
                        for (var i = 0; i < msgE.d.length; i++) {
                            var vhtml = "<a id='Titre'>" + msgE.d[i].Titre + "</a><br/>";
                            vhtml += "<a id='image'>" + msgE.d[i].Image + "</a><br/>";
                            vhtml += "<a id='date'>" + msgE.d[i].Date + "</a>";
                            //$("#contModals #inline_content").append("<img alt='' src='../photos/" + msgE.d[i].Image +
                            //"'/></br>Titre " + msgE.d[i].Titre + " </br>Date " + msgE.d[i].Date);
                        }
                        $('#inline_content').append(vhtml);// résultat bien reçu dans #inline_content mais pas dans la fenêtre modal.
                    } //fin success
 
                }); //fin Ajax
 
            } //fin Id != -1 && Id > 0
            return false;
        });

et dans la fonction document.ready je met :

Code javascript :

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

1
2
3
4
 
$(document).ready(function () {
$("#inline_content").colorbox({ inline: true, width: "80%", height: "80%", href: "#inline_content" });
});

quand je clique sur a.Editer,je reçois bien le résultat Ajax dans #inline_content et quand je clique sur #inline_content la fenêtre modal apparaît et elle contient le html qui est inséré dans #inline_content.

comment faire pour que le Html soit directement inséré dans la fenêtre modal, sans passer par le clique sur #inline_content ?

[NoSmoking]

Bonjour,
ne sachant pas ce qu'est une Colorboxe'd je dirais "p’têt ben qu’oui, p’têt ben qu’non"

[Toufik83]

bonjour NoSmoking,

Colorboxe'd est juste une abréviation des éléments html sur lesquels on a appliquer la fonction colorbox(), c'est ce que je voulais dire.

[Toufik83]

je pense que j'ai trouvé la solution mais ça ne me paraît pas trop professionnel, je suis passé par le Css de colorbox, le conteneur de colorbox s'appelle #cboxContent, donc il ne me reste que faire append() mon résultat Ajax a cet élément comme si 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
21
22
23
24
25
26
27
28
29
30
$("#Cont #divContenent").on("click", "span a.Editer", function () {
            var Id = parseInt($(this).attr("id"));
            var modal = ""; var donner = { Id: Id };
            if (Id != -1 && Id > 0) {
                var html = "";
                $.ajax({
                    type: "POST", contentType: "application/json; charset=utf-8",
                    url: "../GestionCatego/Default.aspx/Editer",
                    data: JSON.stringify(donner),
                    dataType: "json",
                    cache: false,
                    success: function (msgE) {
                        for (var i = 0; i < msgE.d.length; i++) {
                            var vhtml = "<a id='Titre'>" + msgE.d[i].Titre + "</a><br/>";
                            vhtml += "<a id='image'>" + msgE.d[i].Image + "</a><br/>";
                            vhtml += "<a id='date'>" + msgE.d[i].Date + "</a>";
                            //$("#contModals #inline_content").append("<img alt='' src='../photos/" + msgE.d[i].Image +
                            //"'/></br>Titre " + msgE.d[i].Titre + " </br>Date " + msgE.d[i].Date);
                        }
                        // ici on a colorboxer le <a class='Editer'> open:true est obligatoire
                        $(this).colorbox({ open: true, inline: true, width: "80%", height: "80%", href: parseInt($(this).attr("id")) });
                        $("#cboxContent").html("");
                        $("#cboxContent").append(vhtml);
                    } //fin success
 
                }); //fin Ajax
 
            } //fin Id != -1 && Id > 0
            return false;
        });

merci et bonne soirée.