I have been working with DataTables for the last months and have already implemented server side processing with success. However the last requirement I was given was to have a search input in order to filter across all columns (like the predefault search for client side processing(CSP)).
As I antecipated that implementing that filter in server side processing (SSP) would result in a really slow query I switched my focus to CSP. Everything is working fine...except the usual suspect IE8 (requirement). The sort, paging and filtering all work really well in IE, however the initial loading is really slow and filled with "A script on this page is causing Internet Explorer to run slowly" dialogs. I spent the day reading the Datatables forum and SO looking for solutions, and did some experiments but nothing works (if I return more than ~2000 I get the damned dialog - I am testing with ~4000 rows):
-Using rows.add() in chunks of the returned JSON object (adapted the solution provided here DataTables Forum IE fix to work for version 1.10.3)
-Using deferRender = true
Notes:
1- I have some columns(4-5) that must use the render function in order to display custom data
2- I have some hidden columns (read somewhere that IE had some problems with hidden columns/table placeholder).
If someone has some more options I could try, I would be grateful!
Thank you in advance
EDIT: Couple of things I have already tried:
-Removed all the render functions;
-Made all columns not sortable;
-I have a bunch of click handlers that I was assigning in the DataTable's drawCallBack option: I switched it to delegate handlers and assigned them before initializing the table.
I still have the slow dialog...I am running my application in a VM with IE8, does the hardware have any impact? Given that the dialog is caused by the number of Javascript statements ran I doubt it, but I am not certain.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Places autocomplete (javascript) has been weird in a lot of ways. I'm to the point that it works seemingly all the time on certain browsers, but intermittently on others. And to get here I've had to do some things counter to other advice, (though the 'correct' way works even less) so I have a lot to list.
The specific issue (on any browser) is that the callback initAutocomplete() does fully occur, but sometimes the input field just doesn't get the suggestions appearing. There are, however, no errors logged. I've found 2 things of note when it fails: pac-container is not created, and no requests are sent for AutocompletionService.GetPredictions.
The errors does not seem to ever occur on FireFox or on Edge. It happens most of the time on Chrome. It never works on iOS Chrome but does rarely on Safari... Not a useful pattern, so far.
There is more than one call to Maps APIs on the page, causing the "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." error. However, there does not seem to be an actual problem from this as the calls are to different libraries (geometry and places). And the callback function of the place script absolutely always functions, at least.
Aside from that, no errors of any kind report. It is notable that I'm currently attaching a sessiontoken that is actually session based (for the user, so for multiple requests.) This is directly contrary to information such as stackoverflow.com/a/50452233/5140781 (I've searched a lot before posting) that says a sessiontoken is not needed and will be handled automatically. It is contrary because not including it makes the service break far more often. Without it it breaks a good amount of the time on Firefox and Edge which are currently fine and Chrome will only work once per user session, after one refresh or on any subsequent form it is definitely not going to work any more.
I've also tried attaching a random session token on every page load, that didn't help either. Though since in all cases the error is fairly random it could be that the error has nothing to do with the session token and everything I've seen is just human pattern seeking and [bad] luck. Maybe it is just a race condition of the different API calls for all I know. I get it to work on Chrome more if I do a 'empty cache and hard reload' than just F5; add that to it typically working the first time in a session and maybe you have that loading the scripts from cache is more likely to cause an issue than when they load for real? I'm out of ideas, or at least ones I think are reasonable.
The code for the initAutocomplete is almost exactly as given in the example, save adding the sessiontoken (and again, without that it fails more).
Any help would be appreciated.
It was, in fact, the double inclusion of a google API. This is despite the fact one include library was geometry and this was places, and that the callback on the Place script was happening even in fail states..
Simply removing the geometry include on the relevant pages fixed the Autocomplete functionality 100% (and we could drop the sessiontoken), but geometry was needed for other functions on the page. That was solved by adding it to the include made for the place library. Simply use commas to target multiple libraries; I didn't see that mentioned in the documentation, but is was an easy guess:
<script src="https://maps.googleapis.com/maps/api/js?key=********&libraries=places,geometry&callback=initAutocomplete" async defer></script>
Now, if you need geometry (or whatever other library) higher and sooner than your place include, that is a new problem I did not have. But for anyone finding this, my most simple recommendation would be moving the whole autocomplete chunk up there and combining the include in the same way. There are then 2 possible issues: The other script already having a callback, and the form potentially not existing yet.
The callbacks can be combined trivially if only the first point is your issue; just do the other callback code then the autocomplete. For just the second, there are two options: First, if you can have your form appearing trigger an event, then have the callback set a listener for it to then to its usual (watch for the form possibly loading first though!). Second, a setInterval that checks for the element existing and does the work when it is found (and stops checking)--that is dirty, but will work with just vanilla js; there is probably a better option if whatever framework you have. If you have both problems, just have the listener/interval at the start of the callback.
I am trying to improve performance of the select2 v3.4.8 library in IE8.
Essentially, I have narrowed the problem down to the call from the SingleSelect2's opening method to the parent AbstractSelect2's opening method. The method call I am speaking of is this one:
this.parent.opening.apply(this, arguments);
I have seen this call take upwards of 5 seconds to complete. In some instances, it has taken up to 10 seconds to open the dropdown in IE8.
I've made some performance improvements already. For example, rather than constantly adding the:
<div id="select2-drop-mask" class="select2-drop-mask"></div>
to the DOM programmatically, I just added it directly to the markup and set it's display:none. This saves quite a number of cycles because apparently, adding elements to the DOM in IE8 is expensive to do from Javascript.
But I still want to get more performance improvements than this. We have only increased performance by about 10-20% by making this change.
Does anyone have any suggestions for me?
We've already cached the data to display in the dropdown on the client on page load. So, there are zero server calls being made when the dropdown is opening. The performance bottleneck is entirely inside the select2 library itself.
Unfortunately, we are unable to upgrade our select2 library. Doing so would be at least an 8-Point User Story, so it's prohibitive at this time for us to undertake an upgrade.
Thanks to anyone who's able to help!
-classTemplateT
We are using DataTables which is a plug-in for the jQuery Javascript library... > https://datatables.net/
"...it is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table..."
To populate the tables we are pulling data from a JSON file.
Here's my question and hopefully you guys can offer a possible solution....why is it that the data when called is NOT visible in the Source Code? It just isn't there yet the data and the tables are populated? The problem with this is that when the table has been populated with several rows it hides behind my footer - which I am sure is a result of the data not being parsed like 'normal'
Any idea how I can force the data produced by this Jquery plugin to be written and parsed normally?
Thanks for all pointers and things to look for since I am basically totally new to this...
The source code only displays the original HTML received from the server. Any subsequent changes in the DOM won't show. In order to see the current state of the DOM, use the web inspector of your browser, be it Google Chrome, Firefox, Internet Explorer, Safari, Opera, ...
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola
I have created a Drupal website that uses Openlayers to display maps. In one of these maps there are some "Filters" which the user can use to dynamically change the data shown in the map. The data are related to countries are shown as bubbles over the countries. The bubbles are drawn using Openlayers' API. A good amount of calculations go behind the scene while filters are selected. I have used setTimeout to avoid long running loops. The filters work fine. However, after a number of filters are clicked (e.g. if 12 filters are clicked), if the user tries to move to another page by clicking a link, in IE7 and IE8 the following error shows -
"Stop running this script?
A script on this page is causing your web browser to run slowly.
If it continues to run, your computer might become unresponsive."
This error does not show in any other browser and does not show in IE7, 8 until a link is clicked. Any pointer in this regard will be highly appreciated.
UPDATE : The problem was in OpenLayers' event cache. OpenLayers's clears the event cache in the window unload event and this was getting stuck in IE7 and IE8 (I am not sure why). So far I have been able to solve the issue when user clicks another link, by calling OpenLayers.Event.unloadCache() on click of normal links.
jQuery can be very resource expensive. The articles linked bellow gives you 10 good advices to perform better your jQuery applications. The most useful for me (I had the same problem a month ago) was to replace $.each() with traditional for lops and to replace extensive DOM construction with jquery templates. Also the use of ID instead of classes and to give a context for the selectors, selector caching, and so on.
This list is ordered using my own criteria of "usefulness" in the advices.
10 ways to instantly increase your jquery performance
improve your jquery 25 excellent tips
10 advanced jquery performance tuning tips from paul irish
8 jquery performance tips
You need to optimize your client script. Please refer to answers here.