Ouvrir une fenêtre modal avec bootstrap à partir d'un fichier jsp
Bonsoir,
J'utilise bootstrap et je voudrais ouvrir une fenêtre modal à partir d'un autre fichier jsp. Je travaille dans eclipse et mes fichiers sont stockés dans /webContent/Web-inf. Mon problème est je pense au niveau de url
Voici mon premier fichier: Liste.jsp son contenu:
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
64
65
66
67
68
69
70
71
72
73
74
75
76
| <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrapValidator.min.css"/>
<link href="bootstrap/css/range_form.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrapValidator.js"></script>
<script src="bootstrap/js/ajax.js"></script>
<script type="text/javascript">
$(function () {
$('tbody > tr').on('click', function(event) {
$.ajax({
type: 'POST',
url = "affiche.jsp?numero="+$(this).find('td.hidden-xs').text(),
success : function(){
event.preventDefault();
$(url).modal('show');
},
error: function() {
alert('Erreur');
}
})
})
});
</script>
<div class="container">
<fieldset style="margin-right:auto; margin-left:auto" style="width:14050px"><legend style="font-weight:auto;"><span class="style1"></span></legend>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Test1</h3>
</div>
<div class="col col-xs-6 text-right">
<input id="numcpte" type="text" name="numcpte" class="form-control" placeholder="Veuillez saisir le numéro.">
</div>
</div>
</div>
<div class="panel-body">
<table width="100%" id="lst_cmde" class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog" id="numcpte"></em></th>
<th class="hidden-xs">N°Compte</th>
<th>Nom </th>
</tr>
</thead>
<tbody>
<%List<Commande> romy=(List<Commande>) request.getAttribute("lst_cmmde"); %>
<% for(int j=0;j<romy.size();j++){%>
<tr>
<td align="center">
<a class="btn btn-default"><em class="fa fa-pencil"></em></a>
</td>
<td class="hidden-xs"><%= romy.get(j).getNo_compte()%></td>
<td><%= romy.get(j).getNomclient() %></td>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
</fieldset>
</div>
<div style='display:none'>
<div id="dialog-modal" title="Basic modal dialog">
<p>Loading</p>
</div>
<div> |
L'autre fichier que je souhaite ouvrir en modal affiche.jsp et son contenu
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
| <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrapValidator.min.css"/>
<link href="bootstrap/css/range_form.css" rel="stylesheet">
<script type="text/javascript" src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="bootstrap/js/ajax.js"></script>
<!-- Afficher la fenetre modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"><i class="text-muted fa fa-shopping-cart"></i> <strong> N°:</strong> - </h4>
</div>
<div class="modal-body">
<form name="cmdeForm_edit" id="cmdeForm_edit" method="post" action="" class="form-horizontal">
<div class="container">
<div class="row">
<div class="col-xs-3">
<label for="numcpte" class="col-md-3 control-label">Compte:</label>
<input id="numcpte" type="text" name="numcpte" class="form-control"
placeholder="Veuillez saisir le numéro de compte du client." required="required"
data-error="Veuillez saisir le numéro de compte du client.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn_save_data" class="btn btn-primary">Enregistrer</button>
</div>
</div>
</div>
</div> |
Merci de votre aide et est ce possible d'avoir la documentation de bootstrap en français ?
