Modal with title, subject, and time posted - javascript

This might be easy for some, but I'm struggling to make this work.
I created a modal that has title, subject (input area) and timestamp when you click submit.
I would like to output title, subject, and time posted as a list item <li></li>.
var main = function(){
$('.btn-primary').click(function(){
var title = $('#message-title').val();
var post = $('#message-text').val();
$('<li>').text(post).prependTo('.livefeed');
var currentTime = new Date();
var n = currentTime.toLocaleDateString();
document.getElementById("timestamp").innerHTML = n
$('#message-text').val();
});
}
$(document).ready(main);
Here is the Screenshot

try something like this
JAVASCRIPT
$('.btn-primary').click(function(){
var title = $('#message-title').val();
var post = $('#message-text').val();
var currentTime = new Date();
var n = currentTime.toLocaleDateString();
$('ul').append('<li>'+title+' '+post+' '+n+'</li>');
});

Related

How to change title of an event?

I am trying to update the title of the events in the last 7 days in a specific calendar, when an user submits a form.
I have this code now:
function myFunction() {
var form = FormApp.openById('1g4gA7glYWRKOVqOi3z3qxyEGbJgaSg_2Jkry_uOp0Cc');
var responses = form.getResponses();
var len = responses.length;
var last = len - 1;
var items = responses[last].getItemResponses();
var email = responses[last].getRespondentEmail();
var equipment = items[1].getResponse();
var cal = CalendarApp.getCalendarsByName(equipment);
var d = new Date();
var ms = d.getTime();
var sevenDays = 7*24*60*60*1000;
var minus7daysMs = ms - sevenDays;
var minus7days = new Date(minus7daysMs);
Logger.log('Number of events: ' + minus7days);
var events = cal[0].getEvents(minus7days, d);
var title = events.getName;
Logger.log('Event title: ' + title);
events.setTitle('Returned');
}
However, I get that error when running the code: TypeError: events.setTitle is not a function myFunction # update.gs:22
I tried many different ways of doing it, but it always ends with an error. Could you please tell me what I am doing wrong?
Thank you very much for your help!
From your showing script, getEvents(startTime, endTime) returns CalendarEvent[]. And setTitle(title) is a method of Class CalendarEvent. In your script, at events.setTitle('Returned'), setTitle is used to an array. I think that the reason of your issue is due to this. When you want to change all events in events with setTitle('Returned'), how about the following modification?
From:
events.setTitle('Returned');
To:
events.forEach(e => e.setTitle('Returned'));
By this modification, the title of all events in events are changed.
References:
getEvents(startTime, endTime)
setTitle(title) of Class CalendarEvent

How to update URL address using ASP when based on JSON object

