how can I use my function JSONtoDate inside $.getJSON? This doesn´t work... val.timePosted return a string like 1448038589396, this work fine without the function but when I trying use the function to convert the str to date everything disappear
$(document).ready(function() {
function JSONtoDate(num){
var month = num.getMonth() + 1;
var day = num.getDate();
var year = num.getFullYear();
var date = day + "/" + month + "/" + year;
return(date);
}
$.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
var html = "";
var count = 0;
json.map(function(val) {
if(count == 0){
html += "<div class = 'row' >";
}
html += "<div class = 'stories col-md-3'>";
html += "<a href = " + val.link + " > <img src = " + val.image + " width = ' 200px'>";
html += "<p>" + val.headline + "</p> </a>";
html += "<p>" + val.rank + "</p>";
html += "<p>" + JSONtoDate(val.timePosted) + "</p>";
html += "</div>";
count += 1;
if(count == 4){
html += "</div>";
count = 0 ;
}
});
$(".section").html(html);
});
});
Your function JSONtoDate expects a Date object as parameter, but you provide a String - "1448038589396". You can either pass a date, constructed from the Number value val.timePosted
html += "<p>" + JSONtoDate(new Date(parseInt(val.timePosted))) + "</p>";
^^^^^^^^^^^^^^^^^^ ^^
or let your function accept a string parameter:
function JSONtoDate (dateString) {
var date = new Date(parseInt(dateString));
var month = date.getMonth() + 1;
...
You have a JS error here:
1448038589396 is not a Date Object and it throws :
Uncaught TypeError: num.getMonth is not a function
try the following in jsFiddle
in JSONtoDate try the following
function JSONtoDate(num){
var num = new Date(num);
var month = num.getMonth() + 1;
var day = num.getDate();
var year = num.getFullYear();
var date = day + "/" + month + "/" + year;
return date;
}
http://jsfiddle.net/Lbt9jy8c/
I converted a string to UNIX timestamp based new Date() Object
Related
I'm trying to do a college project.
I'm supposed to create 'Notes' add them to an array and keep them in my local storage.
Now the notes should be created with a Fade in effect (transition) using CSS3.
Everything works perfectly until I create the second note at which point my whole array is run over again which makes all the notes to appear in fade.
CSS:
.note_input {
height:255px;
width:200px;
background-image:url('../img/notebg.png');
padding-top:25px;
padding-left:10px;
display:inline-block;
animation: fadein 0.3s;
-webkit-animation: fadein 0.3s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
And this is my JS to create the Array + Note itself:
function AddNote (){
var input = document.getElementById("txt").value;
var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
var time = d.getHours() + ":" + d.getMinutes();
var n = new NoteCrt(input,time,date);
notes.push(n);
Note();
}
function Note(){
var note_d = "<div>";
for (var i = 0 ; i < notes.length ; i++) {
note_d += "<span id='fade' class='note_input'>" + "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time: "+ notes[i].time + "</br>" +"Date: "+ notes[i].date;
note_d += "</span>";
}
note_d += "</div>";
document.getElementById("note_div").innerHTML = note_d;
notes_j = JSON.stringify(notes, null, " ");
localStorage.setItem("NOTE",notes_j);
notes_p = JSON.parse(notes_j);
console.log(notes_p);
}
What happens is that all the notes that are present are recreated with a fade in effect every time...
Any help?
There's no real need to split this functionality over multiple functions.
All you need to do is create the new note and append it to the DOM, instead of recreating all the HTML every time.
function AddNote (){
var input = document.getElementById("txt").value;
var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
var time = d.getHours() + ":" + d.getMinutes();
var n = new NoteCrt(input,time,date);
notes.push(n);
// store
notes_j = JSON.stringify(notes, null, " ");
localStorage.setItem("NOTE",notes_j);
notes_p = JSON.parse(notes_j);
console.log(notes_p);
// show
for (var i = 0 ; i < notes.length ; i++) {
var new_note = document.createElement("span");
new_note.id="fade"; new_note.class="note_input";
new_note.innerHTML += "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time: "+ notes[i].time + "</br>" +"Date: "+ notes[i].date;
}
document.getElementById("note_div").appendChild(new_note);
}
function AddNote (){
var input = document.getElementById("txt").value;
var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
var time = d.getHours() + ":" + d.getMinutes();
var n = new NoteCrt(input, time, date);
var notes = JSON.parse(localStorage.getItem("NOTE")) || [];
notes.push(n);
console.log(notes);
localStorage.setItem("NOTE", JSON.stringify(notes, null, " "));
var node_div = document.getElementById("note_div");
var el = document.createElement('span');
el.id = "fade";
el.classList.add('note_input');
el.innerHTML =
"<div class='flow'>" +
"<p>" + n.input + "</p>" +
"</div>" +
"</br>" +
"</br>" +
"Time: " + n.time +
"</br>" +
"Date: " + n.date;
node_div.appendChild(el);
}
You should note that it appears that you are assigning the id fade to multiple spans. If that is the case, you should consider making it a class.
I want to convert the javascript code below to it's equivalent in JQuery.
Here's the snippet:
<script>
var str = '';
var elem = document.getElementById('formID').elements;
for(var i = 0; i < elem.length; i++)
{
str += "<b>Input Type:</b>" + elem[i].type + "  ";
str += "<b>Input Name:</b>" + elem[i].name + " ";
str += "<b>current Value:</b><i>" + elem[i].value + "</i> ";
str += "<br>";
}
document.getElementById('lblValues').innerHTML = str;
</script>
You can see I'm displaying what Inputs are within a Form element.
But I've reached my understanding of Loops and Elements of an Object. (especially form elements)
<script>
.........
// this much I know!
$("div#lblValues").html(str);
</script>
You can use $("#formID input") selector, this will return an array of inputs inside the form named 'formID'. Then, you can use each function to iterate over it. Hope this helps!
str = ""
$("#formID input").each(function(elem){
str += "<b>Input Type:</b>" + elem.type + "  ";
str += "<b>Input Name:</b>" + elem.name + " ";
str += "<b>current Value:</b><i>" + elem.value + "</i> ";
str += "<br>";
})
Please can you help me with my code?
function tabelleFuellen(eingabeFeldArray) {
for (var eingabeFeldZaehler = 0; eingabeFeldZaehler < eingabeFeldArray.length; eingabeFeldZaehler++)
{
document.cookie += eingabeFeldArray[eingabeFeldZaehler].value + "|";
}
document.cookie += "~";
$('#tableinsert tbody').remove();
var zeilenArray = document.cookie.split('~');
for (var zeilenZaehler = 0; zeilenZaehler < zeilenArray.length - 1; zeilenZaehler++)
{
var spaltenArray = zeilenArray[zeilenZaehler].split('|');
document.getElementById("tableinsert").innerHTML += "<tbody><tr><td>" + spaltenArray[0] + "</td><td>" + spaltenArray[1] + "</td><td>" + spaltenArray[2] + "</td><td>" + spaltenArray[3] + "<td>" + spaltenArray[4] + "</td></tr></tbody>";
}
$('.field1').val('');
$(document).ready(function () {
var eingabeFeldArray = $('.field1');
tabelleFuellen(eingabeFeldArray);
});
}
This code takes value from input fields, saves them into a cookie and writes down into a table. But if the input fields are empty the table will always make a new row with a dot.
How to remove these dots?
I am trying to import information from an XML file, and create a name which, when clicked, will show more information. This information will be inside a div with no display until the header has been clicked.
This is the idea. Doesn't work.
$(document).ready(function () {
$.ajax({
type: "Get",
dataType: "xml",
url: 'service.xml',
success: function (xml) {
$(xml).find('Service[Name="j1979"]').find("Define").each(function () {
var PID = $(this).attr("PID");
var name = $(this).find("Name").text();
var source = $(this).find("source").text();
var doffset = $(this).find("DOffset").text();
var type = $(this).find("Type").text();
var length = $(this).find("Lenght").text();
var scale = $(this).find("Scale").text();
var noffset = $(this).find("NOffset").text();
var units = $(this).find("Units").text();
var moreinfo = "<div id='moreinfo'>source += '\r\n' += doffset += '\r\n' += type += '\r\n' += length += '\r\n' += scale += '\r\n' += noffset += '\r\n' += units</div>";
document.getElementById("j1979").innerHTML += PID += " ";
document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";
document.getElementById("j1979").innerHTML += moreinfo;
});
}
});
});
Sorry for any obvious mistakes and/or ugly code.
I assume that this is what you want to achieve: DEMO
just assume that the script in the demo is inside the success function
first, you have some error in here
document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";
this will not add the p element to the element with id j1979 because you write it like that, where you should be writing it like this
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\" ></p>";
note the quotes at start and end, and the closing tag
second, there's no word or anything inside the p element that indicates that you could click it to show more information, so put the PID inside the p like this
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";
here's the full code with some CSS style to hide it before the user click on the PID
$(document).ready(function () {
var PID = "testPID";
var name = "Random Name";
var source = "Google";
var doffset = "1000";
var type = "A-9001";
var length = "50CM";
var scale = "100";
var noffset = "0";
var units = "Some Units";
var moreinfo = "<div id='moreinfo'>source: " + source + "</br>" + "doffset: " + doffset + "</br>" + "type: " + type + "</br>" + "length: " + length + "</br>" + "scale: " + scale + "</br>" + "noffset: " + noffset + "</br>" + "units: " + units + "</div>";
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
});
#moreinfo {
display: none;
}
#j1979 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="j1979"></div>
From the code you have, you can use '+' operator to concatenate strings.
When you need to use single quote inside string defined with single quote, you can use backslash (\) as escape character before it.
Also, you need to hide the div with class "moreinfo" initially.
As for new line, if you want each attribute in new line in moreinfo class, it can be achieved by using HTML "pre" tag or "br" tag or some other way.
So code would be:
var moreinfo = "<pre id='moreinfo' style='display:none'> source = " + source + "\r\n doffset = " + doffset + "\r\n type = " + type + "\r\n length = " + length + "\r\n scale = " + scale + "\r\n noffset = " + noffset + "\r\n units = " + units +"</pre>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
or
var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
If you want to toggle display on click, you can use ternary operator to give condition in onclick function:
var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display == \'inline-block\' ? document.getElementById(\'moreinfo\').style.display = \'none\' : document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
I wrote a program where I needed to toggle a div with javascript. I found a solution with this code.
function toggle( selector ) {
var nodes = document.querySelectorAll( selector ),
node,
styleProperty = function(a, b) {
return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
};
[].forEach.call(nodes, function( a, b ) {
node = a;
node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
});
You can then call the function with:
toggle('.idOrClass');
make sure you use single quotes around the class or id name
Hope this helps! :)
I need to pass in the selector a hidden field to a javascript function.
This is my function
function deleteAttachments(id,selector){
$('#proof' + id).remove();
//show warning about save
var tmp = selector.val();
var sep = "";
if (tmp != "")
sep = ",";
selector.val(tmp + sep + id);
}
The above function call is inside the following method,
function listAttachments(proofs,selector,hiddenField,after){
//alert(hiddenField.id);
var rows = "<table width=\"70%\">";
for(var i=0; i<proofs.length; i++) {
var proof = proofs[i];
rows += "<tr id=\"proof" + proof["ID"] + "\" width=\"40%\">"
rows += "<td><input type=\"hidden\" value=\"" + proof["filename"] + "\" id=\"Proof" + i + "\" />Uploaded: " + proof["uploaded"] + "</td>"
rows += "<td width=\"90px\"><input type=\"button\" value=\"View...\" onclick=\"viewProof('" + proof["URL"] + "'); \" id=\"btnProof" + i + "\" class=\"btn\"></td>"
rows += "<td width=\"90px\"><input type=\"button\" value=\"Delete\" id=\"btnDelete" + i + "\" onclick=\"deleteAttachments(" + proof["ID"] + "," + hiddenField + ");\" class=\"btn\"/></td></tr>";
}
rows += "</table>";
if(after){
selector.after(rows);
}else{
selector.html(rows);
}
}
Please find the listAttachments function calls (I am using asp.net and tried different ways) below,
listAttachments(visualIds,$('#tblProofs'),$('#hidDeletedAttachments'),true)
or
listAttachments(visualIds,$('#tblProofs'),$('#' + <%= hidDeletedAttachments.ID%>'),true)
When this is rendered the deleteAttachments function accepts the argument as an object (as displayed in the image below).
My question is how I can pass the selector to the function and use it with in the calling function.
You are not passing the selector, you are passing a collection of elements that match the selector.
Instead of passing the hiddenField to listAttachments, pass the hiddenField id.
listAttachments(visualIds,$('#tblProofs'), 'hidDeletedAttachments'),true)
Then create the object in the deleteAttachment function
function deleteAttachments(id,hiddenFieldId){
var selector = $('#' + hiddenFieldId);
$('#proof' + id).remove();
//show warning about save
var tmp = selector.val();
var sep = "";
if (tmp != "")
sep = ",";
selector.val(tmp + sep + id);
}