Discussion :

[Juju54350]

Bonjour,

Je souhaiterais afficher une image de chargement lorsque je clique sur un bouton. Cette image est dans un div :

Code :

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

1
2
3
<div id="divLoading" align="center">
    <img src="Pictures/loading.gif" alt="loading" />
</div>

Le problème est que l'image s'affiche très bien sur Firefox mais pas sur Internet Explorer ou Chrome. J'arrive à l'apercevoir si je place des alert pendant que le div est caché et qu'il est visible. Voyez plutôt :

Code :

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

1
2
$("#divCombinationsSelection").hide();
$("#divLoading").show();

En fait, après ces lignes, je fais des calculs et un autre div s'affichera avec les résultats. Je fais appel à des web methods pour les calculs. C'est peut-être cela qui bloque l'image...

Merci d'avance de votre aide.

[Juju54350]

Personne n'a d'idée ou a déjà essayé quelque chose du même genre ?

[omelhor]

probleme css/html ?

[Juju54350]

Je pense pas, en fait, j'arrive maintenant à afficher l'image mais "elle ne bouge pas" (vu que c'est un gif). Voilà une partie du code :

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
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
                $("#divCombinationsSelection").hide(function () {
                    $("#divLoading").show(function () {
                        $("#selected_plan").html("");
                        $("#selected_plan").append("<tr><th style=\"width: 20px;\"></th><th style=\"width: 200px;\">Chaîne(s) / Stations(s)</th><th style=\"width: 50px;\">Jour</th><th style=\"width: 100px;\">¼ d'heure</th></tr>");
 
                        $("#divCombinationsSelection table select").each(function (index) {
                            names += $("#" + $(this).attr("id")).data("kendoDropDownList").text() + ";";
                            console.log("ID : " + $(this).attr("id"));
                            webapp.data.LoadSelectedPlan($("#" + $(this).attr("id")).data("kendoDropDownList").text(), onLoadSelectedPlanSuccess);
 
                            function onLoadSelectedPlanSuccess(list) {
                                if (combinations_ddl_count > 1)
                                    $("#selected_plan").append("<tr><td colspan=\"5\"><b>" + list[0].Name + "</b></td></tr>");
 
                                console.log(list[0].Name);
 
                                for (i = 0; i < list.length; i++) {
                                    var table = "<tr><td>" + count + "</td><td>" + list[i].ChannelName + "</td><td>" + GetDayValue(list[i].DayId) + "</td>";
 
                                    if ($("#hddBrowser").val() != "Firefox")
                                       table += "<td style=\"border-right: 2px solid Black;\">" + list[i].Time + "</td></tr>";
                                    else
                                        table += "<td>" + list[i].Time + "</td></tr>";
 
                                    $("#selected_plan").append(table);
                                    count++;
                                }
                            }
                        });
 
                        audiences_list = new Array();
                        contacts_list = new Array();
                        PrepareGlobalResults(0, "divGlobalResults2-1", names); //to calculate residents data
                        PrepareGlobalResults(1, "divGlobalResults2-2", names); //to calculate luxembourgish data
                        PrepareGlobalResults(2, "divGlobalResults2-3", names); //to calculate foreign data
                        GetGlobalTotals();
                        $("#hddAudiences").val(audiences_list);
                        $("#hddContacts").val(contacts_list);
 
                        $.ajax({
                            type: "POST",
                            async: false,
                            url: "/api.aspx?action=getAudienceByCombination&names=" + names,
                            data: "{}",
                            dataType: "json",
                            success: function (data) {
                                audience_chart_data = data;
                            }
                        }); //to get audience for each combination
 
                        $.ajax({
                            type: "POST",
                            async: false,
                            url: "/api.aspx?action=getContactsByCombination&names=" + names,
                            data: "{}",
                            dataType: "json",
                            success: function (data) {
                                contacts_chart_data = data;
                            }
                        }); //to get contacts for each combination
 
                        var list_count = contacts_chart_data.length;
                        var repetition_chart_data_string = "[";
 
                        jQuery.each(contacts_chart_data, function (index, item) {
                            repetition_chart_data_string += '{ "combinationname":"' + item.combinationname + '", ' +
                                                      '"res_value":"' + (item.res_value / audience_chart_data[index].res_value).toFixed(2) + '" , ' +
                                                      '"lux_value":"' + (item.lux_value / audience_chart_data[index].lux_value).toFixed(2) + '" , ' +
                                                      '"for_value":"' + (item.for_value / audience_chart_data[index].for_value).toFixed(2) + '" }';
                            if (index < list_count - 1)
                                repetition_chart_data_string += ",";
                        }); //to calculate repetition
 
                        repetition_chart_data_string += "]";
                        repetition_chart_data = jQuery.parseJSON(repetition_chart_data_string);
                        CreateKendoChart("divAudienceChart", audience_chart_data, "Audience nette (000)", "line"); //to create audience chart
                        CreateKendoChart("divContactsChart", contacts_chart_data, "Contacts (000)", "line"); //to create contacts chart
                        CreateKendoChart("divRepetitionChart", repetition_chart_data, "Répétition", "line"); //to create repetition chart
 
                        $("#divGlobalResults2").kendoTabStrip({
                        });
 
                        $("#divGlobalResults2").data("kendoTabStrip").select($("#divGlobalResults2").data("kendoTabStrip").tabGroup.children().first()); //to create a container with tabs
                        $("#divLoading").hide();
                        $("#divResults").show();
                    });
                });