We Keep Coding

Delete cookie for Mailchimp Popup

I have a wordpress website where you click on a div, and a mailchimp popup form pops up. One issue is, mailchimp stores a cookie to make sure the popup is only done once. But since I'm now doing it on a click, I want to get rid of that cookie.
This is my code:
var mailchimpConfig = {
baseUrl: 'mc.us17.list-manage.com',
uuid: '1356322e2......rest of my code',
lid: '36776d...rest of my code'
};
// No edits below this line are required
var chimpPopupLoader = document.createElement("script");
chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
var chimpPopup = document.createElement("script");
chimpPopup.appendChild(document.createTextNode('require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' + mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '"})});'));
jQuery(function ($) {
document.body.appendChild(chimpPopupLoader);
jQuery(".coming-soon").on("click", function () {
alert("Hello");
document.body.appendChild(chimpPopup);
document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
});
});
So after searching the internet, I found that everyone used this code to remove the cookie.
document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
This issue is, it's not working for me. I've done all testing in incognito and can only get the pop up to work once.

The cookie's name is MCPopupClosed rather than MCEvilPopupClosed. I'm not sure why, but MailChimp must have changed it at some point.
There's also another cookie called MCPopupSubscribed, which is set if the user subscribes instead of closing the popup with the 'X' button. If you want the popup to display even if the user has subscribed, you'll want to clear that cookie as well.
Clearing those two cookies will only make it work once after the page loads, though. I came across this code while looking into the issue, and it works fine if you put the require in the click function instead of a script tag. Doing this also prevents having to remove the script tags generated by the appendChild function every time the element is clicked.
So your updated code looks like this:
var mailchimpConfig = {
baseUrl: 'mc.us17.list-manage.com',
uuid: '1356322e2......rest of my code',
lid: '36776d...rest of my code'
};
// No edits below this line are required
var chimpPopupLoader = document.createElement("script");
chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');
jQuery(function ($) {
document.body.appendChild(chimpPopupLoader);
jQuery(".coming-soon").on("click", function () {
require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": mailchimpConfig.baseUrl, "uuid": mailchimpConfig.uuid, "lid": mailchimpConfig.lid})});
document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
});
});

you missed a cookie:
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
I've just corrected the exact same problem.
Hope this helps,
P.

Using jquery with expiry dates

