Jquery Tabs (onglets) avec Ajax et transmission de variables en POST

Version imprimable

Bonjour, ça fait deux jour que je cherche sur le web un exemple qui puisse fonctionner de tabs avec Jquery qui va me charger dans le tab un fichier PHP auquel je veux transmettre des données via POST. Et aussi rafraichir l'onglet en cour d'utilisation avec un lien externe aux onglets et toujours en transmettant des variables via POST. Pas moyen de trouver un exemple qui fonctionne et que je pourrait adapter :

http://debucquoi.com/images/Jquery%20Tabs.jpg

Le script que 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 $(document).ready(function(){ // Preload tab on page load if($(tabsId + ' LI.current A').length > 0){ loadTab($(tabsId + ' LI.current A')); } $(tabsId + ' A').click(function(){ if($(this).parent().hasClass('current')){ return false; } $(tabsId + ' LI.current').removeClass('current'); $(this).parent().addClass('current'); loadTab($(this)); return false; }); }); function loadTab(tabObj){ if(!tabObj || !tabObj.length){ return; } $(containerId).addClass('loading'); $(containerId).fadeOut('fast'); $(containerId).load(tabObj.attr('href'), function(){ $(containerId).removeClass('loading'); $(containerId).fadeIn('fast'); }); }
Le source HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="page_tabs"> <ul class="mytabs" id="tabs"> <li class="current"><a href="inc/Productos/description.php">Descripcion</a></li> <li><a href="inc/Productos/precios.php">Precios</a></li> <li><a href="inc/Productos/barras.php">Barras</a></li> <li><a href="inc/test.html">test</a></li> </ul> <div class="mytabs-container" id="tabs-container"> Loading. Please Wait... </div> </div>
J'essaye depuis quelques jours différentes solution pour passer mes variables en POST mais rien ne fonctionne :( si une âme charitable peux m'aider je suis preneur)

Merci.

Sébastien

P.S. Je suis nouveaux sur ce forum, je suis expatrier en Colombie et nous avons une petite quincaillerie, le logiciel qu'on utilise actuellement ne nous convient pas alors j'ai décider de réaliser mon propre soft de gestion via PHP Mysql etc...

08/07/2015, 10h31
Golgotha

Bonjour seb,

Si j'ai bien compris il suffirait d'utiliser .load de jquery avec un passage de paramètre :

$('#tab_x').load('page.php', {var1:'value1', var2:'value2'});

oui c'est l'idée, load before ou .load quelque chose comme ça, le problème c'est que je pédale dans la semoule avec le java et jquery. Autant le html pure, PHP, mysql ça va, mais le java dure dure...

J'ai essayé plusieurs choses rencontré sur le net pour passer mes variables a mes tabs mais rien n'y fait :(

SI quelqu'un a déjà eu a résoudre ce soucis ou connais un script avec démo qui fonctionne ça m'intéresse.

Dés que j'ai la soluce je publierai ici la solution complète, ça me parait un sujet trop peu traiter sur le net le passage de variable dans les tabs(ajax) Jquery et je ne comprend pas pourquoi parce que quel est l’intérêt de chargé un tab avec ajax si le contenu n'est pas dynamique.
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 $(document).ready(function(){ // Preload tab on page load if($(tabsId + ' LI.current A').length > 0){ loadTab($(tabsId + ' LI.current A')); } $(tabId).load('inc/Productos/description.ph', {ID:'55847affe1f985.76713544'}); ou $('#tabId').load('inc/Productos/description.ph', {ID:'55847affe1f985.76713544'}); ou $(tabId).load(type:'POST',url:Productos/description.php,dataType:'html',, {ID:'55847affe1f985.76713544'}); $(tabsId + ' A').click(function(){ if($(this).parent().hasClass('current')){ return false; } $(tabsId + ' LI.current').removeClass('current'); $(this).parent().addClass('current'); loadTab($(this)); return false; }); }); function loadTab(tabObj){ if(!tabObj || !tabObj.length){ return; } $(containerId).addClass('loading'); $(containerId).fadeOut('fast'); $(containerId).load(tabObj.attr('href'), function(){ $(containerId).removeClass('loading'); $(containerId).fadeIn('fast'); }); }
Ne fonctione pas :(

08/07/2015, 19h40
NoSmoking

Bonjour,
peut-être qu'avant de continuer ► jQuery.load() serait une bonne lecture ;)
08/07/2015, 20h48
bastien59960

Que je vais m’empresser d'explorer, en espérant que le loadtab de mon script je pourrais également lui passer les mêmes paramètres que le load de la page de la doc.
En tout cas merci pour la piste NoSmoking. J'avais vraiment besoins qu'on m'aiguille.

Bonjour, je reviens vers vous car je n'arrive toujours pas à faire passer mes variables en POST, j'ai changer de code pour :

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
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#nav li a").click(function() {
 
        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');
 
        $.ajax({ url: this.href, type: 'POST', data: postData, data: {country: 'test',city: 'test'}, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
        });
    return false;
    });
 
    $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
    $.ajax({ url: 'tab1.php', success: function(html) {
            $("#ajax-content").empty().append(html);
    }
    });
});
 
</script>
 
 
<div class="demo">
 
<div id="nav">
    <ul>
            <li class="current"><a href="tab1.php">Tab 1</a></li>
            <li><a href="tab2.php">Tab 2</a></li>
            <li><a href="tab3.php">Tab 3</a></li>
    </ul>
 
<div class="ajax-content" id="ajax-content">
Loading. Please Wait...
</div>

Le hic c'est que je vois nulle part la dedans quoi que ce soit qui ressemble de prés ou de loin à jQuery.load() , où je pourrais envoyer mes variables, et ce que j'ai fait :

Code:

1
2
3
        $.ajax({ url: this.href, type: 'POST', data: postData, data: {country: 'test',city: 'test'}, success: function(html) {
            $("#ajax-content").empty().append(html);
            }

Ne fonctione pas :(

Est ce que quelqu'un pourrais m'aider et me dire ou et comment je dois placer le jQuery.load() dans le bout de script que j'utilise.

Merci d'avance

Sébastien

J'ai réussis !!!!!!!!!!!!!!!!!!!!!!! Yipiiiiiiiiiiiii

La syntaxe exacte est donc la suivante :

Code:

1
2
3
        $.ajax({ url: this.href, type: 'POST', data: 'city=test', success: function(html) {
            $("#ajax-content").empty().append(html);
            }

Le code complet :

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
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#nav li a").click(function() {
 
        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');
 
        $.ajax({ url: this.href, type: 'POST', data: 'city=test', success: function(html) {
            $("#ajax-content").empty().append(html);
            }
        });
    return false;
    });
 
    $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
    $.ajax({ url: 'tab1.php', type: 'POST', data: 'city=test', success: function(html) {
            $("#ajax-content").empty().append(html);
    }
    });
});
 
</script>
 
 
<div id="nav">
    <ul>
            <li class="current"><a href="tab1.php">Tab 1</a></li>
            <li><a href="tab2.php">Tab 2</a></li>
            <li><a href="tab3.php">Tab 3</a></li>
    </ul>
<TABLE border='1'><TR><TD>    
<div class="ajax-content" id="ajax-content">
Loading. Please Wait...
</div>
</TD></TR></TABLE>

Et le résultat (Sans Css de mise en forme) :

Le fichier tab1.php :

Code:

1
2
3
4
5
<?PHP
Echo "<PRE>\n";
Var_dump($_POST);
Echo "</PRE>\n";
?>

Qui donne donc dans le div "ajax-content" :

http://debucquoi.com/images/Succes.jpg

Question pourquoi je ne peux pas modifier le message initial pour mettre "Résolu" dans le sujet ?

20/07/2015, 20h17
NoSmoking

Citation:

Question pourquoi je ne peux pas modifier le message initial pour mettre "Résolu" dans le sujet ?

Il te faut utiliser le bouton Résolu qui se trouve en bas de la liste des messages.

Super merci :) Bien pratique cette function !

Petite update si on veux transmettre plusieurs variables la syntaxe est la suivante :

Code:

1
2
3
4
5
6
7
8
9
        $.ajax({ 
        	url: this.href, 
        	type: 'POST', 
        	data: ('codigo=XXX,&famille=XXX'),
        	success: function(html) 
        	{
        		$("#tabs-container").empty().append(html);
        	}
                });

http://debucquoi.com/images/tabs2.jpg