I wish to generate and insert some new html into my webpage on clicking a button as such.
document.getElementById("generate").addEventListener("click", function(event){
// Get number of steps user has typed in
steps = document.getElementById("steps").value;
console.log(steps);
if (steps == ""){
alert("Please provide number of synthetic steps");
}
// Once click generate button, delete it and steps field to prevent being clicked again.
if (steps != ""){
// Array of elements wish to remove
var removal = ["#steps", "#generate", "#field-wrap"];
for (var i in removal){
$(removal[i]).remove();
}
var page = new pages(steps);
// Obtain html to show in first wrapper
var initial_html = page.initial();
// Put initial html after first box id
$('#wrapper').append(initial_html);
}
});
The page is styled using Bootstrap and I know the static content all works fine with this. The new html content is generated from the Javascript object, "pages":
function pages(step){
this.step = step;
// Function to insert in JME window. Note, had to change id to
jsme_container1 in html and script to enable function to place canvas in correct position.
this.draw = function jsmeOnLoad () {
document.JME2 = new JSApplet.JSME("jsme_container1", "300px", "250px");
// Add identifier to JME object
document.JME2["step"] = this.step;
// Push on to global array
drawing_objects.push(document.JME2);
}
// html to display in place of generate button for first JME object
this.initial = function(){
return "<div id=‘field-wrap’><div id=‘button’><div class='form-groups' style='padding-bottom:5px;'><input autocomplete='off' autofocus class='form-control' name='Quantity'placeholder='Quantity required' type='text' id='quantity' style='width:150px;'/></div><div class=‘dropdown’ style='position:absolute; top:0px; right:0px;'><button class=‘btn btn-primary dropdown-toggle’ id=‘touch’ type=‘button’ data-toggle=‘dropdown’>grams <span class=‘caret’></span></button><ul class=‘dropdown-menu’ id=‘menu’><li><a href=‘#’>milligrams</a></li> <li><a href=‘#’>grams</a></li><li><a href=‘#’>kilograms</a></li></ul></div></div> <form role=‘form’> <div class=‘form-group’><input type='text' class=‘form-control input-sm’ id=‘moles_start’ autocomplete='off' class='0' autofocus class='form-control' name='moles' placeholder='Moles' readonly/></div> <div class=‘form-group’> <input type='text' class=‘form-control input-sm’ autocomplete='off' class='0' autofocus class='form-control' name='smiles' placeholder='Smiles' readonly/> </div> <div class=‘form-group’><input type='text' class=‘form-control input-sm’ autocomplete='off' class='0' autofocus class='form-control' name='MW' placeholder='Molecular Weight' readonly/></div></form></div>";
};
}
I find that the html is inserted into the document fine using the jQuery method "append()", however it is not styled at all like the rest of the document ie it does not seem to pick up and of the Bootstrap and/or document's own CSS. I was wondering if I could get some pointers as to why this might be? Thanks
