text += "<button id=next onclick=calendar(nextDate)>"
text += "<button id=next onclick=calendar(prevDate)>"
This code does not seem to run normally.
I do not know what the problem is.
function calendar(date) {
...........
text += "<tr>"
text += "<td colspan=7>"
text += "<button id=prev onclick=calendar(prevDate)>"
text += "◀"
text += "</button>"
text += "<button id=next onclick=calendar(nextDate)>"
text += "▶"
text += "</button>"
text += "</tr>"
text += "</td>"
text += "</table>";
document.getElementById("cal").innerHTML = text;
}
calendar();
Assuming you have set the onClick function to this function, you are missing semicolons at the ends of your lines ";"
Problems
text += "<button id=prev onclick=calendar(prevDate)>"
text += "<button id=next onclick=calendar(nextDate)>"
You do not use quotes to surround the values of the attributes
You pass the strings prevDate and nextDate instead of their values, but since they don't have any quotes surrounding them, javascript will try to find these two variables, but it won't be able to (unless they're in the global scope)
You don not use any semicolons (;), this probably won't cause a problem but it's still a good idea to use them
Here are a couple of ways that allow you to properly pass the previous and next date:
String Concatenation
Interpolation
Event Listeners
String Concatenation
text += "<button id='prev' onclick='calendar(" + prevDate + ")'>";
text += "<button id='next' onclick='calendar(" + nextDate + ")'>";
Interpolation (ES6)
text += `<button id="prev" onclick="calendar('${prevDate}')">`;
text += `<button id="next" onclick="calendar('${nextDate}')">`;
Event Listeners
text += "<button id='prev'>";
text += "<button id='next'>";
// This goes after document.getElementById("cal").innerHTML = text;
document.getElementById("prev").addEventListener("click", function (event) {
calendar(prevDate);
});
document.getElementById("next").addEventListener("click", function (event) {
calendar(nextDate);
});
Related
I have a problem concerning multiple file uploads in javascript. I am trying to create my own multiple file upload by dynamically adding inputs. This is all easy as pie, but the problem is that whenever I add a new , my previous input-fields of the type "file" get reset.
If I remove the last lines of code where I alter the innerHTML of my parent div, the values of my do not get reset. Does anyone know how this problem can be solved? The javascript code can be found below. Thanks in advance.
if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1)
{
var _row = "<tr id='queue_row_" + items_in_queue + "'>";
_row += "<td>";
_row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>";
_row += "</td>";
_row += "<td>";
_row += _item;
_row += "</td>";
_row += "</tr>";
document.getElementById("upload_queue").innerHTML += _row;
document.getElementById("upload_image_" + items_in_queue).style.display = "none";
items_in_queue++;
document.getElementById("uploader_holder").innerHTML +=
'<input id="upload_image_' + items_in_queue +
'" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' +
'onchange="add_to_upload_queue()" style="display: inline;" />';
}
Yeah... you're going to want to use appendChild instead of modifying the inner HTML:
var myInput = document.createElement("INPUT");
// do stuff to my input
var myContainer = document.getElementById("uploader_holder");
myContainer.appendChild(myInput);
That's the general gist of what you have to do - let me know if you need somethign more specific, but it looks like you've got a good hold on JS already... You're going to want to do that in almost all cases rather than setting inner HTML... So, building your TR as well... you'll have to append the TD to the TR, you'll have to append the TD with your input, you'll have to append your targeted table with the TR, etc.
Im trying to add input where you can select different options for a location. my issue is that its messing up the table and it just does not see me new input option that i've added. I can list other files or pictures if needed.
var items = 0;
function addItem() {
items++;
var html = "<tr>";
html += "<td>" + items + "</td>";
html += "<td><input type='number' name='idNumber[]'></td>";
html += "<td><input type='text' name='itemName[]'></td>";
html += "<td><input type='number' name='itemQuantity[]'></td>";
html += "<td><select name='itemLocation[]' id='location'><option value="Shop" name="Shop">Shop</option></select></td>";
html += "<td><input type='text' name='itemIndex[]'></td>";
html += "<td><button type='button' onclick='deleteRow(this);'>Delete</button></td>"
html += "</tr>";
Just trying to change to location button to a multiple choice selection
you have double quotes inside your string which is breaking your template
to avoid this kind of error you should use template literals its fully supported
Note it is backtick (`) not singlequote (')
see example
var value = "new entry"
var tr = `
<tr>
<td>${value}</td>
<td>${value}</td>
<td>${value}</td>
<td>${value}</td>
<td>${value}</td>
</tr>
`
I am trying to create a 2 column layout in my JavaScript code.
This is the CSS that I need to apply to my JS code:
div#theLeft {
clear:both;
width:15%;
float:left;
}
div#theRight {
width:83%;
float:right;
padding-bottom:20px;
padding-right:30px;
}
How do I apply this to my JavaScript elements in my .js file?
myText = ("
<html>\n<head>\n<title>Resume</title>\n</head>\n<body>\n");
myText += (userName+"<br>");
myText += (address+ " / " +phoneNo +"<br>");
myText += ("<hr width 70%>");
myText += ("PERSONAL\n DETAILS<br>");
myText += ( +personalData+ "<br>");
myText += ("CAREER\n OBJECTIVES<br>");
myText += ( +careerObj+"<br>");
myText += ("EDUCATION<br>");
myText += ( +edubackgrnd+ "<br>");
myText += ("EMPLOYMENT\n EXPERIENCE<br>");
myText += (fromDate+ " - " +toDate+"<br>");
myText += (experience +"<br>");
myText += (fromDate1+ " - " +toDate1+"<br>");
myText += (experience1 +"<br>");
myText += (fromDate2+ " - " +toDate2+"<br>");
myText += (experience2 +"<br>");
myText += (fromDate3+ " - " +toDate3+"<br>");
myText += (experience3 +"<br>");
myText += ("CHARACTER \n REFERENCES<br>");
myText += ("Upon request<br>");
myText += ("BUSINESS \n REFERENCE<br>");
myText += (busRef);
myText += ("</body>\n</html>");
flyWindow = window.open('about:blank','myPop','width=1000,height=500,left=200,top=200');
flyWindow.document.write(myText);
Here is my JS. If I am understanding correctly, I can add html tags in JavaScript between quotes (""); correct?
In order for that CSS to be applied to a particular HTML file it needs to be included between <style></style> tags somewhere. As an alternative (and much better practice) your CSS should be stored in a separate .css file and included using a <link> tag like so:
<link rel="stylesheet" type="text/css" href='static/style.css'>
As a further alternative, if what you meant by including JS in the question was that you want to apply that style dynamically, like when an event takes place on your page, you can do that by using jQuery. There are certainly native ways to do it but, for this sort of thing, I still prefer jQuery.
$("div#theRight")
.css("width", "83%")
.css("padding", "float:right")
.css("padding-bottom", "20px")
.css("padding-right", "30px");
Finally, the best way would be to include a .css file as mentioned above that applies you styles to elements of a certain class. Then, when your event takes place, add or remove that class from your element(s) to apply or remove those styles dynamically.
$("div#theRight").addClass("myClass");
$("div#theRight").removeClass("myClass");
Hope this helps.
I'm trying to follow the prof's example of creating an editable table on double clicking an entry in a HTML table. So my data method looks like this:
function formatData(message) {
var str = "<table border=1>";
for (var i = 0; i < message.length; i++) {
str += "<tr>" + "<td class='editable'>" + message[i].id + "</td>" +
"<td>" + message[i].name + "</td>" +
"<td class='editable'>" + message[i].url + "</td>" +
"<td class='editable'>" + message[i].desc + "</td>" +
"<td>" + "<a href='#' onclick='deleteRequest(this); return false' id='" + message[i].id + "'>delete</a>" + "</td>" +
" + "</td>" + "</tr>";
}
str += "</table>";
return str;
}
I bind a function edit() to the tags whose attributes are of class 'editable.' Then my edit function does:
function edit(elm) {
/* check to see if we are already editing */
if (elm.firstChild.tagName && elm.firstChild.tagName.toUpperCase() == "INPUT")
return;
/* save original content */
var orig = elm.innerHTML;
/* create edit field */
var input = document.createElement("input");
input.type = "text";
input.value = elm.innerHTML;
input.size = 20;
/* convert content to editable */
elm.innerHTML = '';
elm.appendChild(input);
/* position cursor and focus */
if (input.selectionStart)
input.selectionStart = input.selectionEnd = 0;
else
{
var range = input.createTextRange();
range.move("character", 0);
range.select();
}
input.focus();
/* set save trigger callback */
input.onblur = function(){save(elm, input,orig);};
}
I'm confused on how I would save the information and pass it to the web server to update. I need the id, url, and desc to update the web server. Since they double click on a table entry, that just gives me the element at that value, but I don't have the id. Do I change two lines in my formatData to:
"<td class='editable' id='" + message[i].id + "'>" + message[i].url + "</td>" +
"<td class='editable' id='" + message[i].id +"'>" + message[i].desc + "</td>" +
So that way I can ask the webserver for the url and desc with that id value? That seems like a bad way to do it since now two have the same id, but I'm not sure since I'm relatively new to AJAX, HTML, Javascript. Thanks.
Eh, I'll push a bit of help your way.
Basically, from what I gather you're binding a function to each td tag with editable. Well, you can determine the id inside that function.
B/c you can select the parentNode of the current node being edited, and then select the firstChild of that parentNode, so parentNode.firstChild which should be the first td, since remember on each row each of your td's will have a single parent tr. Then you select the firstChild of that td node, which is the text node it contains, and then grab its value, the id. So parentNode.firstChild.firstChild.nodeValue
This might not follow exactly with your code, as you only show parts of it... but this is the gist of the idea. Basically selecting nodes through the DOM and pulling the right one based on the current context.
I'd suggest playing around with it till you get it.
Here's a little bit of sample code for you to think about if you get stuck still. It's meant to be brief.
Basically, each middle column is tagged with the test function on the onfocus event (clicking inside the input). So it's on the input itself, and it pulls the parentNode td, then the next parentNode tr, then the firstChild of tr which is the first td then the firstChild of the first td which is the input on that row, then finally that input's value attribute.
<script>
function test(elem) {
alert( elem.parentNode.parentNode.firstChild.firstChild.value );
}
</script>
<table>
<tr><td><input value="1"/></td><td><input value="stuff" onfocus="test(this)"/></td><td>other stuff</td></tr>
<tr><td><input value="2"/></td><td><input value="stuff3" onfocus="test(this)"/></td><td>other stuff</td></tr>
<tr><td><input value="3"/></td><td><input value="stuff2" onfocus="test(this)"/></td><td>other stuff</td></tr>
</table>
Below is the code that I am using with Jquery to pass a value when a hyperlink is selected on sharepoint disp form.
for(var i=0;i<retval.length;i++)
{
strHTML = strHTML + "<a href='url.aspx?ID= '+retval[i]+' &Source= url'>" + retval[i] + "</a>";
strHTML = strHTML + " ";
}
strHTML = strHTML + "</div>";
$("textarea[Title='Test']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body").html(strHTML);
Its unable to read the value in retval[i], its breaking right at ID. Is the syntax wrong?
If you want the variable to evaluate, it needs to be outside of the quotes (as you did with the actual hyperlink's text):
strHTML = strHTML + "<a href='url.aspx?ID=" + retval[i] + "&source=url ...";
However, I would look at using encodeURIComponent before placing it within a URL:
strHTML = strHTML + "<a href='url.aspx?ID=" + encodeURIComponent(retval[i]) + "&source=url ...";
Also, try to avoid including spaces in the URL (make sure the variable, equal sign (=) and value are close together). Also, given the href attribute's value is surrounded by single quotes (') you want to avoid using them in the middle of the URL (e.g. don't surround the ID's value within the URL with ').
var id = 'foo';
var bad = "<a href='target.aspx?ID='"+id+"''>Invalid</a>";
// bad = <a href="target.aspx?ID='foo''>Invalid</a>
// note that the single quotes now interfere
var good = "<a href='target.aspx?ID="+id+"'>Valid</a>";
// good = "<a href='target.aspx?ID=foo'>Valid</a>";
// note now that the quotes align and the value is acceptable
A bit more readable:
var atag = "url.aspx?ID="+encodeURIComponenet(retval[i])+"&Source=url";
strHTML = strHTML + "<a href='"+atag+"'>" + retval[i] + "</a> ";
Hope this helps!
Since you have the double quotes surrounding the entire string:
"<a href='url.aspx?ID= '+retval[i]+' &Source= url'>"
Its reading the +reval[i]+ as part of the string, what you want to do differentiate between string and command. You will need to use the double quote to end the string and add your command. You will need to change the above to:
"<a href='url.aspx?ID=" + retval[i] + "&Source=url'>"