부트 스트랩 모달에 변수를 전달합니다.

Question

동적으로 확인란을 선택 취소하고 동적으로 숨기거나 폼에 나타나는 목록의 일부인 menu_entry를 표시하는 자바 스크립트 확인/취소 팝업 상자가 있습니다. 확인 버튼이 js 팝업 상자를 확인합니다.

지금 js confirm을 부트 스트랩 모달로 변경하려고합니다.하지만 부트 스트랩 모달 코드에 변수를 전달하고 js confirm 팝업 상자의 동일한 기능을 얻는 방법을 잘 모릅니다.

다음

{% for id, menu_entry, selected, item_count in menu_entries %} 

    <div class="available_resume_details_height"> 
     <input type="checkbox" 
       style="width:1.5em; height:1.5em;" 
       name="selected_items" 
       value="{{ id }}" 
       {% if selected %}checked="checked"{% endif %} 

       onclick="checkboxUpdated(this, {{ item_count }}, '{{ menu_entry.label }}', {{ id }});" 
     /> 

     <span style="cursor: pointer;" 
       rel="popover" 
       data-content="{{ menu_entry.tooltip }}" 
       data-original-title="{{ menu_entry.label }}" 
       {{ menu_entry.label }} 
     </span> 

    </div> 

{% endfor %} 

목록을 숨길/확인 팝업을 표시하고 체크 박스와 쇼를 취소하는 내 자바 스크립트 코드 : 여기

상자를 팝업 확인 자바 스크립트 호출을 가지고 내 작업 html 코드입니다 항목 :

function checkboxUpdated(checkbox, count, label, id) { 
    if (checkbox.checked) { 
     $('#menu_entry_' + id).show(); 
    } else { 
     if (count > 0) { 
      if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) { 
       checkbox.checked = true; 
       return; 
       } 
      } 
     $('#menu_entry_' + id).hide(); 
    } 
} 

다음은 부트 스트랩 모달을 호출하는 새로운 html 코드입니다. 그러면 부트 스트랩 모달이 나타납니다.

{% for id, menu_entry, selected, item_count in menu_entries %} 

    <div class="available_resume_details_height"> 
     <input type="checkbox" 
       style="width:1.5em; height:1.5em;" 
       name="selected_items" 
       value="{{ id }}" 
       {% if selected %}checked="checked"{% endif %} 

       {% if selected %} 
        data-confirm="{% blocktrans with entry_label=menu_entry.label %}Are you sure you want to remove your {{ item_count }} selected {{entry_label}} Resume Details?{% endblocktrans %}" 
       {% endif %} 

     /> 

     <span style="cursor: pointer;" 
       rel="popover" 
       data-content="{{ menu_entry.tooltip }}" 
       data-original-title="{{ menu_entry.label }}" 
       {{ menu_entry.label }} 
     </span> 

    </div> 

{% endfor %} 

다음은 작동하지 않는 부트 스트랩 모달 코드입니다. 나는 변수를 전달하고, JS의 동일한 기능을하는 방법을 확실하지 오전 확인 팝업 :

$(document).ready(function() { 

     $('input[data-confirm]').click(function(ev) { 

      var href = $(this).attr('href'); 

      if (!$('#dataConfirmModal').length) { 

       $('body').append('<div id="dataConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="dataConfirmLabel">{% trans "Confirm" %} - {{ resume_detail_temp_value }}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="dataConfirmOK">{% trans "Confirm" %}</a></div></div>'); 

      } 

      $('#dataConfirmModal').find('.modal-body').html($(this).attr('data-confirm')); 

      $('#dataConfirmModal').modal({show:true}); 

      $('#dataConfirmOK').click(function() { 

       // handle checkbox function here. 

      }); 

      return false; 
     }); 

    }); 

부트 스트랩 모달/목록 항목을 숨기고 확인 버튼을 선택한 경우에만 체크 박스를 체크 해제 표시되어야합니다.

편집 : ADDED 체크 박스 CODE :

<input type="checkbox" 
     style="width:1.5em; height:1.5em;" 
     name="selected_items" 
     value="{{ id }}" 
     {% if selected %}checked="checked"{% endif %} 
     onclick="checkboxUpdated(this, {{ item_count }}, '{{ menu_entry.label }}', {{ id }});"/> 

Answer 1

