Colorbox est bloqué sur IE

Version imprimable

bonjour,

j'utilise la fenêtre colorbox() pour afficher un Formulaire qui permet à l'utilisateur de modifier les catégories des produits.

pour cela, j'ai créer une fonction qui permet de remplir les champs du formulaire selon le id de catégorie.

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
 
//debut initialiser
         function Initialiser_formulaire(lerel) {
            var titre="", img="", date="", ladonner = { idC: lerel };
            $.ajax({
                type: "POST",
                url: "../GestionCatego/Default.aspx/Charger_Formulaire",
                data: JSON.stringify(ladonner),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (CHmsg) {
                    for (var i = 0; i < CHmsg.d.length; i++) {
                        titre = CHmsg.d[i].Titre;
                        img = CHmsg.d[i].Image;
                        date = CHmsg.d[i].Date;
                    }
 
                },
                complete: function (CHmsgC) {
                $("#txtTitreModif").val(titre); 
                $("#txtDate").val(date);
                }
 
            }); // fin ajax
        }
        //fin initialiser

les éléments html sur lesquels je vais appliquer le colorbox sont crées dynamiquement et quand on clique dessus, voilà ce qui se passe :

Code:

1
2
3
4
5
6
7
8
9
10
 
var rel = 0;
//debut modifier
         $("#Cont #divContenent").on("click", "span a.Modifier", function () {
             $(this).colorbox({ open: true, inline: true, width: "50%", height: "50%", href: "#ModifierCatego" });
            rel = parseInt($(this).attr("rel"));
            $("#repModif").empty();
            Initialiser_formulaire(rel);
        });
        //fin modifier

La FAQ Colorbox explique un petit peu les problèmes rencontrées dans la rubrique Colorbox est mal positionné ou à se comporter bizarrement et j'ai changé de Doctype mais toujours pareil.

il n y a aucun problème sous firefox et chrome, pourtant sous IE, le formulaire est BIEN REMPLIT mais je ne peux pas cliquer dessus et l'image de chargement est toujours affichée au centre de la fenêtre. est-ce que c'est un souci de Doctype ou de Compatibilité Ajax IE ou bien autre chose?
voilà l'image sous IE :
Pièce jointe 192186

09/11/2015, 18h20
Toufik83

en ajoutant cette ligne,

Code:

$("#divContenent #cboxLoadedContent #colorbox,#divContenent #cboxLoadedContent #cboxOverlay").appendTo("form:first");

dans le document.ready(), le problème des fois disparaît et des fois NON, je ne comprends pas!! !

j'ai trouvé cette technique Ici sous la rubrique Formulaires en ligne ne pas présenter / affichage dans ASP.NET.
14/11/2015, 16h49
NoSmoking

Bonjour,

Citation:

en ajoutant cette ligne,

Code:

$("#divContenent #cboxLoadedContent #colorbox,#divContenent #cboxLoadedContent #cboxOverlay").appendTo("form:first");

et cela te sert à quoi ce sélecteur !?!
15/11/2015, 13h50
Toufik83

bonjour NoSmoking

cette ligne

Code:

$("#divContenent #cboxLoadedContent #colorbox,#divContenent #cboxLoadedContent #cboxOverlay").appendTo("form:first");

signifie qu'on ajoute d'abord les élément #colorbox et #cboxOverlay à l'élément FORM. c'est ce que j'ai compris d'après LA FAQ dans la rubrique Formulaires en ligne ne pas présenter / affichage dans ASP.NET.

dans le formulaire j'ai un champ de type FILE(image PostedFile), et je voulais manipuler cette image avec Ajax mais apparemment je dois créer une application MVC pour ça.
16/11/2015, 18h47
NoSmoking

Ma question valait surtout pour :
une ID devant être UNIQUE à quoi sert cette façon de cibler ?
16/11/2015, 23h08
Toufik83

bonsoir, désolé NoSmoking mais je n'ai pas bien compris votre question, pouvez-vous me dire s'il vous plait de quel ID s'agit-il?
17/11/2015, 10h53
danielhagnoul

@NoSmoking : c'est très étrange, mais c'est un appendTo(). Je m'en vais voir la documentation.

EDIT

Dans la doc, cela a du sens : $("#colorbox, #cboxOverlay").appendTo('form:first');, mais pas dans votre exemple, ou alors il manque une virgule entre chaque ID.

dans mon cas je n'ajoute pas le #colorbox et #cboxOverlay à la Form, mais j'ajoute le Div ayant l'id '#ModifierCatego' qui contient le formulaire de mes éléments Asp.net
Code:

1 2 3 4 5 6 7 8 9 10 <div id="ModifierCatego" style="padding:30px 10px;text-align:center"> <a><img id="imgmdf" alt="modif" src="" style="width:15em;height:15em"/></a> <Table ID="modiftable"> .... .... </Table> <button ID="btnEnregistrer">Enregistrer</button> <a id="repModif"></a> </div>
$("#ModifierCatego").appendTo("form:first");.
il n y a pas un manque de virgule entre les Id, par-ce que #divContenent est le parent de #cboxLoadedContent et ce dernier est le parent de #colorbox.
j'ai essayé aussi $("#ModifierCatego child").appendTo("form:first"); et $("#ModifierCatego").children().appendTo("form:first");, pas de succès malheureusement.

17/11/2015, 22h21
danielhagnoul

Les éléments enfants sont liés au conteneur parent. Lorsque vous déplacez un parent avec appendTo, ses enfants subissent automatiquement le même sort.
17/11/2015, 22h26
NoSmoking

Ce que je voulais dire c'est que $('#conteneur #contenu').appendTo('form:first') est correct mais comme une ID est UNIQUE (normalement) $('#contenu').appendTo('form:first') est grandement suffisant, après si tu as plusieurs éléments à transférer il te faut bien sûr mettre une virgule.

Lorsque tu fais $('#conteneur').appendTo('form:first') tout ce qui est dans #conteneur est transféré.
17/11/2015, 23h50
Toufik83

Bonsoir,
NoSmoking danielhagnoul,oui c'est juste,vous avez raison.
Quand je ne trouve pas une solution à mon problème, je fais des conneries désolé.

en plus j'ai commencé a coder mon application avec c# sans la technologie MVC et j'ai bien avancé (affichage des requêtes sqlserver, création des objets ,insertion suppression avec ajax...) et d'un seul coup je me suis trouvé face a un souci qui m’exige de développer en Asp.net MVC.

pour l'instant je sais comment faire pour créer des contrôleurs et des modèles ainsi que les vues associées, mais je bloque dans l'affichage de la liste.
23/11/2015, 09h46
Toufik83

bonsoir,
j'ai résolu le problème autrement, j'ai enlevé le plugin Colorbox.js et j'ai créer ma propre fenêtre modal en jouant avec le Css et

Code:

display :none

, ça devient très facile.
essayez de coder vos application en Mvc, c'est cool.
merci.