I received this message on how to react when a toast is clicked, so I decide to post it here for everyone.
When the user clicks on a toast I don't always want the message to disappear, but depending on the kind of message I want to:
Disappear.
Redirect the user to a different page (x es /meetings/210)
show a jquery dialog (ex: showing the sms received).
Using the basic click event I'm unable to detect the toast I've clicked.
The only workaround I found was to add a link in the toast and do a redirect when the user click on it.
So what I'm asking is a way to get the current toast the user clicks, by using the basic click event (but this may require some more work hiding data in the toast to recover it when clicked to understand what to do), or by adding to the function that creates a toast an optional callback to a function when clicked, something like this:
toastr.error(
'body text',
'header text',
click: function() {
console.log('you clicked on the error toaster')
}
);
Thank you for this very nice library.
This is already built it. You can do this 2 ways: you can grab the jQuery object that contains the indiviudal toastr element or you can set the onclick event for the individual toast. Your code is passing in a function for the 3rd parm. The 3rd parm should be the options override. So it should look like this:
toastr.error('body text', 'header text',
{onclick: function() {console.log('you clicked on the error toaster')}}
);
toastr.info('body text 1', 'header text',
{onclick: function() {console.log('you clicked on the info toaster n.1')}}
);
Related
I have made a chat application, in that i am notifiying user when a message comes using "Notification" api.
Also I have used "tag" to remove duplicate notification if user has two duplicate tabs open.
Now, whenever user has two tabs opened and one notification is replaced by the same notification tag, in Chrome i am unable to get the "onclick" callback when user clicks on that notification.
var notificationObj = new Notification("Title", {
body: "Body",
tag: 'Tag'
});
notificationObj.onclick = function () {
alert('onclick called');
};
Also tried below,
notificationObj.addEventListener("onclick", function (event) {
alert('onclick called');
});
So my question is, why the notificaion.onclick won't get triggered in chrome?
Chrome Browser bug:
check the link.
https://bugs.chromium.org/p/chromium/issues/detail?id=923782
If I use the arrow keys it works fine. But if I click on the next or back button opening a new page
I am using setOptions like below:
setOptions({
steps:[{
element: '#cmsinput',
intro: 'ENTER URL HERE',
position:'bottom'
}],
'showStepNumbers': 'false'
});
You're having this problem because introJs considers the tour complete for this page. The Done button runs the code in your oncomplete function. You can change the text of the Done button using the doneLabel option.
doneLabel: 'Next Page'
I'm trying to add a button to a GeoExt application. Ideally I want the button workflow to be:
User clicks button. Button is now "Toggled" to on.
User clicks somewhere on the map.
(This always works) Function behind button is called.
Button toggles off.
I have this as my options code:
/* Options to be passed to my create function. */
options: {
tooltip: 'Google StreetView',
iconCls: "icon-streetview",
enableToggle: false,
pressed: false,
toggleGroup: "toolGroup",
id: "streetview_tool"
}
I can add the button to the toolbar, but the toggle doesn't work properly. I've tried just about every combination of parameters I can think of.
a) Using the above, I get a console error from GeoExt:
TypeError: this.control is undefined. Steps 1 to 3 (above) work this way.
b) If I remove the toggleGroup, I don't get the error (unless enableToggle has been set to true), however the button then never toggles in the first place (steps 2 & 3 are the only ones that happen using this method).
There's also a second (Bigger!) problem - it doesn't matter whether the user has toggled the button, every time I click on the map that functionality is triggered!
So my question - how do I get this button-toggle workflow to work?
Thanks.
I don't know enough specifics about geoext, but if I understand the issue correctly you can't untoggle the button when you click on the map. I've setup an example which I hope is somewhat similar enough to your issue: https://fiddle.sencha.com/#fiddle/3ms
The solution simply calls
Ext.getCmp('streetview_tool').toggle(false)
when the body of a panel is clicked. Note that this example uses 3.4. Let me know whether this helps or if there's more to the picture I'm missing.
I am using "needim noty" jquery notification plugin, I am trying to close the notification only programatically, I saw option closable to stop closing notification. but when I am trying notification closing with click?
any ideas to stop closing with click and do it programmatically?
"noty plugin"
Refers "closable"
My Issue
I needed something like this in the past and this is what I did:
To stop closing with click, hover and close button I changed the template and closeWith plugin options:
$.noty.defaults.closeWith = ["button"];
$.noty.defaults.template = '<div class="noty_message"><span class="noty_text"></span></div>';
This way noty will make all notifications close only when clicking on the template close button but since I removed it from the template it is not possible.
Note that you don't need to make this the default noty behavior. You can use it only in some cases by using this options only when you need.
To close it programmatically I used $.noty.close(id) and $.noty.closeAll() functions.
To use the first one you need the notification ID that is generated when it is created.
You can get it this way and store it to use when you need to close a specific notification.
$n = noty({text: 'noty - a jquery notification library!'});
var noty_id = $n.options.id;
See this working demo for a better understanding
Edit:
To set this on the fly for only some notifications you need to pass the options like this:
var $n = noty({
text: 'I have a special behaviour',
template: '<div class="noty_message"><span class="noty_text"></span></div>',
closeWith: ["button"]
});
See this working demo for a better understanding
I have a page created by someone else that contains modal windows, and each modal window has links/images that display on hover. FYI, I have a very limited understanding of JavaScript and jQuery.
What I am trying to achieve is to add Google Analytics event tags to the links in the modal windows. It would work with onclick (code below) added directly to the anchor tag, or if it is added to the link via jQuery/JavaScript). The event needs to fire as a click event in Google Anayltics.
Usually, I just add:
onclick="_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);"
directly to the anchor tag, but whenever I add the code to the anchor tag in the HTML, the jQuery stops working. The modal windows work correctly on this link:
http://cookware.lecreuset.com/cookware/content_cast-iron-guide-sizes_10151_-1_20002
and you can see what I mean by "stops working" on the following link - the items within the list tags are no longer being populated, which means the icons don't show up and the new content that displays on hover can't be accessed: http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002
Since most of the links are created in the jQuery, I started by trying to add the Google Tag via .click, .attr, .on and .bind with no luck. The link above shows you my attempt with the .click function (search for CIGuide and you'll find it in the source on the 2nd link), but it breaks in the same way no matter what JavaScript I add to the page. My original question is here: Not able to successfully add Google Analytics Event Tag to link created by .attr
After I wasn't able to get either of those two things to work, I decided to try a simple alert on the page outside of all the content I was provided, with it's own JavaScript tags, just to see if I could get that to work. It worked perfectly, but the modal functionality still broke.
I have been able to successfully add the Google Tags to the anchor in the top navigation, and to the arrows on the left and right side of the page. But anytime I try to tag anything else, it breaks.
The agency I'm working with is able to add the google tag to the anchor with no issue when they test it on their server, and I am able to see the event fire if I test it on my local machine. I have to assume there is a problem on my server or with OpenCMS. However, I don't see any error messages in any browser/debugger, and I have validated my script additions with JSLint, and everything checks out.
This is driving me nuts! Can anyone help me figure out why this won't work and how I can add event tags to the page?
Not entirely sure what you're trying to achieve, and if it would work.
$(document).ready(function() {
$("#modal_sizes_1 a").each(function( index, elem ) {
$(elem).click(function() {
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);
});
});
});
Update
Okay, so I think it's about this line:
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);"
>About Cast Iron</a>
And I would try to change it like this
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="setTimeout(function(){
_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);
},0);"
>About Cast Iron</a>
Or even make the delay longer than 0, like 10 or 50.
You can use the callback for the GA push method and add the timeout. In your case try something like this:
var submitBtn = $('.submit-btn');
submitBtn.on('click', function(e) {
var that = this;
if (typeof _gaq != 'undefined') {
e.preventDefault();
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3'], function() {
setTimeout(function() {
window.location = $(that).attr('href');
}, 100);
});
}
});