데이터는 당신이 원활한 m의 기능에 필요한 데이터를 전달하는 데 도움이 될 수 속성 anner를 사용하면 유지 보수가 불편한 인라인 JavaScript를 피할 수 있습니다. 다음과 같이 세 가지 이벤트 리스너를 설정합니다

function checkboxUpdated(checkbox, count, label, id) { 
    var checkbox = this, 
     count = $(checkbox).data('count'), 
     label = $(checkbox).data('label'), 
     id = checkbox.value; 
    if(checkbox.checked) { 
     $('#menu_entry_' + id).show(); 
    } else { 
     if (count > 0) { 
      $('#confirm_modal').data('element', checkbox).find('div.modal-body p:first') 
      .html('You have ' + count + ' saved ' + label + '. Are you sure you want to delete your ' + count + ' saved ' + label + '?').end() 
      .modal('show'); 
      return; 
     } 
     $('#menu_entry_' + id).hide(); 
    } 
} 
$(function() { 
    $(':checkbox').on('change', checkboxUpdated).change(); 
    $('.confirm-no').on('click', function() { 
     var element = $('#confirm_modal').data('element'); 
     element.checked = true; 
    }); 
    $('.confirm-yes').on('click', function() { 
     var element = $('#confirm_modal').data('element'), 
      id = element.value; 
     $('#menu_entry_' + id).hide(); 
    }); 
}); 

DEMO

Answer 2

은 내가 당신을 도울 수 있기를 바랍니다. 내 코드는 여기 http://jsfiddle.net/p0mpv9e0/3/에서 볼 수 있습니다.

입력 요소에 'data-confirm'속성을 사용하는 것을 잊어 버린 이유는 코드가 작동하지 않는 이유입니다. 그것은해야한다 :

<input type="checkbox" data-confirm ... /> 

난 당신이 PAS 변수들에 의해 뜻 모르겠어요하지만 당신은 입력 요소에 저장된 데이터를 얻으려면 당신이 변수 "이"내부의 이벤트 콜백을 사용하여 얻을 수 있습니다.

$('input[data-confirm]').click(function() { 
    var self = this; // it's object that store data from input element 
}); 

Answer 3

http://jsfiddle.net/n0ypwceo/3/

**HTML** 

<div class="available_resume_details_height"> 
    <input type="checkbox" data-confirm='Are you sure you want to remove? [1] ' value="id1" /> <span style="cursor: pointer;">Checkbox</span> 

    <br/> 
    <input type="checkbox" data-confirm='Are you sure you want to remove? [2]' value="id2" /> <span style="cursor: pointer;">Checkbox</span> 

</div> 

<div id="dataConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="dataConfirmLabel">Confirm?</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">"Cancel"</button>&nbsp;&nbsp;<a class="btn-u btn-u-blue" id="dataConfirmOK">"Confirm"</a></div></div> 

<div id="menu_entry_id1" style="display:none">menu entry id 1</div> 
<div id="menu_entry_id2" style="display:none">menu entry id 2</div> 

JQ UPDATE :

// global vars 
//checkbox that is clicked 
var $checkboxClicked; 
//If the confirm button is clicked 
var confirm=false; 

$(document).ready(function() { 

    $('input[data-confirm]').click(function (ev) { 

     //box that is clicked placed in a variable 
     $checkboxClicked = $(this); 
     //get and store confirm text 
     var dataConfirmTxt=$checkboxClicked.attr('data-confirm') 

     confirm = false; 

     //var href = $(this).attr('href'); 

     //append confirm text 
     $('#dataConfirmModal').find('.modal-body').html(dataConfirmTxt); 
     //show moadl 
     $('#dataConfirmModal').modal('show') 
     //if confirm button selected 
     $('#dataConfirmOK').click(function() { 

      // the confirm button is clicked 
      confirm=true; 

      // hide modal 
      $('#dataConfirmModal').modal('hide') 

     }); 

     return false; 
    }); 

    //modal event: before hide  
    $('#dataConfirmModal').on('hidden.bs.modal', function (e) { 

     //get menu id 
     var id=$checkboxClicked.val(); 
     //alert(id+'/'+confirm);   
     if(confirm==true)  
     { 
      // check checkbox 
      $checkboxClicked.prop('checked', true); 
      // show menu entry 
      $('#menu_entry_' + id).show(); 
     } 
     else 
     { 
      // uncheck checkbox 
      $checkboxClicked.prop('checked', false); 
      // hide menu entry 
      $('#menu_entry_' + id).hide(); 
     } 
    }) 

});