I'm trying to create an ICS file on click of buttons inside each of my divs.
This works fine in Chrome and Firefox. However, it fails to work on IE.
What's wrong with the code in 'window.open'?
Also, how do I change the name of th file based on the event ID?
Here's the code
angular.module('myApp', []).controller('myCtrl', function($scope){
$scope.card = [{
Name: "New Year Celebration",
Description: "",
Venue: "",
StartDate: "Fri Dec 29 2017 23:30:00 GMT+0530",
EndDate: "Sat Dec 30 2017 00:30:00 GMT+0530",
EventID: "1"
}, {
Name: "25th Anniversary Celebration",
Description: "25th Anniversary Celebration of organization",
Venue: "Auditorium",
StartDate: "Wed May 31 2017 17:30:00 GMT+0530",
EndDate: "Wed May 31 2017 20:30:00 GMT+0530",
EventID: "2"
}, {
Name: "Annual Day",
Description: "",
Venue: "",
StartDate: "Fri Oct 13 2017 14:30:00 GMT+0530",
EndDate: "Fri Oct 13 2017 17:30:00 GMT+0530",
EventID: "3"
}];
$scope.add = function(eventObj) {
$scope.eventID= this.eventObj.EventID;
$scope.startDate= this.eventObj.StartDate;
$scope.endDate= this.eventObj.EndDate;
$scope.venue= this.eventObj.Venue;
$scope.subject= this.eventObj.Name;
$scope.result= this.eventObj.Description;
//console.log(this);
$scope.icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:" + $scope.startDate +"\nDTEND:" + $scope.endDate +"\nLOCATION:" + $scope.venue + "\nSUMMARY:" + $scope.subject + "\nDESCRIPTION:"+ $scope.result +"\nEND:VEVENT\nEND:VCALENDAR";
window.open("data:text/calendar;charset=utf8," + escape($scope.icsMSG),"_self");
};
});
.event {
height: 150px;
width: 250px;
border: 1px solid lightgrey;
background-color: skyblue;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="eventObj in card" class="event">
Subject: <span>{{eventObj.Name}}</span>
<br /><br />
Venue:<span>{{eventObj.Venue}}</span>
<br /><br />
Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
<br /><br />
<button ng-click="add(eventObj.EventID)">Add to Outlook</button>
</div>
</div>
Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements in IE.
The solution is to use navigator.msSaveBlob to generate the file and prompt the user to save it. Refer this answer
You could also use something like downloadify instead of data URLs (would work for IE as well) as mentioned here
Related
I want to show Free Events using a checkbox
This is my code
<body ng-app="myApp">
<input ng-click="showFreeEvents()" ng-model="showFreeEvent" value="" type="checkbox" />
<div ng-controller="myCtrl">
<div ng-repeat="o in data">
<span>{{o.eventName}}</span></br>
<span>{{o.eventStartDateTime}}</span></br>
<span>{{o.itemCreatedDateTime}}</span></br>
</br></br>
</div>
</div>
</body>
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$window){
$scope.data=[{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'ANew Event','itemCreatedDateTime': '3/04/2019 5:17:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 02:43 PM','eventName': 'AFeatured Event 3','itemCreatedDateTime': '2/04/2019 1:54:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'Event 9','itemCreatedDateTime': '2/04/2019 1:29:56 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Featured Event 2','itemCreatedDateTime': '28/03/2019 4:59:13 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:55 PM','eventName': 'Featured Event 4','itemCreatedDateTime': '28/03/2019 4:58:54 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Avent 5','itemCreatedDateTime': '28/03/2019 1:29:06 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 05:30 AM','eventName': 'Event 4','itemCreatedDateTime': '28/03/2019 1:29:00 AM',},{'eventStartDateTime': 'Fri, 29 March 2019, 04:00 AM','eventName': 'Event 3','itemCreatedDateTime': '28/03/2019 1:28:54 AM',},{'eventStartDateTime': 'Thu, 21 March 2019, 04:30 AM','eventName': 'Event 2','itemCreatedDateTime': '28/03/2019 1:28:41 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:00 AM','eventName': 'Event 1','itemCreatedDateTime': '28/03/2019 1:28:36 AM',}];
$scope.showFreeEvents = function () {
var found = false;
var isYes = $scope.showFreeEvent == true ? 'Yes' : 'No';
console.log(isYes);
if (isYes == 'Yes') {
$scope.data = $scope.data.filter(function (el) {
if (el.eventName != 'Event 9') {
found = false;
}
});
}
if (isYes == 'No') {
$scope.data = $scope.data.filter(function (el) {
if (el.eventName == 'Event 9') {
found = true;
}
});
}
}
});
JSfiddle
When a checkbox is checked then it should just show Event 9
Any help or suggestion would be appreciated.
Thanks in advance
Here's an updated version...basically we're creatnig a filter so that you can limit the results coming back
<input ng-model="showFreeEvent" value="" type="checkbox" />
<div ng-controller="myCtrl">
<div ng-repeat="o in data | filter:filterFreeEvents">
.....
code related
$scope.filterFreeEvents = function(el) {
if (!$scope.showFreeEvent) {
return true;
}
if (el.eventName != 'Event 9') {
return false;
}
return true;
};
fiddle: https://jsfiddle.net/1xdfLq26/
Move the checkbox inside the div that instantiates the controller:
<body ng-app="myApp">
̶<̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶F̶r̶e̶e̶E̶v̶e̶n̶t̶s̶(̶)̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶s̶h̶o̶w̶F̶r̶e̶e̶E̶v̶e̶n̶t̶"̶ ̶v̶a̶l̶u̶e̶=̶"̶"̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶/̶>̶
<div ng-controller="myCtrl">
<input ng-change="showFreeEvents()" ng-model="showFreeEvent"
value="" type="checkbox" />
<div ng-repeat="o in data">
<span>{{o.eventName}}</span><br>
<span>{{o.eventStartDateTime}}</span><br>
<span>{{o.itemCreatedDateTime}}</span><br>
</div>
</div>
</body>
Also use the ng-change directive instead of ng-click.
For more information, see
AngularJS Developer Guide - Scope Hierarchies
AngularJS ng-change Directive API Reference
I am using daterangepicker to select the start and the end date.
This is my JsFiddle example
The date is working and I can select the start and the end date.
<input type="text" class="date" ng-model="selectDate" />
But how can I pass the selectDate model to the filters so that only those events will be selected where selectDate will match the eventStartDateTime
$scope.data=[{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'ANew Event','itemCreatedDateTime': '3/04/2019 5:17:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 02:43 PM','eventName': 'AFeatured Event 3','itemCreatedDateTime': '2/04/2019 1:54:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'Event 9','itemCreatedDateTime': '2/04/2019 1:29:56 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Featured Event 2','itemCreatedDateTime': '28/03/2019 4:59:13 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:55 PM','eventName': 'Featured Event 4','itemCreatedDateTime': '28/03/2019 4:58:54 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Avent 5','itemCreatedDateTime': '28/03/2019 1:29:06 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 05:30 AM','eventName': 'Event 4','itemCreatedDateTime': '28/03/2019 1:29:00 AM',},{'eventStartDateTime': 'Fri, 29 March 2019, 04:00 AM','eventName': 'Event 3','itemCreatedDateTime': '28/03/2019 1:28:54 AM',},{'eventStartDateTime': 'Thu, 21 March 2019, 04:30 AM','eventName': 'Event 2','itemCreatedDateTime': '28/03/2019 1:28:41 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:00 AM','eventName': 'Event 1','itemCreatedDateTime': '28/03/2019 1:28:36 AM',}];
Any help or suggestion would be appreciated.
Thanks in advance
You can use the Angular.js directive for daterangepicker
Install it then add daterangepicker to your angular.module and initialize your variables:
var app = angular.module("myApp", ["daterangepicker"]);
app.controller("myCtrl", function($scope, $window) {
...
$scope.showFreeEvent = false;
$scope.selectDate = { date: { startDate: null, endDate: null } };
...
Then in your HTML add attribute date-range-picker to any input and bind it to model:
<input
date-range-picker
class="form-control date-picker"
type="text"
ng-model="selectDate.date"
/>
And to filter your events you can use moment().isBefore() and moment().isAfter():
if (!$scope.showFreeEvent) {
return true;
}
if (
$scope.selectDate.date.startDate.isAfter(el.eventStartDateTime) ||
$scope.selectDate.date.endDate.isBefore(el.eventStartDateTime)
) {
return false;
}
Demo: https://codesandbox.io/s/l29yqywx9m
add ng-onchange="filterfunction(dateModelInput)"
this will detect a change in your html,call your filter function. this will update your DOM.
make sure you include the filter into the html that needs the filtering.
<div>{{ctrl.data | filterResult }}</div>
I have a simple VueJs component I'm building that doesn't render at all in IE 10.
Background: The Vue component is a listing of company events, that supports basic filtering and sorting. Unfortunately, I have to support IE10. I am not using babel, but tried to use it in troubleshooting this problem - had no effect
The error I'm getting is 'city' is undefined. IE10 is the only browser experiencing this issue.
Here's a CodePen of just the relevant code. I've added comments to clarify what's going on. Here is just the JS (see CodePen for full code and better context):
/* Server rendered data */
var events = [{
path: "events/residuals-biosolids",
name: "Residuals & Biosolids Conference",
sortDate: "1536165900000",
startDate: "4 September 2018",
endDate: "5 October 2018",
displayDate: "September 4 - October 5, 2018",
state: "WI",
city: "Milwaukee",
booth: "342",
featuredImg: "https://cdn2.hubspot.net/hubfs/4299619/event%20thumb.png"
}, {
path: "events/bio-expo",
name: "Biosolid Expo",
sortDate: "1548979200000",
startDate: "6 February 2019",
endDate: "5 March 2019",
displayDate: "February 6 - March 5, 2019",
state: "MN",
city: "Eagan",
booth: "12",
featuredImg: ""
}, {
path: "events/world-ag-expo",
name: "World AG Expo",
sortDate: "1549670400000",
startDate: "7 February 2019",
endDate: "2 February 2019",
displayDate: "February 7 - 2, 2019",
state: "CA",
city: "Tulare",
booth: "3815",
featuredImg: ""
}];
var eventsDesc = [{
path: "world-ag-expo",
name: "World AG Expo",
sortDate: "1549670400000",
startDate: "7 February 2019",
endDate: "2 February 2019",
displayDate: "February 7 - 2, 2019",
state: "CA",
city: "Tulare",
booth: "3815",
featuredImg: ""
}, {
path: "bio-expo",
name: "Biosolid Expo",
sortDate: "1548979200000",
startDate: "6 February 2019",
endDate: "5 March 2019",
displayDate: "February 6 - March 5, 2019",
state: "MN",
city: "Eagan",
booth: "12",
featuredImg: ""
}, {
path: "residuals-biosolids",
name: "Residuals & Biosolids Conference",
sortDate: "1536165900000",
startDate: "4 September 2018",
endDate: "5 October 2018",
displayDate: "September 4 - October 5, 2018",
state: "WI",
city: "Milwaukee",
booth: "342",
featuredImg: "https://cdn2.hubspot.net/hub/4299619/hubfs/event%20thumb.png?width=760&name=event%20thumb.png"
}];
var selectedStates = ["CA", "MN", "WI", ];
var selectedCities = ["Eagan", "Milwaukee", "Tulare", ];
/*
Vue code below
*/
var app = new Vue({
el: "#sg-events-wrapper",
data: {
message: "Hello Vue!",
dateOrder: "ascending",
selectedCity:"none",
selectedState:"none",
/*the data below is pulled from the script tag in the page.*/
eventCities:selectedCities,
eventStates:selectedStates,
eventList: events,
eventListDesc:eventsDesc,
},
computed: {
eventsSorted:function(){
/*chooses which server generated list to use for rendering events*/
if(this.dateOrder=="ascending"){
return this.eventList;
}
else{
return this.eventListDesc;
}
},
},
methods:{
/*handles the visual filtering when someone sets city and or state*/
isInStateAndCity:function(eventsCity,eventsState){
var citiesMatch;
var statesMatch;
if(eventsCity == this.selectedCity || this.selectedCity=="none"){
citiesMatch = true;
}else{
citiesMatch = false;
}
if(eventsState == this.selectedState ||this.selectedState=="none"){
statesMatch = true;
}else{
statesMatch = false;
}
if(citiesMatch && statesMatch){
return true;
}else{
return false;
}
}
}
});
Troubleshooting steps I've tried:
Used babel, though my code originally isn't written that way.
I used the babel-polyfill - did not seem to have an effect.
I tried to place the js that's in the script tag in the body into the main JS file to see if there was an issue with the js file being loaded for some reason before the code in the HTML. Had no effect.
What I think could be causing the issue: IE10 doesn't like assigning property values to objects like I'm doing. Not certain of this. It's just a guess and I can't think of another way to do it.
Screenshot of IE 10 console error and failed rendering in CodePen in-case it helps.
If you have any ideas but don't have a way to test: I can test any changes and send back a recording of what I see and the console if it has errors.
Posting the answer myself, as others will likely come across this issue too, and there isn't much info out there.
There were two issues. My selectedCities and selectedStates arrays had a comma at the end. Newer browsers don't care about that, but <=IE10 do.
In addition there is a VueJS issue. Someone updated Vue JS to use a new regex string that IE 10 and down do not understand. The fix is to either use an older version of VueJS or replace the regex. Instructions at the source of where I found this info:
https://github.com/vuejs/vue/issues/7946#issuecomment-393713941
I have an object
{
YHOO: [
{
date: Fri Apr 12 1996 00:00:00 GMT-0400 (EDT),
open: 25.25,
high: 43,
low: 24.5,
close: 33,
volume: 408720000,
adjClose: 1.38,
symbol: 'YHOO'
},
...
{
date: Thu Nov 14 2013 00:00:00 GMT-0500 (EST),
open: 35.07,
high: 35.89,
low: 34.76,
close: 35.69,
volume: 21368600,
adjClose: 35.69,
symbol: 'YHOO'
}
],
GOOGL: [
{
date: Thu Aug 19 2004 00:00:00 GMT-0400 (EDT),
open: 100,
high: 104.06,
low: 95.96,
close: 100.34,
volume: 22351900,
adjClose: 100.34,
symbol: 'GOOGL'
},
...
{
date: Thu Nov 14 2013 00:00:00 GMT-0500 (EST),
open: 1033.92,
high: 1039.75,
low: 1030.35,
close: 1035.23,
volume: 1166700,
adjClose: 1035.23,
symbol: 'GOOGL'
}
],
...
}
How do I alter this object so it becomes an array with
[
{
date: Fri Apr 12 1996 00:00:00 GMT-0400 (EDT),
YHOO: 33,
GOOG: 100.34
},
...
]
I know it can become a problem that they potentially not have the same dates, so I guess I should just say that one of the companies have the right dates, and then merge the other companies to these dates and omit those dates that are not in the already selected company.
I guess I should do something like
var data = [];
obj.YHOO.forEach((quote) => {
data.push({
date: quote.date,
YHOO: quote.price,
GOOG: ?
});
});
and instead of the question mark, I can loop through all the objects in array.GOOG and check if the date matches quote.date.
The big problem is that this seems quite computational heavy and the names of the companies can vary, so I cannot guarantee that YHOO and GOOG are present.
I am trying to parse a JSON object that comes in from mongodb but am unable to use it for some reason after parsing.
Here is the piece of javascript function that I am using
-function check(category) {
-var temp = JSON.stringify(category);
-return JSON.parse(temp);
-}
.row.wow.fadeInRight.animated(data-wow-offset='30', data-wow-duration='1.5s', data-wow-delay='0.15s')
.col-md-12
if(articles)
#client-feedbacks.owl-carousel.owl-theme
each article in articles
-var category = article.categories
.feedback-box
.client-image.hidden-xs
img(src=article._.image.fit(250,250), alt='article image')
// MESSAGE OF THE CLIENT
h6.article-title
a(href='/blog/post/' + article.slug, itemprop='url')!= article.title
br
.message!= article.content.brief
// CLIENT INFORMATION
.client
.quote.red-text
i.icon-fontawesome-webfont-294
.client-info
a.client-namea(href='/blog/post/' + article.slug, itemprop='url')!= prettyDate(article.publishedDate)
-var categories = check(category)
.client-company(itemtype="http://schema.org/BlogPosting") #{category[0].name}
Here is what the object looks like when i use json .stringify
{ updatedBy: 5498631c5cbfa2d03f4570e6,
updatedAt: Mon Feb 09 2015 00:30:48 GMT+0530 (IST),
createdBy: 5498631c5cbfa2d03f4570e6,
createdAt: Mon Feb 09 2015 00:30:48 GMT+0530 (IST),
key: 'mongoose',
name: 'Mongoose',
_id: 54d7b2601d88fc4f69d0e081,
__v: 0 },{ updatedBy: 5498631c5cbfa2d03f4570e6,
updatedAt: Mon Feb 09 2015 00:31:44 GMT+0530 (IST),
createdBy: 5498631c5cbfa2d03f4570e6,
createdAt: Mon Feb 09 2015 00:31:44 GMT+0530 (IST),
key: 'green-berrets',
name: 'Green Berrets',
_id: 54d7b298fe85a1c4698b2ec3,
__v: 0 }
I am confused on how to parse it as most of the things i tried did not work