1

Reparem no snippet abaixo, o "botão" move sozinho para a janela de diálogo quando ela aparece e após clicar em alguma ação da janela, o "botão" some.

function pergunta() {
        $('#form').dialog({
            resizable: false,
            height: 'auto',
            width: 400,
            modal: true,
            title: 'Criar Ticket?',
            buttons: {
                "Confirmar": function () {
                    $(this).dialog("close");
                    obs = prompt('Inserir alguma observação no ticket?');
                    $('<input/>').attr('type', 'hidden')
                            .attr('name', "obs")
                            .attr('value', obs)
                            .appendTo('#form');
                    $("#form").submit();
                },
                "Cancelar": function () {
                    $(this).dialog("close");
                    console.log('cancelado');
                }
            }
        });
    }
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<form action="#" id="form" method="post" accept-charset="utf-8">

<button id="ticket" name="obs" onclick="pergunta()" type="button" style="
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
                background-color: transparent;
                cursor: pointer;" title="Criar Ticket no Redmine"><img src="https://cdn3.iconfinder.com/data/icons/fatcow/32x32/ruby_add.png" style="height: 32px" alt=""></button>
                </form>

Como devo prosseguir nesse caso para que o botão fique no mesmo lugar!?

1 Resposta 1

1

O ideal é que você não faça isso diretamente na tag form.

Crie uma div para que ela possa receber o valor do JS e faça a alteração do seletor.

Segue o código:

$('div').html(""); //limpa a div

$('div').dialog({
  resizable: false,
  height: 'auto',
  width: 400,
  modal: true,
  title: 'Criar Ticket?',
  buttons: {
    "Confirmar": function() {
      $(this).dialog("close");
      obs = prompt('Inserir alguma observação no ticket?');
      $('<input/>').attr('type', 'hidden')
        .attr('name', "obs")
        .attr('value', obs)
        .appendTo('#form');
      $("#form").submit();
    },
    "Cancelar": function() {
      $(this).dialog("close");
      console.log('cancelado');
    }
  }
});
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<form action="#" id="form" method="post" accept-charset="utf-8">

  <div></div>

  <button id="ticket" name="obs" type="button" style="
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            background-color: transparent;
            cursor: pointer;" title="Criar Ticket no Redmine"><img       src="https://cdn3.iconfinder.com/data/icons/fatcow/32x32/ruby_add.png" style="height: 32px" alt=""></button>
</form>

1
  • Perfeito @PHMV, muito obrigado, funcionou perfeitamente! 23/03/2017 às 20:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .