I am using IHP and IHP's use of Morphdom and / or Turbolinks seems to interfere with some other JavaScript things when the page isn't a fresh load. This includes things like Elm apps, and in this example, Dygraph:
Uncaught ReferenceError: Dygraph is not defined
at HTMLDivElement.<anonymous> (<anonymous>:51:33)
at Function.each (jquery-3.6.0.slim.min.js:2:3209)
at E.fn.init.each (jquery-3.6.0.slim.min.js:2:1687)
at HTMLDocument.initCharts (<anonymous>:40:25)
at HTMLDocument.dispatch (jquery-3.6.0.slim.min.js:2:42842)
at HTMLDocument.v.handle (jquery-3.6.0.slim.min.js:2:40826)
at Object.e.dispatch (turbolinks.js:5:1411)
at r.notifyApplicationAfterPageLoad (turbolinks.js:6:1175)
at r.visitCompleted (turbolinks.js:6:1800)
at r.complete (turbolinks.js:5:24022)
In this case I am setting up a graph using Dygraph and using the following to try to initiate it upon the Turbolinks loading in:
$(document).on('ready turbolinks:load', initCharts);
which I thought would fix this because it would call the function only when Turbolinks had loaded the page. But this doesn't seem to have helped.
Essentially it seems like the Dygraph js is not loaded before it is called later in the page. This only seems to happen when we come from another page using Morphdom. The temporary fix is to refresh the page when the graphs won't load, but this is definitely not a great long-term solution.
How can I properly load in new JS files in IHP without Morphdom getting in the way? How might we fix such things?
Related
I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.
After logging in and adding in some workouts in the app's UI, whenever I try to call the deleteWorkout function, I get an error in the console saying that the function is not defined, whereas I have clearly defined in the workoutStore. I can't seem to figure out the reason for the same.
The same can be seen in the given screenshot.
Console on clicking the delete button
PS:
Most probably the error should be originating from either /pages/workouts.vue, /components/WorkoutDetails.vue or /stores/workout.js.
I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)
In your code the problem is, you declear your deleteWorkout() function outside of the actions block in workout.js file.
Make sure all your functions in the workout store are inside the actions block. Then it will be accessable from the vue component
mod_ajax_dock cart Not working in which come following error.
this.load undefined or can not Cannot read property 'style'.
so plz help me solve this question
That's generally a Javascript conflict caused by the various scripts that your site is loading. The first place to start is to install jQuery Easy to strip out multiple instances of jQuery as well as the usually loaded Mootools. You will have to mess around with the settings, I usually have it strip everything out and see what breaks, then start adding scripts back in until everything works.
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327
I'm fairly new to Express and am having an issue. I have node_env set to production and app.get('view cache') is returning true. However, it doesn't appear to be caching my jade baseed views. I can see get with a 304, but my view render is still being called every time.
Am I misunderstanding what this setting is for?
Edit: I guess this setting is really just to make views templates perform better in production. Am I to assume then the express does not support caching of dynamically generated view content?
I noticed adding res.header('Cache-Control', 'max-age=60, must-revalidate');
Is there a cleaner way to do this? thanks
When the 'view cache' setting is true, it caches the compiled javascript of the jade templates.
It doesn't however, cache the jade into a fully static document.
If you wished to do this, you could render the jade once in your app and store the result as a file or in memory. Then you just serve this rendered jade to your client.
I've built a Rails 3 app and I'm trying to get it working with JQueryMobile. I've gone ahead and required query_mobile_rails and that works just fine, but I need to disable the AJAX loading as it seems to get in the way of many things. Looking at the jquerymobile docs, they recommend adding the following javascript after loading JQuery, but before loading JQueryMobile:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
I've been reading through the docs on the Asset Pipeline, but I cannot figure out how I can manage to get my code (the above) inserted after JQuery and before JQueryMobile. Where do I place such a .js file so that it will be loaded at the proper time?
Any help would be greatly appreciated!
Nevermind. I got it. I created a file called app/assets/app_lib.js with the code above and then added a require app_lib between require jquery and require query.mobile in my application.js file.
Thanks to everyone in advance -
So I have been banging on this issue for quite a while now and have burned through all my options. My current approach to canceling css requests is with nsIRequest.cancel inside of nsIWebProgressListener.onStateChange. This works most of the time, except when things are a little laggy a few will slip through and jump out of the loadgroup before I can get to them. This is obviously a dirty solution.
I have read through the following links to try and get a better idea of how to disable css before a nsIRequest is created...no dice.
https://developer.mozilla.org/en/Document_Loading_-_From_Load_Start_to_Finding_a_Handler
https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request
https://developer.mozilla.org/en/Bird's_Eye_View_of_the_Mozilla_Framework
How do I disable css via presentation objects/interfaces? Is this possible? Inside of nsIDocShell there are a few attributes that kind of imply you can disable css via the browsers docshell - allowPlugins, allowJavascript, allowMetaRedirects, allowSubframes, allowImages.
Any suggestions?
Thanks,
Sam
The menu option that disables style sheets uses a function
setStyleDisabled(true)
so you probably can just call this function whenever new browser tab is created. Style sheets are still requested from server, but not applied. This function is not very sophisticated and doesn't mess with nsIRequest, source:
function setStyleDisabled(disabled) {
getMarkupDocumentViewer().authorStyleDisabled = disabled;
}
Digging in Web Developer Toolbar source code I have noticed that their "disable stylesheets" function loops trough all document.styleSheets and sets the disabled property to true, like:
/* if DOM content is loaded */
var sheets = document.styleSheets;
for(var i in sheets){ sheets[i].disabled = true; }
So if the key is to not apply CSS to pages, one of the above solutions should work. But if you really need to stop style sheets from being downloaded from servers, I'm affraid nsIRequest interception is your only option.
Set permissions.default.stylesheet to 2 and voilà!
You can actually use the permissions manager to block or allow stylesheets on a host-by-host basis.
Unfortunately there doesn't seem to be a simple flag like allowImages. The bugzilla adding for that is https://bugzilla.mozilla.org/show_bug.cgi?id=340746. You can now vote for it using the new bugzilla voting functionality. You can also add yourself to the CC list to be notified if anyone ever works on it.
A related request is to just give us basic HTML parsing support, which may be what you are trying to do. Unfortunately that isn't supported yet either, but you can vote/track the bugzilla for that at https://bugzilla.mozilla.org/show_bug.cgi?id=102699.
So the only workable solution seems to be some sort of interception as #pawal suggests. Here is a link that talks about the basics of interception to at least get you/us started https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads. It lists several options that I list below.
These first few seem to just be at the page/document level so I don't think they help:
Load Events (addEventListener load)
Web Progress Listeners (nsIWebProgressListener) - I tried this approach, it only seems to be called for the page itself, not for content within the page.
Document Loader Service - A global version of nsIWebProgressListener so I think it has the same problem (page level only)
That leaves two others I have not tried yet. They work globally so you would need to filter them to just the browser/pages you care about.
HTTP Observers - Seems like it might work, need to verify it calls back for CSS
Content Policy - Seems like the best option to me since it explicitly is called for CSS, someday I hope to try it :)