Develop Reference

JQuery - Add todays date to div when checkbox is checked

I'm trying to add todays date inside a div when a checkbox has been checked. I can get this to work in the console but not on the page. I don't get any console errors when I run the script in the console or whne the page is loaded. I've tried adding:
$( document ).ready(function()
to the script, but I get an error. Here is my script:
function GetTodayDate() {
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('input[name=cb-switch]').is(':checked') {
$('div#startDate').html(currentDate).appendTo(document);
}
};
Any help appreciated. Thanks in advance.

this is a simple example .you can use this code.
I hope is useful for you.
<script type="text/javascript">
$(document).ready(function()
{
$('#myid').change(function()
{
if ($(this).prop('checked'))
{
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('div#startDate').append("<p>"+currentDate+"</p>");
}
else {
alert("You have elected to turn off checkout history."); //not checked
}
});
});
</script>
myid is id of your checkbox

In your document ready you are missing the click event handler for changes.
$('input[name=cb-switch]').click(GetTodayDate)
IF you only want to call the function on load do
$(document).ready({
GetTodayDate();
});

It looks like there is a minor issue, is(':checked') a Boolean value. and since it is not under if statement it might be saying unexpected {. so change that line of code to:
if($('input[name=cb-switch]).is(':checked')) {
$('div#startDate').html(currentDate);
}
And it will work when you call your method.
To call your method do this:
$("input[name=cb-switch]").change(function(){
GetTodayDate();
});
Hope this helps.
Cheers!!!

Previous selected date doesn't get unselected in calendar

So I only want to have one selected date on my calendar UI, however when I press a new date, the old one is still lit up, and so I can press all the days on my calendar and they'll all light up.
for(var dayCounter = 1; dayCounter <= currMonthDays; dayCounter++){
tempListItem = document.createElement("li");
tempListItem.innerHTML = dayCounter;
$(tempListItem).addClass("day");
//add a hidden element to the day that we can access when we click on it
var temp = months[currMonth] +"/" + dayCounter +"/" + currFullYear;
$(tempListItem).append("<div class = 'hidden'>" + temp + "</div>");
if(dayCounter == date.getDate() && currMonth == date.getMonth()){
tempListItem.setAttribute("id", "current-day");
}
ulDays.appendChild(tempListItem);
}
$(document).on("click", ".day", function()
{
var date = $(this).children(".hidden").text();
console.log(date);
$(document.getElementById("current-day")).removeAttr("#current-day");
$(this).attr("id", "current-day");
});
After removing the current-day class, shouldn't the element lose its CSS?

It looks like you have a small big when you try to remove the id from the current-day. removeAttr expects the name of an attribute. In this case, that attribute would be id, so try this:
$(document.getElementById("current-day")).removeAttr("id");

Replace selected text inside p tag

I am trying to replace the selected text in the p tag.I have handled the new line case but for some reason the selected text is still not replaced.This is the html code.
<p id="1-pagedata">
(d) 3 sdsdsd random: Subject to the classes of this random retxxt wee than dfdf month day hello the tyuo dsds in twenty, the itol ghot qwerty ttqqo
</p>
This is the javascript code.
function SelectText() {
var val = window.getSelection().toString();
alert(val);
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(/\r?\n|\r/g,""));
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(/[^\x20-\x7E]/gmi, ""));
$('#' + "1-pagedata").html($('#' + "1-pagedata").text().replace(val,"textbefore" + val + "textAfter"));
}
$(function() {
$('#hello').click(function() {
SelectText();
});
});
I have also created a jsfiddle of the code.
https://jsfiddle.net/zeeshidar/w50rwasm/
Any ideas?

You can simply do $("#1-pagedata").html('New text here');

Since your p doesn't content HTML but just plain text, your can use both html() or text() as getter and setter.
Also, thanks to jQuery Chaining you can do all your replacements in one statement. So, assuming your RegExp's and replacement values are correct, try:
var $p = $('#1-pagedata');
$p.text($p.text().replace(/\r?\n|\r/g,"").replace(/[^\x20-\x7E]/gmi, "").replace(val,"textbefore" + val + "textAfter"));

Add the date on the top of each group of chats like in what's app

I'm trying to add date on top of the messages sent and receive on a particular day in my chat app. For instance:
-----Yesterday-----
mike: Hello
Jan: Hi
-----Today----
Eunice: Help! I've been trying to do this all day
Fid: Me too. Lets ask for help.
I have written the JS to calculate the date and tried to append to the top of the messages sent daily.
Here is what I've done:
add the day of the week as a classname to messages sent on the day
use jQuery to select the first element with the classname (day of the week).
Firbase is the bomb
Yes for sure
I'm still learning it though
append html tag e.g Today to the first div
Here is my JS
last10Comments.on('child_added', function (snapshot) {
var comment = snapshot.val();
var newDiv = $("<div/>").addClass("comment ").attr("id",snapshot.name()).appendTo("#comments");
FB.api("/" + comment.userid, function(userdata) {
comment.name = userdata.name;
newDiv.html(Mustache.to_html($('#template').html(), comment));
});
var outputTime = $("<span/>").addClass("timespan "+ te.getDayName() +"").attr("id",yiu).appendTo("#comments").text(Timeformat());
var tim = $('.'+ te.getDayName() +'')[0];
$('#'+tim+'').prepend( "<p>Test</p>" );
})
This JS actually gets the first element. but the probelem is, it prepend the text based on the number of element with the same class. i.e if 5 divs contain same classname, it prepends it 5 times. e.g Wednesday Wednesday Wednesday Wednesday Wednesday

I have no way to try out, so I am just guessing here, try this:
last10Comments.on('child_added', function (snapshot) {
(function (te) {
var comment = snapshot.val();
var newDiv = $("<div/>").addClass("comment ").attr("id", snapshot.name()).appendTo("#comments");
FB.api("/" + comment.userid, function (userdata) {
comment.name = userdata.name;
newDiv.html(Mustache.to_html($('#template').html(), comment));
});
var outputTime = $("<span/>").addClass("timespan " + te.getDayName() + "").attr("id", yiu).appendTo("#comments").text(Timeformat());
var tim = $('.' + te.getDayName() + '')[0];
$('#' + tim + '').prepend("<p>Test</p>");
})(te);
})
Let me know it if works. If it fixes your problem, then I will explain in comments.

How do I display an image from a URL using a Variable to create the URL

I am wishing to include an image in a page that will change each day.
My variable string calculation works (can display the url using but am having problems working out how to put the variable as the url this is what I have so far:
<script>
var tD = new Date();
var datestr = "http://www.fakeurl.com/" + (tD.getMonth()+1) + "/" + tD.getDate() + ".jpg";
document.getElementById("+datestr+")
img src='"+ datestr +"' style="border: 0px;" /
</script>
What do I need to do different to get it to actually display my image?
I am a newby please help.

First of all you need to make sure that the script will run after the IMG element has been loaded.
In order to insure this you need to use jQuery.
$(document).ready(myOnloadFunc);
or to use
<body onload="myOnloadFunc()">
While the JavaScript function myOnloadFunc() will include your original code.
There is a mistake in the original code you posted, please see my corrections.
var tD = new Date();
var datestr = "http://www.fakeurl.com/" + (tD.getMonth()+1) + "/" + tD.getDate() + ".jpg";
var imgElement = document.getElementById("imgElementID");
imgElement.src = datestr;
imgElement.style = "border: 0px;" ;
I think you mixed up the variable "datestr" with the IMG element.

<script>
function myFunction()
{
var tD = new Date();
var datestr = "http://www.fakeurl.com/" + (tD.getMonth()+1) + "/" + tD.getDate() + ".jpg";
alert(datestr);
document.getElementById("datestr").src = datestr;
}
</script>
----------------------
HTML:
<img id="datestr" src="" style="border: 0px;"/>
I hope this will help you....