UI Tabs , Formulaires, et PHP
Bonjour,
Je suis un peu confus de poser une question qui me semble élémentaire, mais je dois le reconnaître, cela fait plusieurs jours que je cherche sans obtenir le résultat que je souhaite.
Par ailleurs, je n'ai pas trouvé de réponse sur le site de ce forum.
Je réalise une page html sous forme d'onglet avec le plugin UI Tabs de Jquery (version 1.8.12).
Dans l'un des onglets, je mets un simple formulaire qui appelle une page php (action.php).
Lorsque, je clique sur submit, je souhaite que la réponse du serveur soit affichée dans l'onglet en cours.
La soumission se fait via ajax.
Je vous joins le code html, très fortement inspiré des exemples du site jquery.com
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
52
53
54
55
56
57
58
59
60
61
62
63
|
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="../js/themes/base/jquery.ui.all.css">
<script src="../js/jquery-1.5.1.js"></script>
<script src="../js/ui/jquery.ui.core.js"></script>
<script src="../js/ui/jquery.ui.widget.js"></script>
<script src="../js/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../style/demos.css">
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
$('#tabs').bind('submit', function() {
var action = $("form").attr("action"); //Récupère le nom du fichier php transmis en POST
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$.ajax({
url: action,
type: 'POST',
success: function(data, textStatus, XMLHttpRequest) {
//document.write("ACTION="+action+"UI="+selected); ->ACTION=action.php/UI=1
var mes = action+" #tabs";
$("#tabs").load(mes,data);
$('#tabs').html(data);
alert('Load was performed.');
}
})
return false;
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="ajax/content2.html">Tab 2</a></li>
</ul>
<div id="tabs-1">
<p>Coucou</p>
</div>
</div>
</div>
</body>
</html> |
Le fichier content2.hml
Code:
1
2
3
4
5
6
7
| <p><strong>This other content was loaded via ajax.</strong></p>
<p><form method="post" action="action.php">
<table><input type="text" name="nom">
<input type="submit" value="ok">
<table>
</form>
</p> |
Le fichier action.php:
Code:
1
2
3
4
5
|
<?php
echo "Je suis ici";
print_r($_POST);
?> |
Résultat: le message "Je suis ici" apparaît, mais dans une nouvelle page qui a été rechargée, le menu des onglets ayant disparu.
La variable action dans le script
Code:
var action = $("form").attr("action");
contient bien la valeur (testé en décommentant le document.write...
Un gourou du jquery pourrait-il m'aider afin que le résultat du script action.php soit chargé dans le conteneur '#tab' sans que la feuille entière n'ait besoin d'être rechargée?
D'avance, je vous remercie.
Paul.
[EDIT]
PS: J'ai oublié de préciser que SEUL le message "Je suis ici" apparaît. Le contenu de $_POST est vide...
