We Keep Coding

Issue with execute trigger on custom button > Apexchat

I have written a trigger for a custom button click open chat window; I want this trigger to be executed when clicked on a custom button in a Case object.
I am using Apexchat. My code is,
Live Chat
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
jQuery('#apexchat_prechat_chat_icon').trigger("click");
});
});
Can anyone help me out with this?

As per my understanding, you're using apexchat js plugin, which gets loaded once the UI rendered properly. Hence you'll have to first get the iframe button instance then bind the that within your click scope. Hope the following code may help:
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
//find iframe
let iframe = jQuery('iframe#apexchat_chat_frame');
//find button inside iframe
let button = iframe.contents().find('#apexchat_chat_icon');
//trigger button click
button.trigger("click", function() {
console.log("chat button/link clicked");
});
});
});
Note: I'm considering here the id of iframe is "apexchat_chat_frame" and "apexchat_chat_icon" is the id of the button or link upon click on which, the chat window gets loaded.

D3 remove click events from one element out of a selection

I have a class in D3 say: selectors and I need to remove the click event from the selection
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
});
Ive got two problems:
The removed element is supposed to be moved to a different part of the page and the I need the click event on it to be removed.
Also, would it be possible to reinsert the removed element into the selection on doing something else, like clicking on the removed element again?
Edit:
Found a solution for problem 1
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
Is this the right way? Or is there a more graceful method?
A Demo Fiddle

here is the updated jquery it will work for your case
$(document).ready(function(){
$(document).on('click','.selectors',function(e){
//$(document).off( 'click','.selectors');
if(e.target.onclick==null)
{
e.target.onclick=
function(){
void(0);
};
alert('test');
console.log('Hello');
}
});
});

For problem 1, the best method(as far as I know) is to redefine the click event in D3 itself:
d3.selectAll('.selectors').on('click',function(){
//Remove the currently clicked element from the selection.
d3.select(this).on('click',null);
});
For problem 2, however, once you turn a click event callback to null, the only way is to redefine the click event again, perhaps recursively:
function clickDefine() {
d3.selectAll('.selectors').on('click', function () {
//Remove the currently clicked element from the selection.
console.log('Hello')
d3.select(this).on('click', null);
setTimeout(function(){clickDefine();},1000)
});
}
This function makes the click event inactive for 1 second on click. And reactivates this again. I'm hoping this is an effective solution.

Why is eventListener being removed after removing parent child

I have three different event listeners, one for opening a lightbox, one for closing lightbox, and one for adding a watch later feature.
So when after clicking the close button none of the eventListeners exist anymore. the basic code example:
var a ={
open_lightbox:function(ele){
ele.addEventListener('click',function(){
//code that creates dynamic html and so forth.
},false);
},
close_lightbox:function(){
var closer = a.get('.lightbox_close')[0];
closer.addEventListener('click',function(){
var p = this.parentNode.parentNode.parentNode;
p.parentNode.removeChild(p);
},false);
},
watch_later:function(ele){
ele.addEventListener('click',function(){
//uses localStorage to save data and then adds parameters
},false);
},
get:function(ele){ return document.querySelectorAll(ele); }
};
var lightbox = a.get('.lightbox_button'),i;
for(i=0;i<lightbox.length;i++){
a.open_lightbox(lightbox[i]);
}
Now when ever I click the main event open_lightbox, I can't reopen the lightbox nor click the watch_later element. All the original eventListeners are removed, is it because of the false use capture? I haven't tried changing false to true though I will. I just need an explanation to why this is happening as this is my first time in years ever running into this issue.
Testing that replicates the issue:
http://jsfiddle.net/ES5h2/
I did more testing and it's not on the click of the close button but after the first click of the element to open the lightbox.

i would try not to delete the element, but to hide it
you could use
p.style.display = "none";
instead of
p.parentNode.removeChild(p);

I'm not 100% sure why this was canceling the Event Listener on each event, though I did figure out a more semantic way. Which is just doing...
document.addEventListener('click',function(e){
if(/lightbox_btn/gi.test(e.target.className)){
//perform the code
}
},false);
So really I just took it and added the event Listener to the document instead of the element itself. It works fine now

Close popup div if element loses focus

I have the following scenario: On a label's mouseover event, I display a div. The div must stay open in order to make selections within the div. On the label's mouseout event, the div must dissappear. The problem is that when my cursor moves from the label to the div, the label's mouseout event is fired, which closes the div before I can get there. I have a global boolean variable called canClose which I set to true or false depending on the case in which it must be closed or kept open. I have removed the functionality to close the div on the label's mouseout event for this purpose.
Below is some example code.
EDIT
I have found a workaround to my problem, event though Alex has also supplied a workable solution.
I added a mouseleave event on the label as well, with a setTimeout function which will execute in 1.5 seconds. This time will give the user enough time to hover over the open div, which will set canClose to false again.
$("#label").live("mouseover", function () {
FRAMEWORK.RenderPopupCalendar();
});
$("#label").live("mouseout", function () {
setTimeout(function(){
if(canClose){
FRAMEWORK.RemovePopupCalendar();
}
},1500);
});
this.RenderPopupCalendar = function () {
FRAMEWORK.RenderCalendarEvents();
}
};
this.RenderCalendarEvents = function () {
$(".popupCalendar").mouseenter(function () {
canClose = false;
});
$(".popupCalendar").mouseleave(function () {
canClose = true;
FRAMEWORK.RemovePopupCalendar();
});
}
this.RemovePopupCalendar = function () {
if (canClose) {
if ($(".popupCalendar").is(":visible")) {
$(".popupCalendar").remove();
}
}
};
Any help please?

I would wrap the <label> and <div> in a containing <div> then do all you mouse/hide events on that.
Check out this fiddle example - http://jsfiddle.net/6MMW6/1

Give your popupCalendar an explicit ID instead of a class selector, e.g.
<div id="popupCalendar">
Reference it with #popupCalendar instead of .popupCalendar.
Now, remove() is quite drastic as it will completely remove the div from the DOM. If you wish to display the calendar again you should just .hide() it.
But your logic seems a bit overly complex, why not just .show() it on mouseenter and .hide() on mouseout events ?

This will close the entire tab page if the tab page loses focus.
How ever if you target it, it can work for something within the page too, just change the target codes.
JavaScript:
<script type="text/javascript" >
delay=1000 // 1 sec = 1000.
closing=""
function closeme(){
closing=setTimeout("self.close()",delay)
// self means the tab page close when losing focus, but you can change and target it too.
}
<!--// add onBlur="closeme()" onfocus="clearTimeout(closing)" to the opening BODY tag//-->
</script>
HTML:
<body onBlur="closeme()" onfocus="clearTimeout(closing)">

how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus

Try using the onblur event.

I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});​​
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});​
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.

I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div

Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"