I am trying to migrate my app from plain HTML to framework 7, everything was going well until I noticed that the ajax requests were not being executed since they resulted in an error
Uncaught TypeError: $.ajax is not a function
at functionName (file.js:73:5)
at functionName (file.js:69:2)
at HTMLFormElement.<anonymous> (file.js:18:2)
I briefly know that the type error could occur mainly if jquery is not present in the project or when the slim version of Jquery is used which wasn't the case for my project
after some time hunting the cause of the issue, I found that whenever the file framework7-bundle.min.js is included ajax would stop working resulting in the above error, and would work if vice versa, is there a way to navigate through this issue?
after some trying to figure out the issue, I found that framework7 comes with its own Dom manipulator and uses the very symbol that jquery uses hence overriding all included jquery functionalities to fix this issue, I did comment on the line from where this Dom Manipulator is initialized.
The Dom Handler can be disabled by removing or commenting on the first line in app.js, this particular line var $ = Dom7;
Related
In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?
I'm using jQuery 2.2.4. Everything was ok until I done a major renaming. I renamed the main object, from actual application name to "app". I also renamed other things, as I was changing my app name.
Unfortunately jQuery (minified) doesn't work properly now . I noticed it 2 days after. I spotted 2 weird errors. For example:
$('body').on('change','input:not(.error)', function() { });
When input is changed I get an error "cannot read property test of undefined". jQuery was concatenated with my application file. When I moved jQuery to a separate file I got "uncaught reference error: app is not defined" for that event.
I renamed my main object back from app to something specific, but it didn't have any effect. And development version of jQuery works fine. I can't run a diff, because I changed so many things. Either I will find what causes the issue, or I will have to revert and do everything again.
Does anyone know what might cause jQuery to break? I remind that it only doesn't work on the minified, development version of jQuery.
I created a drag able component that what it does, is to require a certain module using RequireJS, and then executing this module. When I try to drag and use this component on CQ5, it fails to load, but on CQ6 it works fine!
edit1: CQ5 refers to localhost:4502/cf#/content/somePage.html url whereas CQ6 refers to
localhost:4502/editor.html/content/somePage.html
edit2: I tried to use more simpler component the depends on jQuery,
Backbone and underscore. It failed to execute because of binding
issue. I am trying to find now where CQ5 client code corrupting it.
Any help with that will be helpful!
One thing I saw, is that if I am adding the forceChannel query param, it loads the component, but fails to load the parsys fields. It also show the following error multiple time in the console:
Uncaught TypeError: Cannot read property 'edit' of undefined
It happens when it try to execute the following expression:
CQ.WCM.edit
Does anyone familiar with that issue? Or maybe show me where specifically might be the problem.
Thanks :)
I am getting this error in Chrome's Developer Tools:
Uncaught TypeError: undefined is not a function
This error is referencing this line of my main.js file. These two lines are both causing this error to happen:
jQuery("#signupfrm").fadeToggle('fast',function(){
jQuery("#loginfrm").fadeToggle('fast',function(){
I am getting this error when working on the website on my local computer, but it's from a theme I purchased that has a demo available online.
Here's a working copy of this same template:
https://www.whmcsdesigns.com/demo/cart.php?a=add&pid=1&systpl=flex
Just select "I will use my existing domain and update my nameservers" and enter any domain name. You'll be taken to a page where personal info can be entered. You will see that you have the option to select between "New Customer" and "Existing Customer". It works at the link above.
However, on my local server it's not letting me switch between new and existing. It just gives the error show above and is referencing those lines with signupfrm and loginfrm.
I'm guessing since it's working on the link aboving, those functions must be defined. Can anyone else find where those are being defined at?
Things that I suspect to be the problem:
jQuery hasn't been loaded correctly so the jQuery function can't be performed. It might not have been loading at all or it might be called $, but if other calls to jQuery work it should be OK.
fadeToggle is a part of jQuery so I expect that to work if jQuery is loaded
jQuery("#signupfrm").fadeToggle('fast',function(){
sometimes if you load dynamically and you test on C:\ or whatever local path things don't work the same, especially AJAX calls. Set up a local webserver to work on always, just using localhost on a simple Apache is a good start
I have been asked to fix an issue with a website and I am encountering an issue with a JavaScript error.
On the home page, [removed website link], I am receiving the error Uncaught TypeError: undefined is not a function. However, the function being called on that line (line 30) should exist, as the jQuery plugin is being loaded.
The call-stack just shows a series of anonymous functions pointing towards the jQuery file. I am having trouble determining why this is producing an undefined function error.
I have tried using the Chrome debugger to step through the code where the error occurs but it just seems to highlight the jQuery source file for every step.
My question is this:
How do I go about tracking down the source of the issue when the trail is just a series of anonymous functions in the jQuery source file?
Is there something I am missing here or that I am not considering?
Thank you.
Edit:
As is it not clear, the method being called, jQuery.ContentSlider is in fact being included within the page within the file testimonials.js.
This is not just a "What's wrong with my code" question, but also an inquiry into how I handle situations such as this in the context of JavaScript & jQuery specifically.
A call stack of anonymous functions is confusing to me, and I have already attempted to take the obvious steps, such as verifying the plugin is included and that this inclusion takes place before attempting to utilize that plugin.
Sorry for the confusion.
Edit - Solution Found
It appears that although jQuery and the plugin were included prior to use, another copy of the same jQuery file was being injected by a Joomla! module. Since this was the exact same Google hosted jQuery file, it did NOT appear twice in the Resources tab in the Chrome Developer Tools. It appears that Chrome will parse jQuery twice, but doesn't show it as being included twice. So, the version with the plugin attached was being overwritten.
Thank you to those who answered. Thanks to A. Wolff for bringing that piece of information about the Resource tab to my attention.
You're loading the slider after you instantiate it.
Reverse the order of these two blocks:
<script type="text/javascript">
$(function() {
jQuery('#two').ContentSlider({
width : '440px',
height : '240px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<script src="/templates/sp/javascript/jquery.sudoSlider.min.js"></script>
Edit: To the heart of your well-formed question about debugging, generally, Undefined is not a function, especially when dealing with frameworks, is a symptom of trying to access a method before it exists, which is why your attempted function call returns undefined rather than a function.
It's almost always the result of loading a framework after trying to call it, or in an asynchronous context, of not waiting for the framework to load or do something important.
EDIT 2: The above answer is not correct, as A.Wolff points out: it's not that you must reverse the order of the two blocks, but that:
1) The second framework is probably not the one you want, or
2) You have called jQuery('#two').ContentSlider when you meant to call .sudoSlider, (or whatever is appropriate for that framework).