Updating modal body and modal footer using javascript?

user_8420068 0
Viewed 2961

I have a modal which gets its content dynamically. The content goes to two divisions modal-body and modal-footer. But the problem is only modal-body is changed dynamically and modal-footer remains the same.

This is the snippet of html code(includes bootstrap classes):

    <a href='#' data-toggle='modal' data-target='#removeCandidateModal' onclick="removeCandidate()">Remove</a>
<div class="modal fade" id="removeCandidateModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remove Candidate</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="remove-candidates-modal-body">
    
                </div>
                <div class="modal-footer" id="remove-candidates-modal-footer">
    
                </div>
            </div>
        </div>
    </div>

The javascript part:

function removeCandidate() {
 let id="45678";
 let name="Bob";
 let election_type="BHVC";
        document.getElementById('remove-candidates-modal-body').innerHTML = '<p>Are you sure you want to remove the following candidate<br> Candidate Name:' + name +
            '<br>Candidate ID:' + id +
            '<br>Elections:' + election_type + '</p>';
        document.getElementById('remove-candidates-modal-footer').innerHTML = '<div class="modal-footer">' +
            '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
            '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>\n' +
            '            </div>';
    }

The current output is this(it doesnt show the footer elements):

output

html jquery javascript
3 Answers

Working fiddle.

You are so close, your code should work fine if you just remove the extra div :

<div class="modal-footer">

So the appended html to the footer, should be :

document.getElementById('remove-candidates-modal-footer').innerHTML = '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>' +
      '<button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>';


function removeCandidate() {
  let id = "45678";
  let name = "Bob";
  let election_type = "BHVC";

  document.getElementById('remove-candidates-modal-body').innerHTML = '<p>Are you sure you want to remove the following candidate<br> Candidate Name:' + name +
    '<br>Candidate ID:' +
    '<br>Elections:' + election_type + '</p>';
  document.getElementById('remove-candidates-modal-footer').innerHTML = '' +
    '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
    '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href='#' data-toggle='modal' data-target='#removeCandidateModal' onclick="removeCandidate()">Remove</a>
<div class="modal fade" id="removeCandidateModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Remove Candidate</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="remove-candidates-modal-body"></div>
      <div class="modal-footer" id="remove-candidates-modal-footer"></div>
    </div>
  </div>
</div>

user_42817790

If you're using jQuery the below should work

$(function(){

var id="45678";
var name="Bob";
var election_type="BHVC";

        var modalBody = '<p>Are you sure you want to remove the following candidate<br> Candidate Name:' + name +
            '<br>Candidate ID:' + id +
            '<br>Elections:' + election_type + '</p>';
            
        var modalFooter = '<div class="modal-footer">' +
            '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
            '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>\n' +
            '            </div>';
    

$(".modal-body").html("").html(modalBody);
$(".modal-footer").html("").html(modalFooter);
  $('#removeCandidateModal').modal('toggle');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <a href='#' data-toggle='modal' data-target='#removeCandidateModal' onclick="removeCandidate()">Remove</a>
<div class="modal fade" id="removeCandidateModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remove Candidate</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="remove-candidates-modal-body">

                </div>
                <div class="modal-footer" id="remove-candidates-modal-footer">

                </div>
            </div>
        </div>
    </div>

user_7993420

I think it's not working as you are trying to add another modal-footer class to an existing modal footer class

Try to replace with below code

document.getElementById('remove-candidates-modal-footer').innerHTML = '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
        '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>\n';
user_98577630
Related