Alert in image

0

I have:

<img onclick="exportToFile('WORD')" src="${resource(dir: 'images', file: 'word.png')}" />

<form id="reportForm" action="/test/report1">
................
</form>

<script>
 function exportToFile(type) {
    $( "#reportForm" ).submit();
 };
</script>

If you give the image it will redirect to / test / report1, but I want you to ask where you want to redirect and 2 buttons appear to redirect to / test / report1 or / test / report2

    
asked by sirdaiz 28.04.2017 в 10:35
source

1 answer

4

You could create the dialogue using jQuery UI and change the action of the form depending on the button that is pressed:

$(function(){
  var dialog = $("#dialog").dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
    });

  $('#exportButton').click(function() { dialog.dialog('open'); });
  
  $('.report1').click(function(){
    var $form = $('#reportForm');
    $form.action= '/test/report1';
    $form.submit();
  });

  $('.report2').click(function(){
    var $form = $('#reportForm');
    $form.action= '/test/report2';
    $form.submit();
  });

 });
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img src="${resource(dir: 'images', file: 'word.png')}" id="exportButton" />

<form id="reportForm" action="/test/report1">

</form>

<div id="dialog" title="Selección">
  <input type="button" class="report1" value="Report 1" />
  <input type="button" class="report2" value="Report 2" />
</div>
    
answered by 28.04.2017 / 11:03
source