Fullcalendar V6: call a hook with another hook - javascript

I am adding some custom html to a resource timeline if there are no events for that week. It works on initial page load, but when next or prev buttons are clicked, it needs to be initiated again. I have found the proper way to do this in version 6, is to use datesSet.
However, I can't figure out how to call resourceLandDidMount whenever datesSet is fired. Here is the function I need to run with dateSet:
resourceLaneDidMount : function(arg){
if(arg.el.classList.contains('fc-timeline-lane')){
var theElement = arg.el.querySelectorAll('.fc-timeline-lane-frame > .fc-timeline-events')[0]
setTimeout(function(){
if(theElement.querySelectorAll('.fc-timeline-event-harness').length > 0) {
console.log('has event harness class');
} else {
console.log('has no event harness class');
}
})
}
},

Related

window.addEventListener is listening to window.parent.postMessage twice

When certain button is being clicked from child Iframe this function is being fired:
function someFunc(e) {
some Code
window.parent.postMessage(
{
event_id: 'id_id',
data: {
note: note
}
},
"*"
);
}
In Parent Window it's being listened
window.addEventListener('message', function (event) {
if (event.data.event_id === 'id_id') {
var note = event.data.data.note;
do something with note
}
},false);
The problem here is for one click someFunc() function is being called once but somehow window.addEventListener listener is listening to it twice. Can't find why it's behaving in such way.
I had the same problem in my Angular 8 app.
The only way I got rid of these multiple messages between the listener and the iFrame was to add this code to my component:
ngOnDestroy() {
window.removeEventListener('message', this.messageHandler, false);
}
This leads to the conclusion that there are not multiple messages, but multiple listeners.

EventListener doesn't trigger

I updated my ionic3 to ionic4 and hyperlinks aren't working anymore. So I tried to set a new ClickEvent for them. Unfortunately the click event doesn't work. The content of my event is never reached even If I click some link. I don't get why it's not working.
ngAfterViewChecked() {
if (!this._element) return;
let arrUrls = this._element.nativeElement.querySelectorAll('a');
console.log("arrUrls.length:", arrUrls.length); // Reached and correct
console.log("arrUrls:", arrUrls); // Reached and correct
this.setEventListener(arrUrls);
}
private setEventListener(arrUrls)
{
arrUrls.forEach((objUrl) =>
{
console.log('5412212112121212'); // Reached
console.log(objUrl); // Reached and correct
// Listen for a click event on each hyperlink found
objUrl.addEventListener('click', (event) =>
{
//NOT REACHED
event.preventDefault();
alert('7213983728912798312231'); // Isn't reached
//this._link = event.target.href;
}, false);
});
}
You don't really need to get so detailed and write this all yourself.
Other people have already solved the problem such as the LinkifyJS project.
There is an angular compatible wrapper for it:
https://www.npmjs.com/package/ngx-linkifyjs
Which, once you have done the standard setup process you can use it as either a pipe:
<span [innerHTML]="'Linkify the following URL: https://github.com/anthonynahas/ngx-linkifyjs and share it <3' | linkify"></span>
Or as a service:
import {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';
constructor(public linkifyService: NgxLinkifyjsService) {
const options: NgxLinkifyOptions =
{
className: 'linkifiedYES',
target : {
url : '_self'
}
};
this.linkifyService.linkify('For help with GitHub.com, please email support#github.com');
// result 1 --> see below
this.linkifyService.linkify('For help with GitHub.com, please email support#github.com', options);
// result 2 --> see below
}
}

Function triggers unexpectedly

