Opening dialog() not working

Question

Well, in a way I made some changes to my code, which is instead of using a table i am using a list hierarchy in HTML li.

The code in the fiddle is exactly the same as my code within the system (with the difference that the li are generated dynamically).

But no way mine $('#dialog').dialog() opens when I go to test inside the system. This is strange, because in fiddle it works normally.

On the console he shoots me the next stack:

Uncaught TypeError: undefined is not a function  service:1084
 (anonymous function)   jquery.js:4618
 jQuery.event.dispatch   jquery.js:4302
 elemData.handle

I’ve tried to change the place of the div that contains the id="dialog", but I was unsuccessful.

Answer 1

The problem and some confusion of yours (and mine, because I had to study jQuery UI and Bootstrap to answer) is that both Bootstrap and jQuery UI have dialogs/modals. So in his code he was loading Bootstrap but using Javascript/jQuery code for a jQueryUI dialog.

My answer assumes that you continue to use Bootstrap, and removes part of the code you had that was for jQuery UI.

So you need to change:

#1 - join the modal/dialog HTML somewhere on the page, for example:

<!-- 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Tem a certeza?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Apagar</button>
      </div>
    </div>
  </div>
</div>

#2 - change the HTML of the buttons to have Bootstrap attributes:

data-toggle="modal" data-target="#myModal"

#3 - change Javascript to use the Bootstrap library way

$('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // botão que abriu o modal
    var aRemover = button.closest('tr');
    $('#confirmar').on('click', function () {
        $('#myModal').modal('hide')
        aRemover.fadeOut(500, function () {
            aRemover.remove();
        });
        // aqui pode chamar o seu AJAX
    });
});

$('#myModal').on('hide.bs.modal', function (event) {
    $('#confirmar').off('click');
});

Note that in this case/example I used the suggested HTML in the Bootstrap documentation, and gave an ID to the delete button to be more convenient. The HTML I added is:

<!-- 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">Tem a certeza?</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                <button type="button" id="confirmar" class="btn btn-primary">Confirmar</button>
            </div>
        </div>
    </div>
</div>

P.S.: I saw now that you edited the question to use lists instead of table. Then you need to change:

var aRemover = button.closest('tr');

for

var aRemover = button.closest('li');

Answer 2

Using your basic jsfiddle I made some modifications. I believe I have understood correctly what you want.

I put the remove() outside the successfrom AJAX for you to see working, then just put it inside back.

Link jsfiddle