Issue with execute trigger on custom button > Apexchat - javascript

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.

Related

Run Code After Squarespace Popup Event Listener/Trigger

I need to run some custom JS after the modal popup is loaded into the viewport. What's the best way to piggy-back onto whatever event is triggered?
Once the pop-up is loaded, I need to execute something like this:
jQuery(".newsletter-form[data-form-id='34li2j4j32il13l2j13ijl21i'] button").click(function (){
console.log("Someone clicked the popup newsletter button.")
});
Because Squarespace doesn't provide the ability to hook into its own methods, we must use multiple Mutation Observers, the second being setup within the first. Adding something like this via Sitewide Footer Code Injection should work:
<script>
(function() {
new MutationObserver(function(m1,o1) {
var popup = document.querySelector(".sqs-popup-overlay");
if (popup) {
o1.disconnect();
new MutationObserver(function(m2,o2) {
var btn;
if (popup.classList.contains("visible")) {
o2.disconnect();
btn = popup.getElementsByTagName("button")[0];
btn.addEventListener("click", function() {
console.log("Someone clicked the popup newsletter button.");
});
}
}).observe(popup, {attributes:true, attributeFilter:['class']});
}
}).observe(document.body, {childList:true});
})();
</script>
The first mutation observer observes the body for the addition of the popup overlay element. If/When that element exists, the first mutation observer is disconnected and a second one is set to observe the class attribute of the popup until it contains the class "visible". If/When that happens, the second mutation observer can be disconnected and an event listener added to the popup submission button. Within the callback function of that event listener, your code is executed.

Loading bootstrap modal from Ajax change button

I’m launching a bootstrap modal using a button and then changing the button class and text via jQuery. I want to launch another bootstrap modal once the button class is changed.
Here is my code
$('.btn myBtn1').click(function () {
var id = $(this).closest('tr').data('id');
$('#myModal1').data('id', id).modal('show');
$('. btn').addClass(' myBtn2');
$('. btn').removeClass(' myBtn1');
});
//second modal code
$('.btn myBtn2').click(function () {
var id = $(this).closest('tr').data('id');
$('#myModal2').data('id', id).modal('show');
$('. btn').addClass(' myBtn1');
$('. btn'). removeClass(' myBtn2');
});
My issue is its launching the same modal. Modal 1 and never loads the modal two. What should I do to fix this? Appreciate your time.
Change the following line of code:
//second modal code
$('.btn myBtn2').click(function () {
to
//second modal code
$(document).on('click', '.btn myBtn2', function(){
Reason: When you are changing the selectors dynamically than you have to make your event listeners also capable of handling that.
$('selector').click(); works for static selectors only.
You have changed button class dynamically so client event is not attached. In this case you have click event attached with parent instead of child. More info In jQuery, how to attach events to dynamic html elements?
Use this:
$('body').on('click', '.btn myBtn2', function () {

Disable and enable click handler

I have this code:
jQuery(".view-kems-tickets-calendar td.single-day").not(".no-entry, .empty").click(function() {
jQuery(".all-day-items", this).slideDown("slow");
jQuery(this).off("click");
});
jQuery(".view-kems-tickets-calendar .close-all-day").click(function() {
jQuery(".all-day-items").slideUp("fast", function() {
});
});
So what it does: It makes clickable td.single-day and displays the .all-day-items class element which exists inside of this td tag. The .all-day-items element contains .close-all-day element which closes previously opened .all-day-items element. The problem is that while clicking at .close-all-day element at the same time I click in td.single-day so it closes and opens again. I put this line:
jQuery(this).off("click");
to disable it, but how do I activate it again in complete function? I tried couple of methods, but it always behave as before (it closes and opens again the .close-all-day element).
This is how it doesn't work: :) the code:
http://codepen.io/anon/pen/GgJZOp
Maybe this helps you:
jQuery(".view-kems-tickets-calendar td.single-day").not(".no-entry, .empty").click(function(e){
if(!$(e.target).is('.close-all-day')){
jQuery(".all-day-items", this).slideDown("slow");
}
});

Open pop-up box automatic with different ID in jquery

Here I use a pop-up jQuery box for pop up window but when I use it on same page for multiple pop-up boxes then it only one not for all because my id is same on all button I use for pop-up.
<script src="js/jquery-1.9.1.js"></script>
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
});
})(jQuery);
and here is pop-up
<div id="full-detail-box">this is pop up</div>
Try This
JS
for(var i=0;i<3;i++){
$('body').append("<div id='full-detail-box"+i+"' class='full-detail-box'>"+(i+1)+" User this is my pop-up window that is opem multi timewith different value </div><br/><a class='btn-pro' data-id='full-detail-box"+i+"' href='#'>Full Detail</a>")
}
$('.btn-pro').bind('click', function(e) {
e.preventDefault();
var id=$(this).data('id');
// Triggering bPopup when click event is fired
$('#'+id).bPopup();
});
Instead Of this
$('#full-pop').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#full-detail-box').bPopup();
});
UPDATED DEMO HERE
If I understand correctly you are passing the same id repeatedly, which just opens the same popup over and over again. If you want multiple popups you need multiple DOM nodes to trigger a popup on.
If you are using user detail, why not just append a unique ID!? You can easily add, in PHP, or w/e the ID of the user at the end of the class name id="full-detail-box-xx" where XX is the ID of the user.
Then you simply use the button with the SAME id in the function to call the user, like $('#full-detail-' + id).click(function(){ bPopup('#full-detail-box' + id); });
If you are using PHP you can write the ID to a JS array, or something. I'm not sure how you system is set up.

Need to click a link on body load

I have a domain www.example.com . I have created a subdirectory discount and it has a index.php file. What I want is that when a user mouses over www.example.com, along with the website this discount page also open up in lightbox. I know how to do this via prettyphoto(Lighbox open up when you click on discount link), but the problem is how to trigger this action on page load.
PrettyPhoto gives us the .open call, wich I believe can be used to directly open a modal box, with no need to click, like this:
$(document).ready(function()
{
$.prettyPhoto.open('images/image.jpg','Title','Description');
});
Just trigger the click event in the ready handler. I've assumed the id of your link is #link.
$(document).ready(function() {
$('#link').click();
});
this triggers on document ready
$(document).ready(function()
{
//todo
});
You can use the onload event of the window object:
window.onload = function()
{
// Show your lightbox!
}
You are already using jQuery, so you could write this, too:
$(document).ready(function()
{
// Show your lightbox!
});

Categories