I'm making an application of a list of races in a table, this information is gotten from a JSON api. Upon selecting a race in a table I need a window to pop up with the name of the race in the url address bar, so something like asp?=race_name at the end.
How would I go about completing this?
I've looked this up but can't seem to find an answer, my guess is I'm googling the wrong thing as I'm not good at explaining
for (let i = 0; i < jsonObj.length; i++) {
document.getElementById(jsonObj[i].id).onclick = function () {
var newWin = window.open("","","width=700,height=700");
newWin.onload = function () {
var doc = newWin.document; // Create new document in window
var raceName = document.createElement('h3');
var distance = document.createElement('p');
var location = document.createElement('p');
var curPos = document.createElement('p');
var difference = document.createElement('p');
raceName.textContent = jsonObj[i].race_name;
distance.textContent = jsonObj[i].distance;
location.textContent = jsonObj[i].venue_name;
doc.body.appendChild(raceName);
doc.body.appendChild(distance);
doc.body.appendChild(location);
}
}
Here the window pops up and includes the correct information, I now just need to include code that would update the url address to include race name.

How to read a firebase Data using HTML5 and Javascript?

When I want to read the data of my Firebase, nothing appears.
I have tried to read the data using a script for this.
This is my HTML code:
<html>
<head>
<title>Javascript Firebase</title>
Humidity: <humidity></humidity><br>
Clock: <clock></clock><br>
</head>
<body>
and this is my script:
<script type="text/javascript">
var database = firebase.database('javascript-firebase-6567d');
var h document.querySelector('humidity');
var c = document.querySelector('clock');
var pad = function(x){
return x < 10 ? '0' +x : x;
}
var ShowClock = function() {
var d = new Date();
var h = pad(d.getHours());
var m = pad (d.getMinutes());
var s = pad (d.getSeconds());
c.innerHTML = [h,m,s].join(':');
}
setInterval(ShowClock,1000);
var myRef = Firebase('https://javascript-firebase-6567d.firebaseio.com/rooms');
myRef.on('child_changed',function(snapshot){
data = snapshot.val();
h.innerHTML = data.humidity;
});
</script>
The results that I hope is to see the changes that the child "humidity" shows but currently I can not see the results of the clock or the humidity
This code:
myRef.on('child_changed',function(snapshot){
data = snapshot.val();
h.innerHTML = data.humidity;
});
The child_changed event only fires when the data in the location changes. If you're trying to show the current child nodes under a location, you'll want to use child_added:
myRef.on('child_added',function(snapshot){
data = snapshot.val();
console.log(data);
});
The child_added fires immediately after attaching the listener for any existing child node, and then subsequently for any new nodes that are added.

How to update HTML table When updating Firebase?

I'm using child_added and child_changed. The child added works perfectly fine, but the child_changed makes a duplicate in my table. Please help me overcome this. Here is my code:
var rootRef = firebase.database().ref().child("REPORTS").child(date);
rootRef.on("child_added", function(snapshot){
var date = snapshot.child("dateAndTime").val();
var lat = snapshot.child("latitude").val();
var long = snapshot.child("longitude").val();
var link = snapshot.child("link").val();
var report = snapshot.child("report").val();
var status = snapshot.child("status").val();
var needs = snapshot.child("needs").val();
$("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");
});
rootRef.on("child_changed", function(snapshot){
var date = snapshot.child("dateAndTime").val();
var lat = snapshot.child("latitude").val();
var long = snapshot.child("longitude").val();
var link = snapshot.child("link").val();
var report = snapshot.child("report").val();
var status = snapshot.child("status").val();
var needs = snapshot.child("needs").val();
$("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");
});
How can I update my table when a certain value was updated in firebase
Instead of appending a new HTML element, the code that handles child_changed should update the existing HTML element. The easiest way to do this is by ensuring you give the HTML element an id based on snapshot.key in child_added:
var rootRef = firebase.database().ref().child("REPORTS").child(date);
rootRef.on("child_added", function(snapshot){
var date = snapshot.child("dateAndTime").val();
var lat = snapshot.child("latitude").val();
var long = snapshot.child("longitude").val();
var link = snapshot.child("link").val();
var report = snapshot.child("report").val();
var status = snapshot.child("status").val();
var needs = snapshot.child("needs").val();
$("#table_body").append("<tr id='"+snapshot.key+"'><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");
});
Then you can look the element up by its id/key in child_changed and update it:
rootRef.on("child_changed", function(snapshot){
var date = snapshot.child("dateAndTime").val();
var lat = snapshot.child("latitude").val();
var long = snapshot.child("longitude").val();
var link = snapshot.child("link").val();
var report = snapshot.child("report").val();
var status = snapshot.child("status").val();
var needs = snapshot.child("needs").val();
$("#"+snapshot.key).replaceWith("<tr id='"+snapshot.key+"'><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");
});

Display output of Javascript function

I have a javascript function that outputs the date modified of a sharepoint list.
Here is my code:
var ctx = SP.ClientContext.get_current();
var web = ctx.get_web();
var lists = web.get_lists();
var list = lists.getByTitle("Tasks");
ctx.load(list, "LastItemModifiedDate");
ctx.executeQueryAsync(
function() {
var lastmodified = list.get_lastItemModifiedDate();
},
function() {}
);
Which I got from this link. But I am unsure of how to display the output from the function. I tried to display the output in the html tag but still no luck.
Have you tried something like this after you capture the lastmodified date?
// Names are generic and can be changed
var displayElement = document.getElementById("lastModifiedDisplay");
displayElement.innerHTML = lastmodified
document.getElementById

Categories

Resources