Using toastr to have my FCM popups come up on the screen. The notifications are of different kinds (success, info etc) - how would I target the specific element that I am currently firing?
This is my code:
// Handle incoming messages
messaging.onMessage(function(payload) {
console.log("Notification received: ", payload);
toastr["success"](payload.notification.body, payload.notification.title, {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-left",
"preventDuplicates": false,
"showDuration": 30000,
"hideDuration": 1000,
"timeOut": 0,
"extendedTimeOut": 0,
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
});
});
Am I right in thinking you want to get the last toast generated?
If the toast still exists in the DOM then this will get the most recent generated toast that is still on screen
$('.toast').last();
Related
I bought a template and have asked to the writer but still no respond so far. Actually, I need a quick answer. Any body here can help to fix?
It's about to show Quick View of a single product detail to show in a window popup when a link is clicked. I have no idea how to put any data and get the data when popup appear, no browser refresh. Please don't ask me what have I done, I have no idea at all. I usually used ajax in a form.
The html link is like this :
<div class="quick-view">
<a title="Quick view" class="search" href="#"></a>
</div>
and the ajax call :
$(document).on('click','.quick-view .search,a.quick-view',function(){
var data = {
// data here....
}
$.post('quick_view.php', data, function(response){
$.fancybox(response, {
// fancybox API options
fitToView: false,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
// OWL Product thumb
$('.product-img-thumb .owl-carousel').owlCarousel(
{
dots:false,
nav:true,
navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
margin:21,
responsive : {
// breakpoint from 0 up
0 : {
items : 2,
},
// breakpoint from 480 up
480 : {
items : 2,
},
// breakpoint from 768 up
768 : {
items : 2,
},
1000 : {
items : 3,
}
}
}
);
})
return false;
})
any answers is appreciated.
If you add an ID to your elements that fire the event you can access and use it's ID or other Attribute to send it as data in your AJAX-call. To do this you use the event.target which points to the element that triggerred the event. In this way you can use the same call for a whole bunch of elements on the same page:
$(document).on('click','.quick-view .search,a.quick-view',function(event){
// Get the id of the element and add it to the data sent with call
var data = {
elementId: event.target.id
}
// Rest of your Ajax call
}
I am NOT using serverPaging and Virtual Paging.
Scenario : I have a dropdownlist when get changed it loads the grid.First time I load 100 data items & everything works correctly.
When I change the dropdownlist which will fetch large data like 20,000 total data items it get loaded & works correctly if the navigation is through clicking page number at bottom of grid.
Problem : when I click 'Go to the Last Page' button it shows the Previous POST request's last part of dataItems(90-100 previous date items )showing 100 as total dataitems wrongly.When I click previous page number it loads 80-90 items of correct data updating total size 20,000.
I find if I refresh the grid using pageable refresh button and navigate to the last page it works correctly..After grid's initialisation I tried of calling datasource read() and grid's refresh() but still problem persist.
Kindly help. I am using Kendo UI v2013.1.226.
Thanks in Advance.
FYI: I cant use serverPaging and Virtual Paging due to some restriction .
var myDataSrc = new kendo.data.DataSource({
pageSize : 20,
batch: true,
transport:
{
read: {
url: "../../api/getList",
dataType: 'json',
complete: function(e) {}
},
parameterMap: function(options, operation) {
if (operation == 'read') {
return {
dropdDownId : selectedDD.id
};
}
}
},
schema :
{ model :
{
id : "id",
fields :{
id : {type : "number"},
name:{type:"string"}
}
}
}
});
$("#myGrid").kendoGrid({
dataSource : myDataSrc,
selectable : true,
navigatable : true,
resizable : true,
sortable : true,
pageable:{refresh:true},
scrollable : true,
autoBind : true,
filterable:true,
columns : [ {
field : "name",
title : "name",
width : 150
} ],...
});
};
I am using the jRaty plugin to display a 'star' rating - the code to display the star rating is relatively simple (and works when I display the html code in my page) - the problem is I am using an ajax call to re-populate the page using JSON - even though the span is populated in the same manner as the html code below it doesn't display the star rating image using the plugin.
I believe this may have something to do with event delegation (although i'm no jQuery expert) Can anyone explain why my jRaty plugin doesn't work when via the ajax/json method - anyone got any ideas?
// html code
<span class="stars" data-score="4"></span>
/* star rating */
$( ".stars" ).raty( {
half: true,
hints: [ "1 Star", "2 Star", "3 Star", "4 Star", "5 Star" ],
path: "/assets/js/jquery-plugins/jquery-raty/2.5.2/img",
readOnly: true,
score: function( ){
return $(this).attr( "data-score" );
},
size: 24,
starHalf: "star-half-big.png",
starOff: "star-off-big.png",
starOn: "star-on-big.png"
} );
UPDATE..
I have loaded the jRaty in two places on my webpage, one is 'static' and another is dynamic (only shown after the jQuery AJAX call.
The 'static' iteration of the jRaty star rating shows the jQuery/jRaty element on the settings attribute when I inspect the element, whereas the latter 'dynamic' iteration of the jRaty star rating doesn't.
Looks like it isn't just me with this problem.. doh
How to apply raty plugin to new generated divs?
Just in case this might help someone else..
I added the following to the AJAX success
success: function(data){
$( ".stars" ).raty( {
half: true,
hints: [ "1 Star", "2 Star", "3 Star", "4 Star", "5 Star" ],
path: "/assets/js/jquery-plugins/jquery-raty/2.5.2/img",
readOnly: true,
score: function( ){
return $(this).attr( "data-score" );
},
size: 24,
starHalf: "star-half-big.png",
starOff: "star-off-big.png",
starOn: "star-on-big.png"
} );
}
I am trying to send Mouse Event to my Offscreen Tab and I received following error:
Error during experimental.offscreenTabs.sendMouseEvent:
Invalid or unexpected MouseEvent object
My Code:
chrome.experimental.offscreenTabs.sendMouseEvent(tab.id, {
"type": "click",
"altKey": false,
"ctrlKey": false,
"shiftKey": false
}, {
"x": 10,
"y": 10
}, function () {
console.log("Mouse Event Sent");
});
Any Suggestions?
You need to add a button key as well if you use a mouse event.
{
"type": "click",
"button": 1, // 0 = left, 1 = middle, 2 = right
"altKey": false,
"ctrlKey": false,
"shiftKey": false
}
Since the API is experimental, and the documentation is not quite complete, I looked in the source code:
chromium/src/chrome/browser/extensions/api/offscreen_tabs/offscreen_tabs_api.cc (implementation of the offscreenTabs API)
chromium/src/third_party/WebKit/Source/WebKit/chromium/public/WebInputEvent.h (for definitions of the "button" constants).
PS. I managed to get a Developer tools instance when I used button: 2. Quite useful for debugging interaction with an offscreen tab!
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId