Discussion :

[mohamed_dl]

Bonjour,

Voila je suis actuellement en stage pour une web agency.
la mission qu'on m'a donné de réaliser et de rectifié les bugs de la version d'un site. J'ai quelque difficulté a résoudre un problème que l'on m'a confié.

je récupère un tableau en php via une requête sql, ce tableau est ordonné sur la date.
ensuite lors de l'affichage de la page le tableau est insérer en html dans des input de type hidden.

Après l'affichage de la page une fonction est appelé en javascript qui modifie l’apparence de la page pour affiché le tableau.

Le problème est que le tableau affiché n'est plus ordonné dans chrome et internet explorer mais sous mozilla cela fonctionne.

Le script javascript qui est en pj


Je vous remercie pour votre aide.

[SpaceFrog]

je te conseillerais de regarder du coté de jqgrid pour la gestion de données tablulaires

[Bovino]

Quand tu parles d'un tableau, tu veux dire un objet n'est-ce pas ?
Effectivement, Chrome ne garantit pas l'ordre dans lequel les propriétés d'un objet seront listées.

Ensuite, pour t'aider à résoudre concrètement le problème, envoyer un fichier de 24ko n'est vraiment pas la meilleure des idées...
Merci donc d'isoler la partie qui te pose problème.

[mohamed_dl]

