Ajax $.Colorbox() et C#

Citation:

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:

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;

    
}

Citation:

puis la fonction en clique sur a.Editer :

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
 
$("#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;
        });

Citation:

et dans la fonction document.ready je met :

Code:

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

Citation:

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 ?

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

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.

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:

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.