I have a function which fades out a div, loads replacement HTML in, and then fades the div back in. This function is being called (correctly) when I click on the navigation bar at the top to load content into #main div. It is also called on the "about" page to load different team profiles in.
The bug occurs when changing off the default team profile. When clicking to view another profile, the function repeats every "#main" change that has happened before clicking on the profile.
The website is https://symbiohsis.github.io/. The visible bug can be reproduced by clicking "About", then clicking on another profile, e.g "B". The profile flashes but is not selected. Selecting profiles after the first on works fine.
The fade in/out & load function:
/* ajax load into $(sel) from newView (e.g. about.html) */
function loadView(sel, newView, checkOrCb, cb) {
// one of these events will be called when animations end
var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
// cache element to change
var elem = $(sel);
// if there is a check and callback, do the check
if (cb) {
// if the check fails, exit
if (!checkOrCb(elem, newView))
return 1;
}
// animate out
elem.addClass("animated fadeOut");
// when finished load new page and animate in
elem.one(animationEnd, function() {
// remove fadeOut animation (while keeping elem hidden)
elem.css("opacity", 0).removeClass("fadeOut");
// load new page, then fadeIn
elem.load(newView, function(text, response, ev) {
elem.addClass("fadeIn");
// remove opacity style and animations
elem.one(animationEnd, function() {
elem.css("opacity", "").removeClass("animated fadeIn");
});
// do the callback if one exists
if (cb) {
cb(elem, newView, text, response, ev);
}
else if (checkOrCb) {
checkOrCb(elem, newView, text, response, ev);
}
});
});
}
The navigation bar listeners:
$(".nav_entry").on("click", function() {
loadView("#main",
`${$(this).attr("data-link")}.html`,
function(dummy, newPage) {
return getCurrentPage() != newPage.replace(".html", "");
},
function(dummy, newPage) {
window.location.hash = newPage.replace(".html", "");
});
});
The about listeners:
$(".about_icon").on("click", function() {
var target = $(this);
loadView("#about_info", `about/${this.innerText.toLowerCase()}.md`, function() {
return !target.hasClass("about_selected");
}, function() {
$(".about_selected").removeClass("about_selected");
target.addClass("about_selected");
});
});
// set 2900 team profile as default
$("#about_info").load("about/2900.md");
$(".about_icon:contains(2900)").addClass("about_selected");
How can I fix the bug please? If anyone has any tips on JavaScript conventions that I've missed feel free to add them to your answer/comment :)
This StackOverflow post was what answered my question / fixed the bug.
Q: The transition ends ... but it works 2 times in Google Chrome.
A: This is because Chrome will fire on both thewebkitTransitionEnd and transitionend events.
I use Visual Event to see what (and how many) event listeners were attached to each object. That showed me that there was a lot of end-transition listeners hanging around on #main. I Googled "jquery one not working" and the first result was the answer which is quoted above.
The solution is to have your own alreadyFired variable to make sure it only fires once.
var animationEndFired = false;
elem.addClass("fadeIn");
// remove opacity style and animations
elem.one(animationEnd, function() {
// if only fire once
if (animationEndFired)
return;
animationEndFired = true;

Multiple events fired in jquery function

I have html grid table consisting of comment link in each row.Clicking on any one opens a bootstrap modal with textbox and save button.So I wrote a library consisting of functions related to that comment system.Below is basic code.
HTML :
<td><a class="addComment" data-notedate="somevalue" data-toggle='modal' href='#addnotesdiv' data-oprid="somevalue" data-soid="somevalue" data-type="1"><i class="fa fa-comments-o fa-2"></i></a></td> ..... n
JS :
var Inventory={};
Inventory.notes={
defaults:{
type:'1',
soid:0,
operator_id:0,
date:'',
target:'div#addnotesdiv',
},
init:function()
{
var self=this;
$('div#addnotesdiv').on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
},
getandsetdefaults:function(e)
{
this.defaults.soid = $(e.relatedTarget).data('soid');
this.defaults.operator_id=$(e.relatedTarget).data('oprid');
this.defaults.type=$(e.relatedTarget).data('type');
this.defaults.date=$(e.relatedTarget).data('notedate');
},
setmodalelements:function(e)
{
$(e.currentTarget).find('#notesthread').empty();
$(e.currentTarget).find('input#inpnotesoid').val(this.defaults.soid);
$(e.currentTarget).find('input#inpnoteoprid').val(this.defaults.operator_id);
$(e.currentTarget).find('input#inpnotetype').val(this.defaults.type);
},
addnote:function()
{
var self=this;
$('button#btnaddnote').on('click',function(){
var message=$(self.defaults.target).find('textarea#addnotemsg').val();
var soid=$(self.defaults.target).find('input[type=hidden][id=inpnotesoid]').val();
var note_date=$(self.defaults.target).find('input#addnotedate').val();
var oprid=$(self.defaults.target).find('input[type=hidden][id=inpnoteoprid]').val();
var type=$(self.defaults.target).find('input[type=hidden][id=inpnotetype]').val();
if(message=="" || soid=="" || note_date=="")
{
alert("Fill all details");
return;
}
var savenote=$.post(HOST+'notes/save',{message:message,soid:soid,note_date:note_date,type:type,operator_id:oprid});
savenote.done(function(res){
res=$.parseJSON(res);
if(res.status && res.error){
alert(res.message);
return;
}
if(res.status && res.type)
{
$('div#addnotemsg').showSuccess("Done").done(function(){self.getNotes();});
$('div#addnotesdiv').find('textarea#addnotemsg').val('');
}
else
{
$('div#addnotemsg').showFailure("Error");
}
});
});
},
getNotes:function()
{
$('button#btnrefreshcomments i').addClass('glyphicon-refresh-animate');
var getnotes=$.getJSON(HOST,{soid:this.defaults.soid,type:this.defaults.type,note_date:this.defaults.date,operator_id:this.defaults.operator_id});
getnotes.done(function(res){
if(res.status && res.data.length)
{
--somecode---
}
});
},
activaterefresh:function(){
var self=this;
$(document).on('click','#btnrefreshcomments',function(){
$('#notesthread').empty();
self.getNotes();
return false;
});
return false;
}
}
In Order to activate this functionality on that page I wrote
Inventory.notes.init();
Above code works perfectly when I open modal once but when I close that same modal and open it again but by clicking on different link all events are fired twice,thrice and so on.Number of events fired is equal to number of times modal opened on that page.
Is there any thing wrong in code Or any other way to perform this same task.
I know this is not a plugin all I wanted was to store all functionality related to comment system under one roof as library.
every time you open the modal box, it triggered show.bs.modal event, then all methods was exec again, including the event bindings. e.g. event bind in [addnote]
$('div#addnotesdiv').on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
Problem was whenever modal was shown getNotes,addnote,activatereferesh functions were called but when the modal was reopened again this functions are called again so thats twice and so on.Putting it in more simpler way is there were multiple listeners attached to single element without destroying previous one because my init function was called many times.
At last there were two solutions in both I need to unbind events or attach them only once.Got idea from here
1) Modified Init function with below code and added one unbind listener function
init:function(selector)
{
var self=this;
$(self.defaults.target).on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
$(self.defaults.target).on('hide.bs.modal',function(e){
self.unbindlistners();
});
}
unbindlistners:function()
{
var self=this;
$('#btnrefreshcomments').unbind('click');
$('button#btnaddnote').unbind('click');
return false;
}
}
2) Place event binding function outside show.bs.modal
init:function(selector)
{
var self=this;
$(self.defaults.target).on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
});
self.getNotes();
self.addnote();
self.activaterefresh();
}
There is small catch in second solution that is when first time my DOM is loaded function getNotes function is called with default values.

