I am trying to create a 3d model viewing website for various student projects. Currently pulling from the 3js library to reference OBJs and MTLs on server. The idea is that you can click on the left box of each student wrap div to open a modal with a 3js file viewer.
This works 100% of the time the first time you view a model (first execution of render function), but opening and closing models will often result in MTLs being dropped, see here. Testing on multiple devices it seems that devices with faster internet connection/more processing power can actually load more files before corruption begins. In addition, not rotating the viewer seems to allow more files to be opened.
No error messages for the JS can be found in the Inspector. Messages sent from the 3js library files, however, show numerous errors any time a second/third/nth file is loaded without JS refresh. Putting in location.window.reload() in the exit function refreshes JS each time and fixes the error, but that causes a whole other set of problems.
The site with all source code and files can be accessed here: biszweb.
I will be able to provide more information is needed.
Please advise and thanks in advance.
Resolved. Certain parts of 3.js need to be reloaded after rendering a model. Simple fix would be to insert a js reloading script.
Related
I would like to know if it possible to run a JavaScript script continuously in the background of a CefSharp application, having it start upon the application first opening and run until it is closed.
Specifically, I am utilising a JavaScript-based eye tracking library. Upon the application opening, the user needs to calibrate the eye tracking. Once calibrated, this script needs to run in the background sending tracking information to other pieces of JavaScript.
Currently, all JavaScript is loaded and executed on the main frame. So, when the user navigates to new pages using the browser, execution ends and all the JS is re-loaded and re-executed upon the frame loading again. This makes it so that the user is prompted to re-calibrate the eye tracking on each new page load, whenever I need it to be performed only once.
The JavaScript files that are re-loaded need to be re-loaded, as they interact directly with the DOM and so need to access the information of newly loaded pages.
It'd be preferable for these re-loaded JavaScript files to be able to interact directly with the continuously running background code, but it is also possible to establish communication through a WebSocket.
Currently, I am not sure if this is even possible and if it is I do not know how to go about it.
I attempted to spawn a new separate frame that is never re-loaded and running the background JavaScript there - but I did not get very far. The application I am building on does not currently support multiple tabs (there seems to be no UI available for it, etc), hence why I found it difficult to spawn a new frame that the user can interact with briefly.
Apologies for the lack of code snippets - many thanks in advance.
I'm making a local web page (.html) that loads a few .js files and am having trouble using Google Chrome's Developer Tools.
Definition
The problem I'm having has to do with the Source Panel: I have one source tab open with a specific file and when I open this file by clicking the console or the source file at the left, randomly a duplicate is created instead of just redirecting it to the one already open.
Both will have the same file-path:
Both will allow me to write and save the file (even showing/hiding the asterisk correctly)
Only one of them will correctly save the contents to disk.
I have to fix it by closing both files and opening it again, but sometimes I can't see that there is a duplicated file and it causes me to fix a problem only to find out that the file wasn't actually saved, reverting completely every change I made to that file when I refresh the page.
Example of the problem
The most common appearance of the bug is when I'm doing the following:
I identify a console.warn / console.error / syntax error log in the console
I click the line that caused that log (at the rightmost of the console) and I'm redirected to the source panel, where a new source file tab opens and I begin editing it.
Somewhere in the source tabs is another source file of that same file (with the same filepath): That tab should be the one I was editing: only this original tab will correctly save changes made to the file.
I fix the random javascript problem in the file that I was lead to by clicking the console.
I hit Ctrl+S (or Right Click > Save), the asterisk that indicates a unsaved file disappears. At that point Chrome expects to have saved the file successfully, but it didn't (I can check by opening the file in Notepad)
I hit F5 to refresh the page.
Chrome loads the old, unsaved file, erasing all the changes I made in the source file.
Sometimes the very same steps doesn't create a duplicate file, but all I have to do is refresh and try again until it does. Recreating this bug is a matter of chance, I can't predict or pinpoint its causes either.
When refreshing the page with the Dev Tools open, there's a small chance that it will creates a broken mapping, where the mapped project becomes only partially mapped
even though it was fine seconds before: (only restarting chrome fixes that)
This last paragraph may or may not have something to do with the problem but I can clearly select and open the "fake" file and the "real" file even though they have the same file path.
I made this gif to show how the file paths are identical to each other in the Dev Tools: http://i.imgur.com/ULlbskO.gif
Details of the setup
I'm using the local file system (file:///) strictly, there is no localhost or server being used to host my application, it is pure HTML + Javascript.
I'm using Google Chrome 57 for Windows without any extensions, but I've been having that problem since December, 2016.
My project was mapped by adding the folder to the workspace and mapping it to a local file, which used to work in the past.
Here's a picture of my configurations: http://i.imgur.com/IEmE3zG.png
Things I've tried
Clearing Chrome's Cache
Removing the project from the Source Panel workspace and adding it again
Reinstalling Chrome
Moving the project path to somewhere else
Searching on Google
Letting go / Accepting defeat (I've grown too dependent on the tool)
Waiting 2 months for someone to have this problem too and post it somewhere in the internet
Questions I need help with
Can I minimize/fix this problem in any way?
Has anyone dealt with this before?
Does someone know if this is a Chrome bug or am I doing something wrong with my workflow?
Found the answer myself after several months working with web development.
The duplicated file has been fixed in Chrome since the time I made this question, but files keep loosing "connection" with the local file system (green dot that marks them as sync'd with local) randomly, which made me investigate and I finally found the reason:
What's happening is that Dev Tools is trying to save the file and, when it retrieves it it loads from cache (because my local web server was sending cache-specific headers), which makes the browser think that file file is not actually the one it saved, so it stops its syncronization!
To solve it, all I had to do is ensure my local web server is disabling any form of cache for my javascript files, which I can check from the network panel:
My local web server was sending cache headers for 1 hour, which made chrome open the cached file, which was different from my edited file which was an indication that the file is not the one it saved.
After changing the server to serve static content without the cache headers, everything went smoothly and files kept sync'd correctly!
I've first noticed that the results are not in the HTML received from the server therefore I opened Dev Tools and started looking at the other files that my browser downloaded.
I've noticed that there was only one xhr request named gcosuc and no json( nor xml or other data files downloaded) therefore I thought the code was embedded in the JS itself.
I then searched all the .js files downloaded by chrome and still I could not find where the search results came from.
The I thought that the search results might be inside and iframe element and because of this they are not shown in Dev Tools. With this hypothesis in mind I looked at the HTML generated by the JS after the DOM was loaded thinking that the result might be embedded in an iframe and again I was wrong.
Does anyone have any idea how Google gets and renders it's search results?
As well as I've been able to figure out, it is all done using JavaScript and rendered dynamically as you scroll.
Google+ works similarly. Only what you see on the screen is actually on the DOM and it all disappears as you scroll.
If you are trying to screen scrape the results, I would recommend rendering into a browser and looking at the resulting DOM. I use Chromium.
Made a quick try, and it's indeed an AJAX request. The URI is /s and it passes GET parameters, including what you've search.
The response is some kind of awkward JSON that includes text, styles, and some JS. It's like JSON objects, but separated by this chars: /*""*/
Here's an example (word wrapped because lines are really long):
Edit I add the DevTools requests made by Google:
I see this strange behavior (or may be I am missing something).
I have WebSphere 8.5. Deployed a EAR. Its working fine.
Instead of repacking and deploying every time for small change, I just copy the js and CSS files directly to the Websphere exploded folder and overwrite the existing files. I see the changes are getting reflected.
I just updated a JS file and added a couple jQuery functions and copied the file like above. Now when I refresh the page, I see the updated code (which is somewhere in the middle of the file). however the js file is not loading fully in all 3 browsers (IE8, Chrome and FF latest). It's getting cut off in the last 10 lines are so.
The file has 1784 lines. Not sure if there is a size limit on the browser side or WebSphere is tinkering with it or something else is going on. Any idea?
I did check the js file I copied to Exploded WebSphere folder. It has complete code.
Note that the page has a few more JS files (jQuery and other files) in addition to this one.
Edit:
I think WebSphere is keeping the size of the file somewhere (maybe?) and sending only that size every time, unless there is clean deploy or restart (?).
I removed a few lines of updated code. Now the browser loads, exactly that many number of additional lines of code. Once I remove my code completely, it loads the full file. (This is not an issue with the code though).
Is there a caching that I need to clear in WebSphere?
Check this page it Hot deployment and dynamic reloading. In general it says that you may need to restart the application.
Also check, if application reloading is enabled, however I'm not sure if it is relevant for static files.
If reloading of classes is enabled and the polling interval is greater
than zero (0), the application files are reloaded after the
application is updated. For JavaServer Pages (JSP) files in a web
module, a web container reloads JSP files only when the IBM extension
jspReloadingEnabled in the jspAttributes of the ibm-web-ext.xml file
is set to true. You can set jspReloadingEnabled to true when editing
your web module's extended deployment descriptors in an assembly tool.
You can restart app from console as provided in comments or via wsadmin script.
I am creating a grails app and loading JSON files in my controller and am faced with a high risk Data issue.
The JSON files are loaded using requests in the index.gsp file of the views part.
I have various drop downs, date slider and charts in my web application using various javascript libraries (d3, jquery, highcharts, dc and crossfilter)
Now, the issue is every dropdown selection loads a new JSON table in the browser, which can be seen in the network part of the browser after pressing F12
So, after a set of selections (depending on json table size) as soon as net data transferred exceeds 200 Mb, the browser and the page becomes very slow, eventually leading to browser/page crash.
So, I started searching for clearing cache memory using javascript and apparently from the results, it's quite tough and not practical as it deals with the security issues of a browser.
How to programmatically empty browser cache?
Clear the cache in JavaScript
So, I need a method for the browser to clear the cache every time a drop down is selected.
But, Is the JSON file data being loaded in cache memory or something else?
As I also tried clearing cache manually by going to tools ..etc and still the browser crashed.
Can anyone tell me an approach to go about solving the problem?
Two questions mainly :
1. Where does the JSON file load data in the browser ( which memory)?
2. How do I keep clearing this data to reduce load on the browser?
Any help would be appreciated.
I am currently trying Gzip and other compressions.