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');
}
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 :)
Related
I want to move an image on another one. I saw on forum, the best way to do this is to use destination.appendChild(elementToMove). But when I use it, my elementToMove just disappears.
Here is a fiddle for what I want to do (but that's not working):
JS Fiddle
Here is my JS Code:
var body = document.getElementsByTagName("body")[0];
var td_sign = document.getElementById("sign");
var td_moon = document.getElementById("moon");
var sign = document.createElement("img");
sign.src="http://img11.hostingpics.net/thumbs/mini_723286sign.png";
var moon = document.createElement("img");
moon.src="http://img11.hostingpics.net/thumbs/mini_418048moon.png";
td_sign.appendChild(sign);
td_moon.appendChild(moon);
var testbutton = document.createElement('input');
testbutton.type='button';
testbutton.value='test';
testbutton.onclick = function(){
sign.appendChild(moon);
}
body.appendChild(testbutton);
I just want to use JavaScript.
I have a link that is attached with an "onclick" function. When pressed it attaches an img element into a separate div called "mediaBox". The problem I'm having is that if it's pressed multiple times then it attaches more instances of the img. How can I control this. I'm still new to JavaScript and I prefer to receive this answer in pure Javascript not jQuery, as I will cross that bridge after I have a full understanding of Javascript.
var rkf = document.getElementById("submenulinks").getElementsByTagName("li")[0];
rkf.onclick = function(){
var client = document.getElementById('client');
var description2 = document.getElementById('description2');
var role = document.getElementById('role');
var mediaBox = document.getElementById('mediaBox');
var thumb = document.getElementById("thumb");
var client2 = document.getElementById("client2");
var newImage = document.createElement("img");
client2.innerHTML = "Role - Applications";
client.innerHTML = "RKF Real Estate";
client2.innerHTML = "Role - Applications";
description2.innerHTML = "Quarterly Catalog of Exclusive Listings managed by RKF";
role.innerHTML = "Custom designed Cover and listings content. Tables were also utilized within Indesign. <br><br><b><i> Photoshop and Indesign</i></b>";
newImage.setAttribute("src", "../images/rkf_cover.jpg");
newImage.setAttribute("height", "500px");
newImage.setAttribute("width", "387px");
newImage.setAttribute("alt", "rkf");
newImage.setAttribute("href", "#");
mediaBox.style.backgroundImage = "none";
document.getElementById("mediaBox").appendChild(newImage);
newImage.style.display = "block";
newImage.style.marginLeft = "auto";
newImage.style.marginRight = "auto";
newImage.style.marginTop = "25px";
}
rkf.onclick = function(){
var client = document.getElementById('client');
...
...
...
// Remove the handler after it ran once.
this.onclick = null; // <<<<<========================
}
Since you do want to use jQuery in the future, it's equal to:
$('#submenulinks li:first').one('click', handler);
var button = document.createElement("button");
button.type = "button";
button.className = "button";
button.innerText = "OK";
button.addEventListener("click", function () {
console.log("Hello!");
}, false);
When I do this, the button never gets that event listener. I've tried attachEvent, button.onclick, and nothing seems to work. The button shows up fine with the class and text.
EDIT: So basically what I'm trying to do is programmatically show a "popup" array of divs.
Here is a screenshot of what it looks like: http://i.imgur.com/IqaOq.png, and I set it up like this: var x = new JMTK.Custom.MessageDialog(), then to add a popup, I just type x.addMessage({template: {type: JMTK.Custom.MessageDialog.templates.alert, title: "Alert title", message: "This is a message here", button1: {text: "Hello"}}})
This is the addMessage():
var content = document.createElement("div");
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML
which calls this function:
alert: function (template, element) {
//Array of functions
var callbacks = MessageDialogClass.callbacks;
var alert = document.createElement("div");
var id = Date.now();
alert.id = id;
var header = document.createElement("h1");
header.innerText = (template.title ? template.title : "ALERT");
var paragraph = document.createElement("p");
paragraph.innerText = (template.message ? template.message : "No message specified")
var button = document.createElement("button");
button.type = "button";
button.className = "button";
button.innerText = (template.button1.text ? template.button1.text : "OK");
button.addEventListener("click", function () {
if (template.button1.callback) {
template.button1.callback();
}
//MessageDialogClass.popElement(id);
//delete callbacks.id;
}, false);
alert.appendChild(header);
alert.appendChild(paragraph);
alert.appendChild(button);
callbacks.id = alert;
return alert;
},
But again, when I click on the button, nothing happens, and in the DOM Explorer there is no onclick attribute.
It's hard to say what your solution might be. You've provided good detail about what you want to do with the button click, but I'm afraid there's something else at play. I wonder if you have an element in front of the button that keeps it from receiving the mouse click. I see you're in a WinJS project for Windows 8. You have really good dev tools in VS2012. Break just after you add the button to your DOM and go to the DOM Explorer and see if you find the button. Go to the JavaScript Console and see if you can access the button. See if you can add an event listener manually there. Try adding the button manually in your markup and then see if adding an event works. Hope one of these gets you to the solution. Good luck.
The issue was that I was creating a div in my 'alert' template, and then setting the innerHTML of another div to that div. So it wouldn't allow me to set the event listener because it wasn't part of the DOM.
So instead of doing
var content = document.createElement("div");
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content.innerHTML = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML
I just did
var content = document.createElement("div");
//htmlObject.template is the object that has all the info, 'this' is the scrim element that contains each "white" popup"
content = MessageDialogClass.html.alert(htmlObject.template, this).innerHTML
because alert is returning a div already. So yeah, it had to do with setting the innerHTML rather than just setting it equal to the DOM node.
I think you need append your button before set the event listener.
I am trying to setup a new "a" component using JS function which is called , using following :
function add_div(data){
mydiv = document.getElementById("new_twt");
var link =document.createElement("a");
var text = "you have new conversations";
link.setAttribute("name",text);
link.onclick=function(){new_tweet(data);};
mydiv.appendChild(link);
}
Changes are not reflecting on the webpage , however if I use some other element such as button or new div it gets created instantly, am I missing something?
This works for me:
function add_div(data){
var mydiv = document.getElementById("new_twt");
var link = document.createElement("a");
var text = "you have new conversations";
link.name = text;
link.href = '#';
link.innerHTML = 'link';
link.onclick=function(){ new_tweet(data); return false; };
mydiv.appendChild(link);
}
I've added link text (innerHTML) so you can actually see the link
I've also added "href" so the link behaves as a link (with this you need to prevent default link action, like "return false" in the event listener, to prevent browser from jumping to the top)
Try this:
var mydiv = document.getElementById("new_twt");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm"); //or #
aTag.innerHTML = "you have new conversations";
aTag.onclick=function(){new_tweet(data);};
mydiv.appendChild(aTag);
Here is working JS Fiddle.
i am trying to create href using javascript which should have data-role="button". But the button is not showing. Here is my code.
var a = document.createElement("A");
a.appendChild(document.createTextNode("Skúsiť Znova"));
a.setAttribute("onClick","checkConnection();");
a.setAttribute("data-role","button");
a.setAttribute("data-inline","true");
a.setAttribute("data-corner","false");
I append this to div as child and I can see text and also onClick parameter is working great. But for some reason it isnt showing as button but as normaln href. Any suggestions on how to create jquerymobile button dynamicaly with JS? This is whole code:
$(document).ready(function(){
var a = document.createElement("A");
var div = document.createElement("div");
var span = document.createElement("span");
var p2 = document.createElement("p");
var p = document.createElement("p");
a.appendChild(document.createTextNode("Skúsiť Znova"));
a.setAttribute("onClick","checkConnection();");
a.setAttribute("data-role","button");
a.setAttribute("data-inline","true");
a.setAttribute("data-corner","false");
div.setAttribute("id","alertMessage");
span.appendChild(document.createTextNode("Pripojenie zlyhalo"));
p2.setAttribute("style","text-align: center;");
span.setAttribute("class","red");
p.appendChild(span);
p.appendChild(document.createTextNode(" (skontrolujte nastavenia siete)."));
div.appendChild(p);
p2.appendChild(a);
div.appendChild(p2);
var mainDiv = document.getElementById("alert");
mainDiv.appendChild(div);
$('mainDiv').trigger('create');
var toppos=($(window).height()/2) - ($("#alertMessage").height()/2);
var leftpos=($(window).width()/2) - ($("#alertMessage").width()/2);
$("#alertMessage").css("top", toppos).css("left",leftpos);
});
You can use trigger('create') to apply all of the jQuery Mobile formatting. Full working code:
HTML:
<div id="container"></div>
JavaScript:
var a = document.createElement("A");
a.appendChild(document.createTextNode("Skúsiť Znova"));
a.setAttribute("onClick","checkConnection();");
a.setAttribute("data-role","button");
a.setAttribute("data-inline","true");
a.setAttribute("data-corner","false");
$('#container').append(a).trigger('create');
This can be seen in action here: http://jsfiddle.net/sQ2dA/.
In response to your edits: the issue is that you have mainDiv in quotes, so you are passing a string on this line:
$('mainDiv').trigger('create');
But you should be passing the variable mainDiv:
$(mainDiv).trigger('create');
Please see the working example here: http://jsfiddle.net/P62Cp/.
var a = document.createElement("button");
a.innerText = "Submit";
a.id = "addition";
document.body.appendChild(a);