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"
} );
}
Related
I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.com:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.attribute.id.html entity.other.attribute-name" // the word id
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
},
{
"scope": [
"meta.attribute.id.html string.quoted.double.html" // the id's vaue
],
"settings": {
"foreground": "#ff0000",
// "fontStyle": "bold"
}
}
]
}
See Editor Syntax Highlighting.
I'm developing a stock manager webapp for a company.
I have this page where the administrator can edit and delete products that they added in a table (dataTable), I managed to make this possible by using this tutorial:
https://www.webslesson.info/2017/05/live-table-data-edit-delete-using-tabledit-plugin-in-php.html
Everything works fine but I had this issue where the 2 edit and delete buttons weren't showed on other pages of my table except from the 1st, I managed to resolve this issue with attached code
Everything right now works fine but i have a huge graphic problem. While i'm searching, every time I tap a letter or a backspace, the last column as you can see from the attachment is cloning itself every time.
Error of multiple columns
I've already tried to debug the search method but I don't think it's related to that... it's a standard method.
Do you think it can possibly be a problem related to the fact that the last column with the 2 button (edit and delete) is automatically added with a js of the library extension I'm using and it's not hardcoded? so every time I redraw the table it is like an external element to redraw?
var table = $('#dataTable').DataTable();
// Document ready
$(function() {
editTable();
});
// Assuming "table" is the variable name of your datatable
table.on('draw', editTable);
function editTable() {
$('#dataTable').Tabledit({
url: 'updateDB.php',
columns: {
identifier: [0, "id"],
editable: [
[1, 'name'],
[4, 'quantity'],
[5, 'threshold'],
]
},
restoreButton: false,
onSuccess: function(data, textStatus, jqXHR) {
if (data.action == "delete") {
document.getElementById(data.id).remove();
}
}
});
};
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();
I'm trying to display two gridviews using the dhtmlx scheduler library. The way we are using the scheduler is so that employees can sign out. Right now, we can view it as a monthly view but we also want to have a day view too.
I was able to create the grid, but when I try to click button it does not display the day report.
Here is a code snippet
scheduler.locale.labels.grid_tab = "Month";
scheduler.createGridView({
name:"grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"month",
step:1
});
scheduler.locale.labels.grid_tab2 = "Day Report";
scheduler.createGridView({
name:"day_grid",
fields:[ // defines columns of the grid
{id:"date", label:'Date', sort:'date', width:300, align:"left"},
{id:"employee", label:'Employee', sort:'str', width:400, align: "*"},
{id:"room_description", label:'Destination', sort:'str', width:600, align:'left'}
],
paging:true,
unit:"day",
step:1
});
Your code seems to work on scheduler demos
http://docs.dhtmlx.com/scheduler/snippet/b9320394
The only thing is that you need to define label for a day_grid view correctly, the variable should be named "day_grid_tab" instead of "grid_tab2"
scheduler.locale.labels.day_grid_tab = "Day Report";
I tried this : https://developer.chrome.com/extensions/options.html and made an option page.
So a selection has been added under my extension icon with the name of Option.
My question is that is there a way to rename Option and change it something like Setting or some words in other languages ?
The "Options" label at chrome://extensions is automatically adapted to the user's language. Extensions cannot change the value of this label.
The value of the "Options" option at the dropdown menu at the extension's button cannot be customized either, but you can create a new context menu item under the button as of Chrome 38. E.g.
chrome.contextMenus.create({
id: 'show-settings', // or any other name
title: 'Settings',
contexts: ['page_action', 'browser_action']
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == 'show-settings') {
chrome.tabs.create({
url: chrome.runtime.getURL('settings.html')
});
}
});
I suggest to just stick to "Options" though, because users do already know what the option does. Consistency in UI/UX is important, imagine how you productive you'd be if every application had a different way of (e.g.) closing/quiting the application.
manifest.json to test the previous script:
{
"name": "Contextmenu on browserAction button",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Right-click to see a context menu"
},
"permissions": [
"contextMenus"
]
}
Easier way to trigger events.
chrome.contextMenus.create({
title: 'GitHub',
contexts: ['page_action'],
onclick: () => console.log('GitHub'),
});