241 comments found.
Hi, I am having terrible problems with some javascript within your theme.
For example, Datatables.
I have a table copied from your examples and I want to have one colum as a default sort. So i use the javascript:
<script> $(document).ready(function() { $(’#offlineMessages’).DataTable( { “order”: [[ 1, “desc” ]] } ); } ); </script>
At the end of the page.
HOWEVER it never works. The console moans about: core.min.js:8 jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function at HTMLDocument.<anonymous> (https://dashboard.imsupporting.com/offline-messages.php:10196:27) at l (https://dashboard.imsupporting.com/assets/js/core.min.js:8:21666) at m (https://dashboard.imsupporting.com/assets/js/core.min.js:8:21969) undefined va.Deferred.exceptionHook @ core.min.js:8 core.min.js:8 Uncaught TypeError: $(...).DataTable is not a function at HTMLDocument.<anonymous> (offline-messages.php:10196) at l (core.min.js:8) at m (core.min.js:8)
It seems to be looking at core.min.js rather than the datatables.js that your app loads.
I cannot figure out what is going on.
Here is an example. https://dashboard.imsupporting.com/offline-messagesEXAMPLE.phpAny thoughts? Thank you
Hi,
To use JS code, please put your code inside app.ready(function(){...}) instead of $(document).ready();
For example, see the source code of http://thetheme.io/theadmin/chart/chartjs.html to learn how we use inline JS code.
Cheers.
Hi, Thanks. Ive tried that and get an even weirder error. Am I being special here? Seems to match the example code on the chartjs?
Figured it, seems to be a datatables related issue. (Datatables warning(table id = ‘example’): cannot reinitialise data table) error
Turns out I need to add “bDestroy”: true to the code.
eeek.
Thanks again for your help.
Glad you could fix it.
Hello,
In the last version I see that the Custom checkboxes are getting with a blue border when checked and also when unchecked if you leave the focus on the checkbox that blue border stays.
I have cheched CHrome and Firefox and the same effect.
Do you know how to solve it?
Hello,
Sorry about the issue. Seems it happened in our last update of theme because of the new version of Bootstrap. Please replace your app.min.css file with https://ufile.io/509mz to fix the issue for now. We’ll update the template after more revisions in future.
Halo admin, can i have the lastest update for this template?
Hello,
You can download it from your download page: https://themeforest.net/downloads
fullcalendar : there is bug if defaultView = ‘agendaWeek’ by default on load of page and if there is businessHours : the background view doesn’t match with the hours. exemple : calendar.fullCalendar({ header: false, locale: ‘fr’, allDaySlot:false, minTime: ‘08:00:00’, maxTime: ‘20:00:00’, defaultView: ‘agendaWeek’, contentHeight: ‘auto’, editable: true, droppable: true, navLinks: true, eventLimit: true, businessHours: [ { dow: [1], start: ‘12:00’, end: ‘19:00’, }, { dow: [2,3], start: ‘09:00’, end: ‘19:00’, }, { dow: [4], start: ‘09:00’, end: ‘12:00’, }, { dow: [5], start: ‘09:00’, end: ‘18:00’, }, { dow: [6], start: ‘09:00’, end: ‘17:00’, } ] });
Hi,
FullCalendar is a 3rd-party plugin and you should consult with their documentation and examples on https://fullcalendar.io/
fullcalendar : there is bug if defaultView = ‘agendaWeek’ and if there is businessHours : the background view doesn’t match with the hours. exemple : calendar.fullCalendar({ header: false, locale: ‘fr’, allDaySlot:false, minTime: ‘08:00:00’, maxTime: ‘20:00:00’, defaultView: ‘agendaWeek’, contentHeight: ‘auto’, editable: true, droppable: true, navLinks: true, eventLimit: true, businessHours: [ { dow: [1], start: ‘12:00’, end: ‘19:00’, }, { dow: [2,3], start: ‘09:00’, end: ‘19:00’, }, { dow: [4], start: ‘09:00’, end: ‘12:00’, }, { dow: [5], start: ‘09:00’, end: ‘18:00’, }, { dow: [6], start: ‘09:00’, end: ‘17:00’, } ] });
Does your template contain any design files, .ai or sketch files?
No.
CSS does not load except in Chrome. Pl help.
Does it happen on our demo? Probably you don’t provide correct URL for css files.
checked just now, the CSS issue is only in firefox. the issue shown as
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/fontawesome-webfont.woff?v=4.7.0. (Reason: CORS request not http).
Error while detaching the browsing context target front: Connection closed, pending request to server1.conn4.parentProcessTarget1, type detach failed
Request stack: request@resource://devtools/shared/base-loader.js -> resource://devtools/shared/protocol.js:1374:14 generateRequestMethods/</frontProto[name]@resource://devtools/shared/base-loader.js -> resource://devtools/shared/protocol.js:1528:14 BrowsingContextFront<.detach<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/fronts/targets/browsing-context.js:79:24 destroy/this._destroyer<@resource://devtools/shared/base-loader.js -> resource://devtools/client/framework/target.js:779:19 destroy@resource://devtools/shared/base-loader.js -> resource://devtools/client/framework/target.js:744:23 eventSource/proto.emit@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/event-source.js:124:9 onClosed@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:938:5 close@resource://devtools/shared/base-loader.js -> resource://devtools/shared/transport/local-transport.js:154:9 close@resource://devtools/shared/base-loader.js -> resource://devtools/shared/transport/local-transport.js:150:7 close@resource://devtools/shared/base-loader.js -> resource://devtools/shared/transport/local-transport.js:150:7 cleanup@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:301:9 detachClients@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:326:9 safeOnResponse@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:557:14 listenerJson@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:580:26 emit@resource://devtools/shared/base-loader.js -> resource://devtools/shared/event-emitter.js:178:15 emit@resource://devtools/shared/base-loader.js -> resource://devtools/shared/event-emitter.js:255:5 emitReply@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:861:31 callFunctionWithAsyncStack@resource://devtools/shared/base-loader.js -> resource://devtools/shared/platform/stack.js:61:10 onPacket@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:863:9 send/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/transport/local-transport.js:64:11 exports.makeInfallible/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14 exports.makeInfallible/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14 browsing-context.js:81:7 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/forfit/forfit-medium-webfont.woff2. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/forfit/forfit-medium-webfont.woff. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/forfit/forfit-medium-webfont.ttf. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/themify.woff?-fvbane. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/themify.ttf?-fvbane. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/fontawesome-webfont.woff2?v=4.7.0. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/fontawesome-webfont.woff?v=4.7.0. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/fonts/fontawesome-webfont.ttf?v=4.7.0. (Reason: CORS request not http).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///E:/Google%20Drive/Application/THEME/Admin-%20Work%20In%20Progress/assets/data/json/files.json. (Reason: CORS request not http).[Learn More]
As you can see the reason in the end of message (Reason: CORS request not http), you should load your pages on a http:// protocol not file:// protocol.
Good Morning.
I have the theme makes a good theme and the same mistakes are not fixed. The translation of the timepicker plugins does not work. Same added region tag correctly.
The sweetalert plugin does not work. It is not possible to create a dialogue with confirmation and negation, all options always fall into confirmation.
I would like a special help in solving at least these two basic items.
Hi,
Time picker doesn’t support any other language: http://jdewit.github.io/bootstrap-timepicker/ .
We have sample with cancel button in http://thetheme.io/theadmin/uikit/dialog-sweetalert.html . You should check the samples and documentation.
Cheers.
Hello, How to load google map using theadmin? im using div data-provide=”map” no luck
Hello,
Please make sure you have valid googleApiKey value in /assets/js/script.min.js . The one that is included is only for our domain. So you need to get an API key from google. described how in script.js
still not showing, only white page because class h-300px, im using this code to show google map
any wrong about that code?
i found the problem, when i move the script load into header, the map wont show, how to init them manually?
First of all, that’s not optimal to move your JS code into head tag. It blocks your page for rendering.
Anyways, not sure what’s wrong with moving script to the header, but once the page completely loads, we call app.map() method which also init Google Map on all elements with data-provide=”map”
Hi
I am looking for someone who have skills in API data (ACES & PIES data)
I am waiting your reply. Thanks! Malik.
Hello There,
I recently purchased your theme and found out that in the datatable, the configuration always sorts by the first column, is there an option to change this?
Second, I also would like to have a button to export the datatable.
Thanks, Azlan
Hello,
Did you checked “Individual column searching” in http://thetheme.io/theadmin/content/tables-datatables.html ?
We don’t have all of the samples on our demo. You should read the documentation of DataTables on how to include an export button.
Cheers.
hi this is my another acc, i want to ask, i use sweetalert for delete method, and then using ajax like this }).then(function() {$.ajax({type: “Delete”, but core.min.js error with method not allowed, what step should i do?. Thanks
Hi,
Seems like the error should come from jQuery. The core.min.js is the plugins we used like jQuery and Bootstrap. You’re using ajax method on jQuery which should be the reason for error. So it’s not a problem from the template actually. Please search your error on google and you should be able to find the answer.
Cheers.
When I click to Print the page, the Print Preview comes up completely blank. Is there a quick/easy setting to make this theme printable? Thank you!
Hi,
You need to add a .printing-area class to a tag (could be body tag) to have a printing area. See how we use it in http://thetheme.io/theadmin/page/invoice-1.html .
Cheers.
Perfect, thank you! Amazing work.
Halo, i want to ask u. How to added datatables multiple select rows / select all rows using checkboxes in this template?
Thanks
Hello,
Datatables add their own checkboxes which is the default checkbox of browser. We can’t change the markup to make it look like our custom checkboxes.
Cheers.
$(document).ready(function() {
var table = $('#example').DataTable();
});
Error message is datatable is not a function.
Hello,
Please see the source code of thetheme.io/theadmin/content/tables-datatables.html and see how we used app.ready(function() {}) instead of $(document).ready(function() {}). app.ready makes sure that document is ready and all the required plugins has loaded into the page.
Hello, your theme has JavaScript which is not compatible with other javascript libraries (ultimate member for example).
core.min.js:7 Uncaught TypeError: e.indexOf is not a function
at C.fn.init.C.fn.load (core.min.js:7)
at um-scrollbar.min.js?ver=4.9.8:2
at um-scrollbar.min.js?ver=4.9.8:1
at um-scrollbar.min.js?ver=4.9.8:1
at um-scrollbar.min.js?ver=4.9.8:1
at um-scrollbar.min.js?ver=4.9.8:1
C.fn.load @ core.min.js:7
(anonymous) @ um-scrollbar.min.js?ver=4.9.8:2
(anonymous) @ um-scrollbar.min.js?ver=4.9.8:1
(anonymous) @ um-scrollbar.min.js?ver=4.9.8:1
(anonymous) @ um-scrollbar.min.js?ver=4.9.8:1
(anonymous) @ um-scrollbar.min.js?ver=4.9.8:1
core.min.js:7 Uncaught TypeError: e.indexOf is not a function
at C.fn.init.C.fn.load (core.min.js:7)
at um-responsive.min.js?ver=4.9.8:1
C.fn.load @ core.min.js:7
(anonymous) @ um-responsive.min.js?ver=4.9.8:1
core.min.js:7 GET https://platform.localhost.com/wp-content/themes/stackfuel-platform-theme/assets/data/json/files.json 404
send @ core.min.js:7
ajax @ core.min.js:7
fromNetwork @ bloodhound.min.js:7
_loadPrefetch @ bloodhound.min.js:7
_initialize @ bloodhound.min.js:7
initialize @ bloodhound.min.js:7
c @ bloodhound.min.js:7
(anonymous) @ script.min.js:7
(anonymous) @ app.min.js:7
e @ core.min.js:7
t @ core.min.js:7
setTimeout (async)
(anonymous) @ core.min.js:7
u @ core.min.js:7
add @ core.min.js:7
(anonymous) @ core.min.js:7
Deferred @ core.min.js:7
then @ core.min.js:7
C.fn.ready @ core.min.js:7
C.fn.init @ core.min.js:7
C @ core.min.js:7
d.isReady @ app.min.js:7
(anonymous) @ app.min.js:7
i @ core.min.js:7
u @ core.min.js:7
p @ core.min.js:7
N @ core.min.js:7
e.(anonymous function).o.length.d @ core.min.js:7
D.e.onload.e.onreadystatechange @ core.min.js:7
load (async)
D @ core.min.js:7
(anonymous) @ core.min.js:7
setTimeout (async)
d @ core.min.js:7
(anonymous) @ core.min.js:7
script @ core.min.js:7
runQueue @ core.min.js:7
l.inject @ app.min.js:7
l.init @ app.min.js:7
d.init @ app.min.js:7
(anonymous) @ app.min.js:7
e @ core.min.js:7
t @ core.min.js:7
setTimeout (async)
(anonymous) @ core.min.js:7
u @ core.min.js:7
fireWith @ core.min.js:7
fire @ core.min.js:7
u @ core.min.js:7
fireWith @ core.min.js:7
ready @ core.min.js:7
F @ core.min.js:7
core.min.js:7 Uncaught TypeError: i.getClientRects is not a function
at C.fn.init.offset (core.min.js:7)
at show (um-tipsy.min.js?ver=4.9.8:1)
at HTMLDocument.n (um-tipsy.min.js?ver=4.9.8:1)
at HTMLDocument.handle (core.min.js:7)
at HTMLDocument.dispatch (core.min.js:7)
at HTMLDocument.m.handle (core.min.js:7)
I find this template awesome!
Hello,
Glad you like the template. I don’t understand the error. Did you include other plugins into the template? Do you have online demo so I can take a look at the problem?
Cheers.
Hi,
problems taking the latest download and running gulp to change the _variables.scss file. An error saying px and rem units are incompatible crops up. I tried to edit a few myself, though it seems the issue runs deeper than just a couple of variables.
Am i missing something? I was just trying to change some primary colours.
Rob
Hi,
Did you post your comment in the right place? Because we don’t have gulp tasks in TheAdmin template. It uses grunt and I’ve just tested it and couldn’t see any error.
Cheers.
no you’re right, it was on thesaas. I’ll re-post there.
Reporting a bug in the TOPBAR in latest version of the template:
1. Navigate to http://thetheme.io/theadmin/layout/topbar-menu.html
2. Resize the browser to phone width to activate the hamburger menu on the left
3. Clicking the hamburger menu opens a sidebar, BUT clicking any of the menus to open the sub menu does not work
4. Refresh the page (while you are still in phone size)
5. The sidebar menus now work correctly
6. However, if you resize the browser window to desktop size, the topbar dropdowns (layout, content) no longer work!
Please suggest a fix for this problem. Thank you.
Hi,
Thanks for reporting this bug. We’re aware of this issue and tried to fix it. It was a little complex to resolve at the time I looked at it. But I guess it’s not a frustrating bug. Most users don’t need to change the browser size while interacting with a website. They either open it in a large or small device and the website works fine as long as they don’t change the browser size. I’ll take another look at it in future.
Cheers.
Please give me the installation procedure for magento2.
It’s a HTML template, you can’t install it on Magento.
Hello,
I have a problem with the DatePicker.
If I use the control in a normal page it works perfect. The problem is when I use the control in a Modal page. The language is not loading properly. It does have the data-language with the correct language but it is showing in english.
<input class=”form-control validate” type=”text” id=”Date” name=”Date” value=”” data-provide=”datepicker” data-today-btn=”true” data-today-highlight=”true” data-autoclose=”true” data-language=”es”>
This is generating an issue when trying to update a date like august 21st, since the control is returning 08/21/2018 and the system is expecting 21/08/2018 since the language is in spanish.
It looks like the control is not getting the language properly and I don’t know if there is any javascript I can add to the Modal to refresh the language.
In the main page, there is another DatePucker and that one is showing in spanish, but not the Modal one.
Thanks for helping.
Hello,
I guess the problem is because your datepicker is hidden at page load. Some plugins doesn’t initialize correctly if the component is inside a hidden container at the page load, which modal component is a sample. To make sure if this is the problem, you can wrap your working datepicker inside a div with display:none style and see if it still works correctly or not. If the problem is because of the hidden container, we’re going to have hard time fixing the issue as I recall.
Cheers.
Yes, as I said in the first message, it is in a modal page, not exaclty hidden since the content is loaded using ajax, so maybe there is a way to call the datepicker after the ajax is loaded…in the past we used the datepicker without your template and we could load the control that way, but I don’t know how to do that using your template.
You gave me a solution for a similar problem with google maps, also loaded by ajax and finally you gave me a solution executing the command app.map(); and using the script <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_KEY”></script>
Is not there a similar way to do the same with the datepicker?
<script src="../assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> <script src="../assets/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js"></script>
Hello, the solution has been calling the datepicker as you do normally when you use TheAdmin:
data-provider="datepicker"And also adding the scripts you told me:
<script src="../assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js"></script>But you have to add this line in order to work:
$("#Date").datepicker({ language: "@Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName", autoclose: true, todayBtn: "linked", todayHighlight: true });This way the datepicker gets the language.
Thanks for helping, I hope my answer can help others.
Thanks for sharing.
