Creating Bootstrap Modal Dialog using JavaScript

Question

I am trying to create a Bootstrap Modal dialog using JavaScript. The reason I am doing it with JavaScript is because I want to be able to render it later using custom elements (i.e. title, error message). I am fairly new to JavaScript so I do not understand why the code is not executed when I call the function errorMessage(). Can anyone please help out by letting me know what the mistake is and how I can correct it? Is there a more efficient way of doing it? Thank you very much.

By the way I did link the modal.js file to the HTML doc and I am aware of bootboxjs, but I don't want to use it for now.

// Creation of the alert message box.
function errorMessage() {
 var Modal = document.createElement('div');
 Modal.id = 'myModal';
 Modal.className = 'modal fade show';
 // To set up the attributes.
 Modal.setAttribute("data-backdrop", "static");
 Modal.setAttribute("data-keyboard", false);
 document.body.appendChild(Modal);
 var dialog = document.createElement('div');
 dialog.className = 'modal-dialog';
 Modal.appendChild(dialog);
 var content = document.createElement('div');
 content.className = 'modal-content';
 dialog.appendChild(content);
 var header = document.createElement('div');
 header.className = 'modal-header';
 content.appendChild(header);
 var title = document.createElement('h4');
 title.className = 'modal-title';
 title.createTextNode = 'Data Error';
 header.appendChild(header);
 var body = document.createElement('div');
 body.className = 'modal-body';
 dialog.appendChild(body);
 var message = document.createElement('p');
 message.createTextNode("Oh... snap. We can't find any items in your list. Please make sure your entry is structured as following:");
 body.appendChild(message);
 var representation = document.createElement('div');
 representation.className = 'well';
 body.appendChild(representation);
 var representationTxt = document.createElement('p');
 representationTxt.style.fontStyle = 'italic';
 representationTxt.createTextNode('> Subheader , tag1 , tag2, tag3');
 representation.appendChild(representationTxt);
 var footer = document.createElement('div');
 footer.className = 'modal-footer';
 dialog.appendChild(footer);
 var closeBtn = document.createElement('button');
 closeBtn.setAttribute("data-dismiss", "modal");
 closeBtn.setAttribute("type", "button");
 closeBtn.className = 'btn btn-primary btn-inverse';
 closeBtn.value = 'I got it. Thanks.';
 footer.appendChild(closeBtn);
 // Show modal dialog box
 $("#myModal").modal('show');
}

• user3562712: Are you actually using jQuery? If so, you could just hard code these elements (instead of making them with JavaScript) with both the class that you want and the hidden class. Then, when an event happens, remove the hidden class.

Answer 1

It is failing on this line: header.appendChild(header); because it cannot append header to itself. Did you mean this?

var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(title);

A debugging tool is invaluable in javascript development (Firebug add-on for Firefox or the built-in tools in Chrome, for example). You would have seen this error right away :)