how to detect when an Iframe change location without onload event and trigger a function?

I want to detect when my IFrame changes the location, but not using onload event, actually i need to trigger a function just after the location of the IFrame changes to validate just a list of urls and if the new location is in my list do something on the parent view.
this is my actual function that i need to trigger but just before the iframe new url start to loads thats why the event onload doesn't match with what i need
function onLoadFrame() {
var a = document.getElementById("cont").contentWindow.location.href;
if ((a.indexOf("MainDashboard") > -1) || (a.indexOf("AccountManagement") > -1) || (a.indexOf("workspace_home") > -1)) {
$('#nav-bar').fadeOut(0);
$('#u-left-panel').fadeOut(0);
$("#content").css({ marginLeft: "0px" });
} else {
$('#nav-bar').fadeIn(0);
$('#u-left-panel').fadeIn(0);
$("#content").css({ marginLeft: "40px" });
}
}
Update
actually i needed to validate the new url or location that was being loaded in the frame in order to trigger a function that show or hide the navigation bar deppending on the new url so it wouldn't seem like delayed
i figure out how to do the functionality i was seeking for with help from here:
How can I get Iframe event before load?
this is my final code that kind of hi-jack the links to get the functionality
$('a[target="contenido"]').bind('click', function () {
activateNavBar($(this).attr("href"));
});
function bindFunctionToLinks() {
$("#cont").contents().find('a[target = "contenido"]').bind("click", function () {
activateNavBar($(this).attr("href"));
});
}

Categories

Resources