How I create this jquery in a reusable way? - javascript

I am using Bootstrap popovers with dynamic contents from my databese. In php, its creating dynamic classes for each popover. My question is, In jquery, do I need to call to triggering the popover separately?
This is how I use jQuery to trigger the popovers -
$(".image-info-popover-1").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-1').html();
},
title: function() {
return $('.popoverTitle-1').html();
}
});
$(".image-info-popover-2").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-2').html();
},
title: function() {
return $('.popoverTitle-2').html();
}
});
$(".image-info-popover-3").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-3').html();
},
title: function() {
return $('.popoverTitle-3').html();
}
});
$(".image-info-popover-4").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-4').html();
},
title: function() {
return $('.popoverTitle-4').html();
}
});
$(".image-info-popover-5").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-5').html();
},
title: function() {
return $('.popoverTitle-5').html();
}
});
But this is not the best way If I have a list of popovers to triggering out. So anybody tell me the good way to do this in a reusable manner?
Thank you.

If you want it be reusable, I'd put it in a function which takes a number as a parameter. Your function could look like this
var popover_func = function(n) {
$(".image-info-popover-"+n).popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $('.popoverContent-'+n).html();
},
title: function() {
return $('.popoverTitle-'+n).html();
}
});
};
You should be able to call this using a for-loop
for (var i=0; i<=5;i++) {
$(document).ready(popover_func(i));
}

Related

How to get information on onItemMouseover?

I want to retrieve item information when I hover the mouse over it. I tried the example of an earlier question but it doesn't work. It shows the title but not the content (Bootstrap popover over $(this) element)
[...]
demoSource.push({
name: RFInum,
desc: deadline,
values: [{
from: start,
to: end,
label: tit,
customClass: balk_kleur,
dataObj: stat
}],
var popoverContent;
$(".gantt").gantt({
source: demoSource,
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "hours",
itemsPerPage: 20,
scrollToToday: false,
useCookie: true,
onItemClick: function(data) {
},
onItemMouseover: function(elm, data) {
popoverContent = data.detailContent;
alert(popoverContent);
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: function _getItemText() {
return this.textContent;
},
container: '.gantt',
content: function () {
return popoverContent;
},
trigger: "hover",
placement: "auto right"
});
[...]

In fullcalendar error adding button to event

In my laravel-fullcalendar app I want to add some buttons with jsvascript function to events
and looking at this Add font awesome icon to full calendar title
example with decision I make it as :
window.calendarEventsObject = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
eventRender: function (eventInfo, element) {
console.log("eventRender eventInfo::")
console.log(eventInfo)
console.log("eventRender eventInfo.event::")
console.log(eventInfo.event)
console.log("element::")
console.log( element )
console.log("eventInfo.el::")
console.log( eventInfo.el )
eventInfo.event.el.find(".fc-title").prepend("<i class='fa fa-external-link'></i>");
var tooltip = new Tooltip(eventInfo.el, { // example : https://fullcalendar.io/docs/event-tooltip-demo
title: 'HTREDSA', //eventInfo.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
events: eventsList,
header: {
left: 'LEFT98',
center: 'title123',
right: 'Right 444'
},
showNonCurrentDates: false,
editable: true,
allDaySlot: true,
selectable: true,
selectHelper: true,
selectOverlap: false,
fixedWeekCount: false,
aspectRatio: 0.4,
height: 700,
select: function (start, end) {
alert( "select:::"+var_dump(-50) )
var title = "Available";
var evid = SaveEvent(start, end, '1');
$('#events_calendar').fullCalendar('unselect');
},
eventClick: function (clickObj) {
alert( "eventClick clickObj.el::"+var_dump(clickObj.el) )
if (clickObj.el.href != "") {
// alert( "::"+var_dump(-4) )
let el_href = clickObj.el.href
clickObj.el.href = ""
window.open(el_href, "_blank");
// clickObj.event.preventDefault();
alert( "::"+var_dump(-41) )
return false;
}
return false;
},
});
But debugging in console I see that the second parameter of eventRender function element is empty in my case.
I tried to get access to elemnt eventInfo by 1st parameter, but Failed: https://imgur.com/a/GPn1tOe
How to add button to fullcalendar event ?
"laravel/framework": "5.8.*",
"maddhatter/laravel-fullcalendar": "^1.3",
Thanks!
I found a decision for fullcalendar 4 without jquery methods :
eventRender: function (eventInfo) {
eventInfo.el.querySelector('.fc-title').append("Some additive Text ");
It works!

How to hide one bootstrap-popover when opening another?

(bootstrap 4)
Hi all, I'm trying to make it so that when you click outside "popover" - it (popover) was hiding (kind of like I did it). And while doing so, I'm also trying to make the "disappearance" of the first popover when clicking on another(second) calendar event ("eventClick" event in Fullcalendar) and the appearance of another. But I can not understand how to do it.
P. S. If to show the popover only when the event is "eventClick"(FullCalendar's event), then the popover appears ONLY after the second click, for each event.
Code: Codepen.io
OR:
HTML:
<body>
<ul id="popover-content" class="list-group" style="display: none">
aaa
bbb
ccc
</ul>
<div id='calendar'></div> ...
JS:
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay,listDay"
},
themeSystem: "bootstrap4",
locale: "ru-RU",
defaultDate: "2018-03-12",
...
eventRender: function(event, element, view) {
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
return $("#popover-content").html();
}
});
},
editable: true,
eventLimit: true,
...
$("body").on("click", popoverCloseByOutsideClick);
function popoverCloseByOutsideClick(e) {
var isNotPopover = !$(e.target).hasClass('.popover'), isNotPopoverChild = ($(e.target).parents('.popover').length === 0), isNotEvent=!$(e.target).hasClass('.fc-event-container'), isNotEventChild = ($(e.target).parents('.fc-event-container').length === 0);
// if (!isNotEvent || !isNotEventChild) {
// // console.log($(e.target));
// // closePopovers();
// // e.target.popover('hide');
// // $(e.target).popover('show');
// }
if (isNotPopover && isNotPopoverChild && isNotEvent && isNotEventChild) {
closePopovers();
}
}
function closePopovers()
{
$.each($(".popover"), function(i, el) {
if ($(el).hasClass("show")) $(el).removeClass("show");
});
}
P.S.2 Please, forgive me for my English if something is wrong.
In order to close any previous opened popover you can call .popover('hide'):
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
// for each opened popover...hide it
$("#calendar .popover.show").popover('hide');
// ^^^^^
return $("#popover-content").html();
}
});
element.popover({
animation: true,
placement: "auto",
html: true,
container: "#calendar",
title: event.title,
trigger: "click",
content: function() {
$('.popover').popover('hide')
return $("#popover-content").html();
}
});

