I'm wondering why when I call: eval("myFunc(1,2,3)") in the Firebug console on a rendered page, the function executes properly, but when I call the same eval within by javascript within then page, I get a " is not defined" error that pops up in the Firebug console. Part of my problem is that I don't have control over the incoming HTML/JS and I can't seem to find where the function is defined. So I guess my questions are, why am I getting that error and how can I find where the function I'm trying to call is defined? If I pull up the page source, I can see calls to the function but I don't see where it is defined.
If you view the source you should be able to see any JS in the source code and any attached js files too - you should be able to download them and open them in your editor then do a find.
The function is probably defined in an external file. In firebug, if you just type out myFunc (without paranthesis) you should be able to get a clickable link to the source.
The reason it's not working in your eval-script, is probably that it's being executed before the function is defined. Try defering it by, say, putting it in a page load or domready event listener.
Related
After adding JS reference (programmatically), right image, I want consequently to call my function with onclick event or with selenium(py). I see in DEV tool my reference is added but I am not able to call my function from embedded reference. THX
driverEdge.execute_script('my_function();')
Error: javascript error: my_function is not defined
(FYI: All script works if the page already has my reference embedded )
I found workaround. Store JS logic in file. Read content and let it execute.
driverEdge.execute_script("content_of_file_with_logic.js")
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).
Is there any quick way to find out which javascript code (file name and exact line) fired a particular ajax call?
Using firebug i can locate the ajax call but finding out the exact line quickly will help to debug
Thanks in advance for any help
In Firebug you can either click the source link in the Console panel:
or set a breakpoint in the Net panel:
If you put a breakpoint in your code at the point of this ajax call, the debugger will show you the stack of function calls.
See this from Chrome developer tools documentation :
I don't really know any clean method (maybe there exists one). But I have a little hack to propose.
If you are not using Prototype.js in your webpage, enter these commands in the command line (with Firebug 1.11):
window.old$ = $; // in case you're using a framework like jQuery
include("https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"); // loads Prototype
The console should print: prototype.js properly included.
Then, to restore your old "$" variable, type:
window.$ = window.old$;
Now that Prototype is loaded, we can wrap the XMLHttpRequest.prototype.open function, so we can get the call stack (just like suggested dystroy):
XMLHttpRequest.prototype.open = XMLHttpRequest.prototype.open.wrap(function(orig, ...args)
{
console.log("trace for :"+args[1]); // prints the URL of the request
console.trace(); // prints the stack trace
orig.apply(null, args); // call the original function
});
And that's it.
N.B.: if the request is launched at start:
in the Script panel, set a breakpoint on the first JS instruction of your webpage
execute the commands above in the Console panel
go back to the Script panel, and click on continue
what I usually do is adding a bunch of:
console.log("message that explains where in the code I am now...");
but pay attention, because console.log can create problems with older version of IE, you have to remove all console.log calls when you go in production.
Sorry, new to Firebug. I really find being able to run javascript in the Firebug console window helpful. However, I don't seem to be able to run jQuery calls in the console. For example, in my executing javascript in my page, I may make the call to get a value:
jQuery('#an_element_value').text()
However, I cannot execute this in the console. In order to retrieve this value from the page in the console I have to execute:
document.getElementById('an_element_value').innerHTML
Is there a way to execute jQuery calls and reference page elements through jQuery in the Firebug console?
Like others have said, it wont work unless you have jquery included on the page. However, you can easily include jQuery on any page with this bookmarklet: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet
Just put this before your code in firebug console:
include("jquery");
more...