CODEWITHSUNDEEP
jquerybootstrap-modal
Binoy Cherian
Binoy Cherian

Reputation: 384

Handling dynamic elements in a bootstrap modal

An anchor loads calls my bootstrap modal as follows

<a class="btn" data-popover="popover" data-content="" data-id="" data-form="das" data-toggle="modal" data-target="#DownloadAsModal"></a>

The bootstrap modal has some checkboxes, which i want to be unchecked each time when the modal loads and so I found a jquery on some posts as

$('#DownloadAsModal').on('show.bs.modal', function () {
  $('#jpgCheck').prop('checked', false);
  $('#jpgcmykCheck').prop('checked', false);
  $('#jpgrgbCheck').prop('checked', false);
}

I could not get the checkbox state to be unchecked. I'm not sure what I'm missing here. I can alert the values returned by the below on a clicking event for a different button and I get proper values true/false 

var isJpgChecked = $('#jpgCheck').prop('checked', false);

EDIT 2 Adding the modal which loads the template using the ViewBag populated from a C# controller.

<div class="modal fade modal-wide" id="DownloadAsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Download Options</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <input type="text" id="mdb_document_id" value="" disabled>

                <!-- Content to be loaded here-->
                @Html.Raw(HttpUtility.HtmlDecode(@ViewBag.Download_As_Modal_Body))

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="Convert">Convert</button>
                <button class="btn grey" type="button" data-dismiss="modal"><i class="fa fa-times"></i> @MediabaseUI.GetResourceValue("BtnClose")</button>
            </div>
        </div>
    </div>
</div>

Post I have referred to : stackoverflow, Any tips would be helpful.

Upvotes: 0

Views: 925

Answers (1)

TJBlackman
TJBlackman

Reputation: 2313

You need to include the HTML that should replace:

<!-- Content to be loaded here-->
@Html.Raw(HttpUtility.HtmlDecode(@ViewBag.Download_As_Modal_Body))

Because it is likely a problem with your selector. I was able to make a working demo that has 3 checkboxes, and the first two reset to false every time the modal shows, and the third one does not. You should be able to solve your problem by reviewing this. If not, post ALL your html, no razor code pls.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<a class="btn" data-popover="popover" data-content="" data-id="" data-form="das" data-toggle="modal" data-target="#DownloadAsModal">Click to show modal</a>

<div class="modal fade modal-wide" id="DownloadAsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Download Options</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- html replacing razor content for demo purposes -->
                <input type="checkbox" class="reset" /> I will always be reset <br/>
                <input type="checkbox" class="reset" /> So Will I<br/>
                <input type="checkbox" /> I will never be reset<br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="Convert">Convert</button>
                <button class="btn grey" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
// on show.bs.modal
// find all inputs with class="reset" (may be different for you)
// loop over each of them, reset prop to false

$('#DownloadAsModal').on('show.bs.modal', function () {
  $(this).find('input.reset').each(function(index, item){
    $(item).prop('checked',false);
  });
}); 
</script>

JS Fiddle Demo

Good Luck!

Upvotes: 1

Related Questions