document.Body ComponentQuery

I am using an awesome html2canvas function but I have a noob question. How do I change the field it is capturing from document.body to a specific panel?
In short i need to change document.body to the panel I want to capture, I just don't know the code to get the panel I want.
I have tried Ext.ComponentQuery.query('#testPanel') without any success.
testButtonClicked: function (btn) {
html2canvas(document.body, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
//width: 500,
height: 800,
resizable: true,
autoScroll: true,
preventBodyReset: true,
html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>'
}).show();
}
});
You want getEl().dom. Here's a standalone example (tested with Ext 4.2.x):
Ext.onReady(function () {
Ext.define('Panel', {
extend: 'Ext.panel.Panel',
frame: true,
title: 'Test Panel',
width: 300,
height: 300,
onClick: function () {
html2canvas(this.getEl().dom, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
width: 300,
height: 300,
html: '<img src="' + canvas.toDataURL("image/png") + '"/>'
}).show();
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'datepicker'
},
{
xtype: 'button',
text: 'CAPTURE THIS PANEL',
handler: this.onClick,
scope: this
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('Panel', {
renderTo: Ext.getBody()
});
});
html2canvas() appears to require a DOM element. Ext.ComponentQuery.query() returns an array of matched elements, so if you use precisely the code you provided, it won't work since the array returned from query() is obviously not a DOM element.
So if query() is actually returning something, you could use the first position:
Ext.ComponentQuery.query("#testPanel")[0]
Or, since you seem to have an ID assigned to the panel, you could simply use getCmp(), which will return only the element which is matched, and not an array:
Ext.getCmp( "testPanel" )

How to hide qtip tooltip after some time has passed?

I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});

Categories