issue #0001575: add bootstrap dialog

This commit is contained in:
Michael RICOIS 2013-12-10 13:07:42 +00:00
parent bf6f48f690
commit 4beb98723a
4 changed files with 74 additions and 17 deletions

View File

@ -97,7 +97,30 @@
</tbody>
</table>
<?php } else {?>
<a class="enrichissementref" href="<?=$this->url(array('controller'=> 'enrichissement','action'=>'reference', 'id'=>$this->comptageId))?>">Commander un enrichissement</a>
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal" data-load-remote="<?=$this->url(array('controller'=> 'enrichissement','action'=>'reference', 'id'=>$this->comptageId))?>" data-remote-target="#myModal .modal-body">Commander un enrichissement</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Commande d'un enrichissment</h4>
</div>
<div class="modal-body">
Chargement...
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span class="sr-only">100% Complete</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary submit">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php }?>
</fieldset>

View File

@ -1,10 +1,7 @@
Votre commande a bien été prise en compte sous la référence <?=$this->ref?>
<script>
$('#dialog').dialog({
buttons: [{ text: "Quitter",
click: function() {
$(this).dialog("close");
$('[data-dismiss]').on('click', function(){
window.location.href= window.location.href;
} }] });
});
</script>

View File

@ -67,7 +67,41 @@ Vous pouvez prendre contact avec le service commercial.
<p><?=$this->infoInsee?></p>
<?php }?>
<br/>
<div class="row">
<div class="col-xs-6">
<div class="panel panel-info">
<div class="panel-heading">Possible output encoding</div>
<div class="panel-body">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> UTF-8
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> ISO-8859-15
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-info">
<div class="panel-heading">Possible separator</div>
<div class="panel-body">
<div class="btn-group" style='' data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> ,
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> ;
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Tab
</label>
</div>
</div>
</div>
</div>
</div>
<form name="commande" method="post" action="<?=$this->url(array('controller'=>'enrichissement', 'action'=>'commande'))?>">
<input type="hidden" name="id" value="<?=$this->id?>" />
<input type="hidden" type="text" value="<?=$this->ref?>" name="ref">
@ -75,9 +109,9 @@ Vous pouvez prendre contact avec le service commercial.
</form>
</div>
<script>
$('#dialog').dialog({ buttons: [ {
text: "Commander",
click: function() {
$('button.submit').prop('disabled', false);
$('button.submit').on('click', function(){
$('button.submit').remove();
var action = $('form[name=commande]').attr('action');
var values = $('form[name=commande]').serialize();
$('div#update').html('Enregistrement...');
@ -87,11 +121,6 @@ $('#dialog').dialog({ buttons: [ {
}).error(function(){
$('div#update').html('Erreur');
});
}
},
{
text: "Quitter", click: function() { $(this).dialog("close"); }
}
] });
});
</script>
<?php }?>

View File

@ -53,6 +53,14 @@ $(document).ready(function(){
$('<div id="dialog"></div>').dialog(dialogOpts);
return false;
});
$('[data-load-remote]').on('click',function(e) {
$('button.submit').prop('disabled', true);
e.preventDefault();
var $this = $(this);
var remote = $this.data('load-remote');
if(remote) {
$($this.data('remote-target')).load(remote);
}
});
});