Voici la fonction qui est appelé en premier :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
	init: function(){
		this.periods.data = {};
		this.getLangs();
    setTimeout('window.Ads.refreshPeriods()', 3500);
    var that = this;
    this.periods.selector = '#owners_adform fieldset#periods';
    this.periods.$el = $(this.periods.selector);
    this.periods.table = this.periods.$el.find('#owners_adform_periodsummary');
    var periodsData = $('.periodData');
    this.periods.count = 0;
 
    $.each(periodsData, function(index, el) {
      var $el = $(el);
      var periodId = $el.data('periodId');
 
		//ajouter par mohamed
 
		  if($el.hasClass('input-period-id')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['id'] = $el.val();
		  } else if ($el.hasClass('input-period-from')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['from'] = $el.val();
		  } else if ($el.hasClass('input-period-to')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['to'] = $el.val();
		  } else if ($el.hasClass('input-period-price')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['price'] = $el.val();
		  } else if ($el.hasClass('input-period-price_promo')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['price_promo'] = $el.val();
		  } else if ($el.hasClass('input-period-duration')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['duration'] = $el.val();
		  } else if ($el.hasClass('input-period-minimum_duration')) {
				if(!that.periods.data[periodId])
					that.periods.data[periodId] = {};
				that.periods.data[periodId]['minimum_duration'] = $el.val();
 
    });
 
		var that = this;
 
		this.periods.$el.find('.owners_add').click(that.onAddPeriod);
 
	    $('.ez-radio input.package').click(function(){ 
                that.packages.selection[0] = $(this).val();
                that.packages.renderTable();
 
                $('input.order-package').val($(this).val()); 
        });
 
        $('#defaultPack').trigger('click');
 
	    $('.ez-checkbox input.promo_du_moment').change(function(){
                that.packages.selection[1] = $(this).is(':checked');
                that.packages.renderTable();
 
                var val = ($(this).is(':checked')) ? 1 : 0;
                $('input.order-promo_du_moment').val(val);
        });
 
      	$('.ez-checkbox input.promo_du_moment').trigger('change');
 
	    $('.ez-checkbox input.a_la_une').change(function(){
                that.packages.selection[2] = $(this).is(':checked');	    
 
                if(!that.packages.selection[3]) {
                    that.packages.selection[3] = 1;
                }
 
                var val = ($(this).is(':checked')) ? 1 : 0;
                $('input.order-a_la_une').val(val);
 
                that.packages.renderTable();
        });
 
      	$('.ez-checkbox input.a_la_une').trigger('change');
 
	    $('.ez-radio input.a_la_une_duration').change(function(){
                that.packages.selection[3] = $(this).val(); 
                that.packages.renderTable();
 
                $('input.order-a_la_une_duration').val($(this).val());
 	    });
 
      $('.ez-radio input.a_la_une_duration').trigger('change');
 
      $('form#owners_adform').find('#addCode').click(function(e) {
        that.packages.promo = $('form#owners_adform').find('#formPromo').val();
        that.packages.renderTable();
 
        e.preventDefault();
 
        return false;
      });
 
		this.packages.renderTable();
 
	}

la fonction qui affiche le tableau

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
88
89
 
  refreshPeriods: function() {
    var that = this;
 
 
 
    $.each(that.periods.data, function(index, period) {
		//document.write(period.cle+'<br/>');
       if(period.duration == 'open')  {
          var tr = $('<tr>').addClass('owners_adform_periodsummary_vacant').addClass('period-'+period.id).addClass('period-duration');
        } else {
          var tr = $('<tr>').addClass('owners_adform_periodsummary_booked').addClass('period-'+period.id).addClass('period-duration');
        }
        var actions = $('<td>').attr('width', '10%');
        var edit_link = $('<a>').attr('href', '#').attr('style', 'margin-left:15px;').append('<img src="/assets/images/icon_edit.png" width="16" height="16" alt="nomdufichier.ext">').data('period', period);
        var delete_link = $('<a>').attr('href', '#').append('<img src="/assets/images/icon_remove.png" width="16" height="16" alt="nomdufichier.ext">');
 
        actions.append(edit_link);
        actions.append(delete_link);
 
        var from = $('<td>').attr('width', '15%');
 
        from.append('<p class="period-'+period.id+'-from">' + period.from + '</p>');
 
        var to = $('<td>').attr('width', '15%');
 
        to.append('<p class="period-'+period.id+'-to">' + period.to + '</p>');
 
        var price = $('<td>').attr('width', '40%');
 
        price.append('<p class="period-'+period.id+'-price">' + period.price + '€/semaine</p>');
 
        var minimum_duration = $('<td>').attr('width', '20%');
 
        minimum_duration.append('<p class="period-'+period.id+'-minimum_duration">' + window.Ads.lang[period.duration] + '</p>');
 
        tr.append(actions);
        tr.append(from);
        tr.append(to);
        tr.append(price);
        tr.append(minimum_duration);
 
        window.Ads.periods.table.find('tbody').append(tr);
 
        edit_link.click(function(e) {
          var period = $(this).data('period'); 
 
          window.Ads.periods.$el.find('input.from').val(period.from);                                                    
          window.Ads.periods.$el.find('input.to').val(period.to);                                                    
          window.Ads.periods.$el.find('input.price').val(period.price);                                                    
          window.Ads.periods.$el.find('input.price_promo').val(period.price_promo);                                                    
          window.Ads.periods.$el.find('select.duration').val(period.duration);                                                    
          window.Ads.periods.$el.find('select.duration').parent().find('.customStyleSelectBoxInner').text(window.Ads.lang[period.duration]);
          window.Ads.periods.$el.find('select.minimum_duration').val(period.minimum_duration);                                                    
          window.Ads.periods.$el.find('select.minimum_duration').parent().find('.customStyleSelectBoxInner').text(window.Ads.lang[period.minimum_duration]);                                                    
 
 
		   window.Ads.periods.$el.find('select.minimum_duration1').val(period.minimum_duration1); 
 
 
 
          window.Ads.periods.$el.data('editing', true);
          window.Ads.periods.$el.data('periodId', period.id);
 
          e.preventDefault();
          return false;
        });
 
        delete_link.click(function(e){
          $('.input-period-id-'+period.id).remove();
          $('.input-period-from-'+period.id).remove();
          $('.input-period-to-'+period.id).remove();
          $('.input-period-price-'+period.id).remove();
          $('.input-period-price_promo-'+period.id).remove();
          $('.input-period-duration-'+period.id).remove();
          $('.input-period-minimum_duration-'+period.id).remove();          
 
          var input = $('<input>').attr('type', 'hidden').attr('name', 'deleted_periods[]').val(period.id);
 
          $('form#owners_adform').append(input);
 
          window.Ads.periods.table.find('tbody tr.period-'+period.id).remove();
 
          e.preventDefault();
          return false;
        });
 
    });  
}

Oui je fais un appel a un objet, je travail avec le framework Codeigniter.
Encore merci pour votre aide.