I have a modal for creating new post. I want to allow the user to select departments for sharing so I’m using checkboxes for choosing the audience.
HTML:
<div class="modal fade" id="createNewPostModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Create New Post</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <div class="container"> <form method="post" id="createNewPostForm"> <textarea rows="3" name="text" placeholder="Write something..."></textarea> <div> <p>Select audience to share</p> <div> <input type="checkbox" id="depACheckBox"> <label id="depACheckBoxLabel" for="depACheckBox"></label> <input type="checkbox" id="depBCheckBox" > <label id="depBCheckBoxLabel" for="depBCheckBox"></label> <input type="checkbox" id="depCCheckBox"> <label id="depCCheckBoxLabel" for="CheckBox"></label> </div> </div> <button type="submit" class="btn btn-success" onclick="return createNewPost(this.parentNode);" id="createNewPostButton" data-dismiss="modal">Share</button> </form> </div> </div> </div> </div> </div>
Different users have different departments to be shown and they are saved in mongoDB user document. I need to set the labels of the checkboxes on loading the modal.
I’m getting user’s document on page load, so my attempt inside the getUser function:
$(document).ready(function() { $("#createNewPostModal").on('load', function(){ document.getElementById('depACheckBoxLabel').innerText = window.user.depA.name; document.getElementById('depBCheckBoxLabel').innerText = window.user.depB.name; document.getElementById('depCCheckBoxLabel').innerText = window.user.depC.name; }); });
I tried innerHTML as well but label still remains empty. How do I set the label text as or after the modal is shown?
Advertisement
Answer
If you call onload
on anything other than window
it will have no effect.
If you want to check for the #createNewPostModal
div before running your function you can do something like the below example:
$(document).ready(checkModal); function checkModal () { if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page document.getElementById('depACheckBoxLabel').innerHTML = "this"; document.getElementById('depBCheckBoxLabel').innerHTML = "works"; document.getElementById('depCCheckBoxLabel').innerHTML = "now"; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade" id="createNewPostModal"> <p>Select audience to share</p> <div> <input type="checkbox" id="depACheckBox"> <label id="depACheckBoxLabel" for="depACheckBox"></label> <input type="checkbox" id="depBCheckBox"> <label id="depBCheckBoxLabel" for="depBCheckBox"></label> <input type="checkbox" id="depCCheckBox"> <label id="depCCheckBoxLabel" for="CheckBox"></label> </div> </div>
Feel free to adjust the check for :visible
to something that suits your needs when referring to that container.
Additionally, as requested in your comment, if you want to call this function onclick
you can do this:
$('button').click(checkModal); function checkModal () { if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page document.getElementById('depACheckBoxLabel').innerHTML = "this"; document.getElementById('depBCheckBoxLabel').innerHTML = "works"; document.getElementById('depCCheckBoxLabel').innerHTML = "now"; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade" id="createNewPostModal"> <p>Select audience to share</p> <div> <input type="checkbox" id="depACheckBox"> <label id="depACheckBoxLabel" for="depACheckBox"></label> <input type="checkbox" id="depBCheckBox"> <label id="depBCheckBoxLabel" for="depBCheckBox"></label> <input type="checkbox" id="depCCheckBox"> <label id="depCCheckBoxLabel" for="CheckBox"></label> </div> </div> <button onclick="checkModal()">Click</button>
Just swap button
for whatever element you want to trigger the function from.
Lastly, if it isn’t necessary to wait for the #createNewPostModal
div to load then just call your function like this and it should work:
$(document).ready(function() { document.getElementById('depACheckBoxLabel').innerHTML = window.user.depA.name; document.getElementById('depBCheckBoxLabel').innerHTML = window.user.depB.name; document.getElementById('depCCheckBoxLabel').innerHTML = window.user.depC.name; });