Bonjour à tous,
Je suis débutant en Jquery, AJAX, Spring, et je souhaite creer une pop-up modale de recherche.
Cette pop-up permet de:

  • Lancer dynamiquement une recherche selon un critère de saisie (la recherche est lancé autaumatiquement à la saisie).
  • Charger le résultat dans un tableau
  • Afficher un boutton dans une colone pour chaque résultat
  • Le clique sur ce boutton, permet de restituer les données du résulat choisi dans l'écran mère + fermeture de la pop-up


J'espère que j'ai pas été trop flou juqu'à présent

Le projet est en Java/JEE avec Spring mvc 3, et j'ai choisi d'utiliser les composant Jquery Datatable (http://datatables.net) qui va permettre de lancer la recherche et afficher les résultat dans une table + Dialog (Jquery UI) qui va afficher le tout dans une pop-up.

J'ai bien crée ma pop-up et elle contient bien mon tableau.

Ce que je souhaite faire actuellement, c'est de faire la liaison entre mon tableau et mon service en AJAX, mais sans scuccè.

Voici mon code:

Ma JSP:

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
<%@ page language="java" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>projet</title>
<link rel='stylesheet' type='text/css'href="ressources/css/CA-BANK-theme/jquery-ui-1.10.1.custom.css">
<script type='text/javascript' src="ressources/js/jquery-1.9.1.js"></script>
<script type='text/javascript' src="ressources/js/jquery-ui-1.10.1.custom.js"></script>
<script type='text/javascript' src="ressources/js/jquery.dataTables.js"></script>
<style type="text/css" title="currentStyle">
@import "ressources/css/data-table-css/table_jui.css";
</style>
<script>
	$(document).ready(function() {
 
		$("#myTable").dataTable({
			"bJQueryUI" : true,
			"sPaginationType" : "full_numbers",
			"iDisplayLength" : 8, 
			"bProcessing" : true,
			"bLengthChange" : false,
			"bAutoWidth": false,
			"oLanguage" : {
				"sUrl" : "ressources/language/fr.txt"
			},
	        "bServerSide": true, 
	        "sAjaxSource": "/recherche", 
	        "fnServerData": function ( sSource, aoData, fnCallback ) { 
	            $.ajax( { 
	                "dataType": 'json',  
	                "type": "GET",  
	                "url": sSource, 
	                "data": aoData,  
	                "success": fnCallback 
	            } ); 
	        } 
 
		});
 
		$("#dialog").dialog({
			autoOpen : false,
			modal : true,
			resizable : false,
			width : 705,
			height : 505,
		});
 
		// Link to open the dialog
		$("#dialog-link").click(function(event) {
			$("#dialog").dialog("open");
			event.preventDefault();
		});
 
	});
</script>
<style>
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}
</style>
</head>
<body>
 
	<div align="center">
		<form id="searchForm" method="POST" action="/select">
			<table style="align: center;">
				<tr>
					<td><input type="button" id="dialog-link" title="Recherche"
						class="ui-bouton_icon" />
					</td>
				</tr>
			</table>
		</form>
	</div>
 
 
	<!-- ui-dialog -->
	<div id="dialog" title="Recherche d'activi&eacute; MP">
		<div id="dynamic">
			<table class="display" id="myTable">
				<thead>
					<tr>
						<th width="18%">Code</th>
						<th width="82%">Libelle</th>
					</tr>
				</thead>
				<tbody>
 
 
				</tbody>
			</table>
		</div>
	</div>
</body>
 
 
</html>

Mon Controleur:
Code java : 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
package project.pack.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
 
@Controller
public class monController {
 
	@RequestMapping("/")
	public String printHelloWorld(Model model) {
		model.addAttribute("message", "Hello World!");
 
		return "sesameWeb";
	}
 
 
	@RequestMapping(value = "/recherche", method = RequestMethod.GET)
	public @ResponseBody
	String doAjax(@RequestParam int iDisplayStart,
			@RequestParam int iDisplayLength, @RequestParam int iColumns,
			@RequestParam String sSearch, @RequestParam boolean bEscapeRegex,
			@RequestParam boolean bSortable_,
			@RequestParam boolean bSearchable_, @RequestParam String sSearch_,
			@RequestParam boolean bEscapeRegex_,
			@RequestParam int iSortingCols, @RequestParam int iSortCol_,
			@RequestParam String sSortDir_, @RequestParam String sEcho) {   
 
	        //Create the response, a well formed JSON including Datatables required vars. 
	        //e.g. 
	        return 
 
	        "{  \"sEcho\": 2," + 
	        "   \"iTotalRecords\": 2," + 
	        "   \"iTotalDisplayRecords\": 2," + 
	        "   \"aaData\": [" + 
	        "       [" + 
	        "           \"Code NAF\"," + 
	        "           \"Firefox 1.0\"," + 
	        "       ]," + 
	        "       [" + 
	        "           \"Gecko\"," + 
	        "           \"Firefox 1.5\"," + 
	        "       ]" + 
	        "   ]" + 
	        "}"; 
	    }
}

Je suis vraiment perdu, merci beaucoup de votre aide.