Discussion :

[bastien59960]

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 :



Le script que j'utilise :

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
$(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 html :

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

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...

[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'});

[bastien59960]

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 :

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
$(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

[NoSmoking]

Bonjour,
peut-être qu'avant de continuer ► jQuery.load() serait une bonne lecture

[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.

[bastien59960]

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

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
<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 :

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

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

[bastien59960]

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

La syntaxe exacte est donc la suivante :

Code :

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

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

Le code complet :

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
<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 :

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

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

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




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

[NoSmoking]

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.

[bastien59960]

Super merci Bien pratique cette function !

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

Code :

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

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);
        	}
                });