Opening dialog () not working

1

Well, somehow I've made some changes to my code, that is to say instead of using table I'm using a% list_html hierarchy.

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

But by no means does my li open when I'm going to test inside the system. This is strange because in the fiddle it works normally.

On the console it triggers 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 have tried to change the place of the div that contains $('#dialog').dialog() , but I did not succeed.

    
asked by anonymous 10.12.2014 / 20:22

2 answers

3

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

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

So you need to change:

# 1 - add the modal / dialog HTML somewhere on the page, eg

<!-- 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 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 the delete button to be more comfortable. 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>

Q: 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');
    
12.12.2014 / 00:06
1

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

I put remove() out of success of AJAX for you to see working, then just put it in back.

Link jsfiddle

    
10.12.2014 / 20:52