모달이 한 번에 표시되지 않습니다.

Question

테이블이 있고 각 행에 삭제 버튼이 있습니다. 삭제 버튼을 누르면 모달이 나타나 몇 가지 확인을 요청해야합니다.

여기의 문제는 처음으로 페이지를로드하는입니다. 모드를 보려면 두 번 클릭해야합니다 (삭제 버튼에서). 일단 내가 그랬다면 다음 번에 모든 행의 삭제 버튼을 누르면 모달이 한 번에 나타납니다. 한 번 클릭하면됩니다.

나는 왜 그것을 고칠 수 있는지 알고 싶다.

보기 :

<!-- modal --> 
    <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
     <h3 id="myModalLabel3">Eliminar</h3> 
    </div> 
    <div class="modal-body"> 
     <p></p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button> 
     <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button> 
    </div> 
    </div> 
    <!-- end modal --> 

JS 파일 :

function callToModal(data){ 
$('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>' + ' ?'); 

    $('.confirm-delete').on('click', function(e) { 
    e.preventDefault(); 
    var id = $(this).data('id'); 
    $('#myModal3').data('id', id).modal('show'); 
    }); 

    $('#btnYes').click(function() { 
    // handle deletion here 
    var id = $('#myModal3').data('id'); 
    // alert(id); 
    $.ajax({ 
    url: "deleteFrontUser", 
    type: 'POST', 
    data: 'id='+id, 
     success: function(html){ 
     // alert(html); 
     $('[data-id='+id+']').parents('tr').remove(); 
     $('#myModal3').modal('hide'); 
     }  
    }); 
    return false; 
    }); 
}; 

Answer 1

문제를 전달할 수

$('#myModal3').modal('show'); 

이 후 내가이었다이었다 함수 호출 (한 번의 클릭) 후 아무것도 트리거되지 않았습니다. 나는 코드를 바꾼다. 그리고 지금 그것은 매우 효과적이다! 여기 당신이 그것을 확인하실 수 있습니다 :

http://bootply.com/97366

보기 :

내 질문에 그 동일하지만, 단지 "myModal"에 모달 이름을 바꿨다.

JS 파일 :

$('#myModal').on('show', function() { 
var id = $(this).data('id'), 
username = $(this).data('usern'); 

$('#myModal .modal-body p').html("Desea eliminar al usuario " + '<b>' + username + '</b>' + ' ?'); 
}) 

$('.confirm-delete').on('click', function(e) { 
    e.preventDefault(); 

    var id = $(this).data('id'); 
    var user = $(this).data('title'); 

    $('#myModal').data('id', id).modal('show'); 
    $('#myModal').data('usern', user).modal('show'); 
}); 

$('#btnYes').click(function() { 
var id = $('#myModal').data('id'); 

$.ajax({ 
    url: 'deleteFrontUser', 
    type: 'POST', 
    data: 'id='+id, 
    success: function(html){ 

    $('[data-id='+id+']').parents('tr').remove(); 
    $('#myModal').modal('hide'); 
    }  
}); 
return false; 
}); 

내가 또 무슨 짓을이처럼 HTML에서 "데이터 제목"atribute을 추가했다 :

<td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="{$frontuser->username}" data-id="{$frontuser->id}">Eliminar {$frontuser->id} {$frontuser->username} </a></td> 

데이터 제목을 저장하므로 사용자 이름을 JQuery와 그것 나중에 sustract 수 있습니다. 제발 내가 똑똑한 템플릿 엔진을 사용하고 있습니다. 이 나 같은 초보자를 도울 수

희망 : 당신이

Answer 2

당신이 통과 ID를 저장하는 시도가 글로벌에 (나는 그것이 목록에서 사용자의 ID입니다 가정) 변수는 항상 삭제 단추를 누른 해당 행의 마지막 ID로 대체됩니다.

다음 방금 같은 모달 호출 할 수 있습니다 : 전역 변수에서 ID를 얻고 아약스 게시물에