recharger une div après insertion

Version imprimable

Bonjour, je tente désespérément de recharger une div avec l'insertion ajouter dans un tableau html.
Le code php retourne simplement un tableau html que je retourne dans une div.
Si je fais une insertion le tableau est bien retourner mais sans la nouvel insertion

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
 
function loadcategory(){
	return $("#list_dance_category").load('/dance.php?dc_category&list_category');
}
$(function() {
	loadcategory();
$("#ad-dance-category").dialog({
		autoOpen: false,
		height: 'auto',
		width: 'auto',
		modal: true,
		position: 'center',
		buttons: {
			'Envoyer': function() {
				$('form',this).ajaxSubmit({
					url: '/dance.php?dc_category',
					type: "post",
					error: function(){
						alert("theres an error with AJAX");
					},
					success: function(e){
						loadcategory();
					}
				});
				$(this).dialog('close');
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		},
		close: function() {}
	});
});

Au pire construire le tableau html avec une boucle javascript suivant le nombre d'éléments récupérer

Edit: je tente également de construire le tableau entièrement avec jquery et une requête json mais pour le moment c'est le même résultat:(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function loadcategory(){
		var tablecat = '<table class="ui-widget ui-widget-content" id="tablecontain">'
		+'<thead><tr class="ui-widget ui-widget-header"><th>ID</th><th>Catégorie</th><th>Catégorie URL</th><th>Langue</th><th style="width:1%;"><span class="lfloat ui-icon ui-icon-closethick"></span></th></tr></thead>'
		+'<tbody>';
		$.getJSON('/dance.php?dc_category&list_category', function(j) {
			$.each(j, function(i,item) {
				$('<tr><td>'+item.iddance+'</td></tr>').appendTo('#tablecontain tbody');
			});
		})
 
		tablecat += '</tbody></table>';
		$(tablecat).appendTo('#list_dance_category');
}

On dirai que c'est un problème de cache avec php ou que sais-je...

Bonjour.

La construction du tableau me semble erronée, exemple :

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
$(function(){
	var theadStr = '<thead>' +
						'<tr class="ui-widget ui-widget-header">' +
							'<th>ID</th>' +
							'<th>Catégorie</th>' +
							'<th>Catégorie URL</th>' +
							'<th>Langue</th>' +
							'<th style="width:1%;">'
								'<span class="lfloat ui-icon ui-icon-closethick"></span>' +
							'</th>' +
						'</tr>' +
					'</thead>';
 
	var tab = ['<tbody>'];
 
	/*
	 * $.getJSON
         * 10 lignes de 5 colonnes
	*/
	for (var i = 0; i < 10; i++){
		tab.push('<tr>');
 
		for (var j = 0; j < 5; j++){
			tab.push('<td>' + i + '-' + j + '</td>');
		}
 
		tab.push('</tr>');
	}
 
	tab.push('</tbody>');
 
	$("<table/>", {
		id: "tablecontain",
		"class": "ui-widget ui-widget-content",
		html: theadStr + tab.join('')
	}).appendTo("#conteneur"); // remplacer conteneur par ?
});
</script>

Ben c'est que mon tableau fonctionne bien et est retourné convenablement.
c'est simplement le rechargement de la div ou récupération des résultats qui est faux.
Dans le sens qu'il ne recharge pas la page distante.
sinon intéressant cette manière de construire le tableau, j'en prend note.
Je suppose qu'avec une tel méthode je peux avoir un nombre infini de td vu que le nombre d'éléments récupérer est très variable.
Voici ma fonctions définitive, en attendant de trouver pourquoi il ne recharge pas la page distante avant de me la renvoyé

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
44
45
46
47
48
49
50
51
function loadcategory(){
		$.getJSON('/dance.php?dc_category&list_category', function(j) {
			if(j === undefined){
				console.log(j);
			}
			if(j !== null){
				$.each(j, function(i,item) {
					$('<tr><td>'+item.iddance+'</td><td>'+item.dancecat+'</td><td>'+item.dancecaturl+'</td><td>&nbsp;</td><td><span class="lfloat ui-icon ui-icon-closethick"></span></td></tr>').appendTo('#tablecontain tbody');
				});
			}else{
				$('<tr><td><span class="lfloat ui-icon ui-icon-minus"></span></td><td><span class="lfloat ui-icon ui-icon-minus"></span></td><td><span class="lfloat ui-icon ui-icon-minus"></span></td><td><span class="lfloat ui-icon ui-icon-minus"></span></td><td><span class="lfloat ui-icon ui-icon-closethick"></span></td></tr>').appendTo('#tablecontain tbody');
			}
		});
}
$(function() {
	var tablecat = '<table class="ui-widget ui-widget-content" id="tablecontain">'
		+'<thead><tr class="ui-widget ui-widget-header"><th>ID</th><th>Catégorie</th><th>Catégorie URL</th><th>Langue</th><th style="width:1%;"><span class="lfloat ui-icon ui-icon-closethick"></span></th></tr></thead>'
		+'<tbody>';
	tablecat += '</tbody></table>';
	$(tablecat).appendTo('#list_dance_category');
	loadcategory();
	$("#ad-dance-category").dialog({
		autoOpen: false,
		height: 'auto',
		width: 'auto',
		modal: true,
		position: 'center',
		buttons: {
			'Envoyer': function() {
				$('form',this).ajaxSubmit({
					url: '/dance.php?dc_category',
					type: "post",
					error: function(){
						alert("theres an error with AJAX");
					},
					beforeSubmit:function(){
						$('#list_dance_category').html('<img src="'+$.framework()+'/framwork/img/table-loader.gif" />');
					},
					success: function(e){
						loadcategory();
					},
					clearForm:true
				});
				$(this).dialog('close');
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		},
		close: function() {}
	});