Bug, button disappearing when opening dialog box

Question

Look at the snippet below, the "button" moves alone to the dialog window when it appears and after clicking some action of the window, the "button" disappears.

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>

How should I proceed in this case so that the button stays in the same place!?

Answer 1

Ideally you don’t do this directly in the form tag.

Create a div so it can receive the JS value and make the selector change.

Follows the code:

$('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>