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