Can I please get any help finishing this code I did for my website. I'm using jquery and what this code does is its checking the recert date (expiry date) of an application first before a customer can re-apply again, so basically they can only re-apply within 4 weeks of their current application expiry date.
e.g. if a person application expires Aug 31 2016 that means they can only re-apply from Aug 3 2016 to Aug 31 2016 with 4 weeks to be exact. An application last for 3 years.
I provided my code and its working but I don't know if this is the right conditions and all it does is just hide the apply button if expiry date is still not up.
$(document).ready(function(){
var current = new Date();
var expiry = new Date($("#mcs_nextrecertdate").val());
if(current.getTime() > expiry.getTime()){
$("#NextButton").show();
}
else {
$("#NextButton").hide();
}
EDIT: Im testing the codes I receive from the answers based on these dates first can re-apply with 27 august 2016 and the second is a date that can't re-apply yet 20 July 2019

Given your question and explanation of your problem, I'd like to point out a few observations I've made
1. Date validation
var expiry = new Date($("#mcs_nextrecertdate").val());
Whatever #mcs_nextrecertdate is, I'll assume you've already made sure that this "input" element's value is correctly formatted. Otherwise you'll get a JS script error and the whole thing will break
2. Incorrect logic
Based on your explanation, a user can only re-certify WITHIN 4 weeks of the current application's expiry date. I'll assume that #NextButton is a submit button that triggers the new application. Based on that, this expression is wrong...
if(current.getTime() > expiry.getTime()){...}
because you're telling your app to allow users to apply for a certification AFTER the current application has expired, NOT WITHIN 4 weeks after expiration, in other words, users can ONLY re-apply after they're application expired...not before.
3. Server validation
This is just an assumption. I'll also assume this "client-side logic" is just to offer a good user experience of your app and that you are running proper server-side validation otherwise advanced users like me can easily bypass client-side validation, cheat/hack these "constraints" and even bring your application data to an inconsistent state.
Correct Logic
In order to make sure users can re-apply within 4 weeks prior to the current expiry date you need to do the following...
var now = new Date();
var expiry = new Date($("#mcs_nextrecertdate").val());//assuming this has a valid date
var startValidAppDate = new Date($("#mcs_nextrecertdate").val());
//set valid application dates
startValidAppDate.setTime(expiry.getTime() - (7 * 4 * 24 * 60 * 60 * 1000));//4 weeks to milliseconds
if(now < expiry && now > startValidAppDate){
//ok to apply
$("#NextButton").show();
}
Again, ALWAYS make sure you have strong validation on the server. Here's a working snipper...
$(function(){
$('#txtExpiryDateParent').datetimepicker({
format: "YYYY-MM-DD"
});
$("a").click(function(){
var now = new Date();
var expiry = new Date($("#txtExpiryDate").val());
var startValidAppDate = new Date($("#txtExpiryDate").val());
//set valid application dates
startValidAppDate.setTime(expiry.getTime() - (7 * 4 * 24 * 60 * 60 * 1000));//4 weeks to milliseconds
if(now < expiry && now > startValidAppDate){
$(".info.bg-success").show();
$(".info.bg-error").hide();
}
else{
$(".info.bg-success").hide();
$(".info.bg-error").show();
}
});
});
form{
background-color:#eee;
max-width:500px;
padding:30px;
margin:30px;
}
.info{
padding:20px;
border-radius:3px;
text-align:center;
margin-bottom:20px;
display:none;
}
.bg-success{
background-color:#5cb85c !important;
}
.bg-error{
background-color:#d9534f !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<form class="center-block">
<div class="info bg-success">You're good to re-certify</div>
<div class="info bg-error">You can't certify right now</div>
<div class="form-group">
<label for="txtExpiryDate">Expiry Date</label>
<div class='input-group date' id='txtExpiryDateParent'>
<input id="txtExpiryDate" type='text' name="ExpiryDate" class="form-control"
placeholder="Expiry date..." />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<a class="btn btn-default" href="javascript:void(0)">Validate</a>
</form>

Best practices in client-side is to remove your element NOT hide it .
if(current.getTime() > expiry.getTime()){
$("#NextButton").show();
}
else {
$("#NextButton").remove();
}
Ans Best Practices in server-side are to check expiration date there and render HTML without #NextButton element.

When in doubt, always do testing:
$(document).ready(function(){
var current = new Date();
//var expiry = new Date("August 1, 2014");
var expiry = new Date("August 13, 2017");
if(current.getTime() > expiry.getTime()){
$("#NextButton").show();
}
else {
$("#NextButton").hide();
}
});

How can I get selected time and add class via jQuery?

My HTML is dynamic and like that:
<div class="date">
<strong>21</strong>
<span class="month">Jan</span>
<strong class="year">15</strong>
<span class="details"></span>
</div>
And I want get this time and print console via jQuery:
var selectedDate = $('.date');
console.log(selectedDate);
But result is not correct. How can I fix it?
EDIT:
Ok, I solve my problem with that:
console.log(selectedDate.text());
Now, I want add class if event is a past event.
if (selectedDate < now) {
$('.event').addClass('past');
}
But not any error or result.

Try this:
selectedDate = $(".date > .month").text() + " "
+ $(".date > strong:nth-child(1)").text() +
" 20"+ $(".date > .year").text();
console.log(selectedDate); // Jan 21 2015
You could, of course, re-arrange those to output the date according to the format you want -

CRM 2011 - Contact Form Loads with cannot assign to a function result onchange of a birthdate field

Here is the Code that Manipulates the Birthdate and Age, If age is blank I get an error with the field's customized event. I can't seem to figure out why this JavaScript is throwing the "Cannot assign to a function result" error on a Event: onchange, when this error is appearing on form load. Is there a way to Allow the code to have no action if the Birthdate field is blank?
function birthdate_onchange()
{
var age = Xrm.Page.getAttribute("new_age");
var bDay = Xrm.Page.getAttribute("birthdate");
if (bDay.getValue() != null)
{
var now = new Date();
var thisYear = now.getFullYear();
var birthYear = bDay.getValue().getFullYear();
if((bDay.getValue().getMonth()-now.getMonth())>=0)
{
if((bDay.getValue().getMonth()-now.getMonth())==0 && (bDay.getValue().getDate()-now.getDate())<=0)
{
age.setValue(thisYear-birthYear);
}
else
{
age.setValue(thisYear-birthYear-1);
}
}
else
{
age.setValue(thisYear-birthYear);
}
}
else
{
age.getValue()=null;
}
}
I would love some feed back on this as I am new to JavaScript, but want to learn this language very much. Can provide more code or elaboration as needed, as this is just a segment of our Script for Contacts.
Thanks,
PGM
Edit 1 (5/20/2014):
Now that the Age/birthdate field changes are resolved, I am getting a 'fireonchange' object doesn't support property or method 'fireonchange'.
I have a feeling it is coming from this segment of code:
//TODO: could use to be upgraded to 2011 syntax
if (Xrm.Page.getAttribute("srobo_birthdatepre1900").getValue() != null) {
crmForm.all.srobo_birthdatepre1900.style.display = 'inline';
crmForm.all.srobo_birthdatepre1900_c.style.display = 'inline';
crmForm.all.birthdate.style.display = 'none';
crmForm.all.birthdate_c.style.display = 'none';
}
else {
crmForm.all.birthdate.style.display = 'inline';
}
try {
//Sets Age
//TODO: test if this works
Xrm.Page.getAttribute("birthdate").fireOnChange();
}
catch (err1) {
alert("Contact onLoad Error 1" + err1 + " " + err1.description);
}
try {
}
catch (err2) {
alert("Contact onLoad Error 2 " + entity + ": " + err2 + " " + err2.description);
}
} //end on load
I have been trying to switch the CRM 4.0 JavaScript Versioning to the 2011 friendly syntax, but I am still getting the error in my CRM. Could anyone show me where my problem areas are in terms of Syntax?
I have already switched this line:
Xrm.Page.getAttribute("birthdate").fireOnChange();
but still don't see why it would be throwing that fireonchange error?
Thank you so much for all the help so far! I really appreciate it!

Try to change line
age.getValue()=null;
to
age.setValue(null);

reset rich:calendar value on jsf form using java script

I am trying to reset value of rich:calender input box via java script but couldnt do it any way at all. the UI of my form (snippet only) is...
<rich:calendar id="startDate" datePattern="dd MMM yyyy" value="#{classBean.startDate}" popup="true" onchanged="calcDuration();">
</rich:calendar>
the java script is
function calcDuration()
{
sdate =$('frm_course:startDate').component.getSelectedDateString("dd MMM
yyyy");
var currentdate = new Date();
var sdatecmp = new Date(sdate);
if(sdatecmp > currentdate)
{
alert('The Start Date is Greater than today!');
$('frm_viewCourseDetail:startDate').component.value = ""; // 1
document.getElementById('frm_course:startDate').value =""; // 2
}
}
None of the lines 1 and 2 resets the richcalender's value. Help is required here. thanks.

The calendar (and other components) is backed by a JavaScript object which has the methods you need.
Use either #{rich:component('startDate')} or RichFaces.$('startDate') to get a reference to that object and then call resetValue().
For other methods check the docs