I'm receiving a $ is not a function error. This is new since I updated from 3.2.1.
I have an identical setup working on 3.1.
Have folks run into this issue? I have turned off all plugins and am just attempting to load the superfish (or any jquery) and am receiving this error.
What changed that I'm missing? These are all currently on the same server if that is any help.
thank you,
What happens if you change $ to jQuery? Does that work? $ is simply a variable for the jQuery object. In some setups, you need to use jQuery rather than $.
EDIT
I had the same error, and it was because of jQuery not loaded.
You can this error if your jquery is not loading. To determine if this is the case, you need to debug your webpage network traffic using IE9 -> F12 -> Network -> Capture to see if you get 404 for jQuery files (i.e. something/wp-includes/jquery.js), or use same thing in Firefox's Firebug extension.
You can also search for jquery in page source, it should be in tag, and when you find src (i.e. http://code.jquery.com/jquery-1.6.4.min.js) try open it, if it says 404 not found then you need to place jquery in that file on server (or change whatever php/plugin loads that script tag to correct path)
If you do not know how to do this, please provide link to your wordpress installation.
Related
A website is running a jQuery script. I want to use a Chrome Extension to have the site run my own version of the jQuery script, and not the normal one.
So far, I've managed to make the chrome extension find where the website calls the normal script, and I've replaced it with my own:
document.querySelector("script[src^='website.com/originaljqueryscript']").src = 'myjqueryscript';
As a test, I made myjqueryscript the exact same script as the originaljqueryscript. I set the run_at in the manifest to run at document_end.
When I try to open the website with my script enabled, the console logged an error $(...).dialog is not a function. I think this is because jQuery is not loaded in my chrome extension. So then I found which version of jQuery the website is using, and added that to my chrome extension. Now I get this error: $(…).dialog is not a function I believe that error is due to a conflict between the two jQuerys that have been loaded (one on the website, one from my extension).
Am I on the right track, or is there a better way to replace a websites jQuery script with my own?
If this is for a very specific website, loading jQuery from a specific URL, you can use webRequest API to intercept the request to jQuery and redirect it to a file bundled in your extension. E.g.:
chrome.webRequest.onBeforeRequest.addListener(
function(details) { return {redirectUrl: chrome.runtime.getUrl("js/myjquery.js")}; },
{urls: ["https://example.com/js/jquery.js"]},
["blocking"]
);
(Note: this sample is very minimal; you may need to include and inspect request headers to make sure that the source page is your target site - you really don't want to replace a CDN-provided jQuery for all sites)
This assumes that the website does not use Subresource Integrity checks, however I believe that it will bypass a script-src Content Security Policy (redirect is transparent).
Note that .dialog() is part of jQuery UI, not core jQuery; the site presumably loads both, and you'll need to intercept both. It's possible that the site actually bundles them together.
I layout'd a page and on my server which is it hostgator works extremely fine, using the jQuery mobile components:
http://brunolustro.com/roger/teste/cadastro.html
But my friend who is programming the page wanted me to insert the newest CDNs from either jQuery and jQuery Mobile:
And this is what the page looks like when I insert those codes:
http://brunolustro.com/roger/test/cadastro.html
Do you know how to fix this?
Regards,
Bruno
When working with JavaScript or jQuery on your website - if something isn't working as you intend - the first thing you should do is check the browser console to see if anything is being logged there.
To check the browser console:
Hit F12 on your keyboard. When the developer tools open, choose the console tab, its placed in the toolbar at the top of the new window.
In the console you will see a few errors in red with error codes (404). A 404 means the requested file wasn't found.
This tells us that your reference to jQuery isn't correct. This could be because the file path you've written isn't correct, or that you haven't deployed those files correctly to your site.
Check your file paths you've referenced and make sure the file is on your server. Once both are correct - the errors should go away.
Here's a link to view more about developer tools: https://developer.chrome.com/devtools#console
Check following files in your "test/js" and "teste/js" folders, because i've got 404 not found error:
jquery-2.0.3.min.js
modernizr-2.6.2.min.js
jquery.mobile-1.4.5.min.map
I have this extension function and it seems to be not causing any problems. But as soon as I try to use it, I get an error message: Object doesn't support property or method 'n2name'
No errors are reported in the plug-in code (snippet pasted below for reference, with a link to the full file at the end).
Does anyone have any idea why this isn't working?
Note: I'm trying to fix an issue on this open-source project: https://github.com/n2cms/n2cms/issues/279 and there may be more useful details on that Github bug.
Sorry if this question is too vague, and for the long code snippet (most of it probably isn't relevant). But any help would really be appreciated
/**
* n2name 0.2
*/
(function($) {
/* some code removed for brevity */
$.fn.n2name = function(options) {
var invokeUpdateName = function(){
updateName(options.titleId, options.nameId, options.whitespaceReplacement, options.toLower, options.replacements, options.keepUpdatedBoxId);
};
if(options.keepUpdatedBoxId){
/* more code removed for brevity */
}
};
})(jQuery);;
Link to jquery.n2name.js full source, if the code snippet above is not useful: https://github.com/n2cms/n2cms/blob/4469580fcdd9c91f7576f07c3d2c8a4479ed6ce9/src/Mvc/MvcTemplates/N2/Resources/Js/plugins/jquery.n2name.js
The errors "Object doesn't support property or method <name>" (IE) and "<name> is not a function" (Chrome) usually mean that your jQuery plugin didn't successfully load before it was called.
This can be due to a failed request (check Dev Tools' Network tab), forgetting/misplacing the plugin's script tag or the script tag having defer/async attributes. Another possible cause is the plugin's script containing syntax errors (check the Dev Tools' Console tab in that case).
Having multiple versions of jQuery in the same page (as commented in OP's linked GH issue) is another possibility, seeing as plugins wrapped in the (function(){}(jQuery)); boilerplate are only added to the jQuery object referenced by window.jQuery at the time the plugin script loads.
In this specific case, OP was having issues to load the plugin from localhost inside VS.
I've seen similar issues, and I'll just add that it is invalid to use protocol-less URLs (for example: //somecdn.com/library.js) when loading files from a file:/// URI scheme. This is because protocol-less URLs "inherit" the protocol being used from the parent document and file:/// is not a protocol. In case you're loading it from a local server (e.g. parent document served through http as in http://localhost/library.js) the protocol-less URLs should work fine.
I created an Asp.Net MVC Internet Aplication and in my Index view of the Home Controller I have this
This is the first line, before the script results.
<script type="text/javascript" src="~/Script/Teste.js"></script>
<br />
This line comes after the script.
In my Teste.js I have this:
document.write("Yes! I am now a JavaScript coder!");
But nothing happens. If I change the src attribute and put some random name src="aaaa", despite the fact "aaaa" doesnt exist, I get no error in runtime.
EDIT
Also, check your path again. The default MVC templates in VS create a folder called Scripts, not Script. ("~/Scripts/teste.js")
Per the comment below, this was not the root cause of the issue, but in other cases can easily bite new JavaScript developers.
Most likely, your document.write function is firing before the document is ready, leading to the appearance that nothing is happening. Try the following in your Teste.js file
window.onload = function ()
{
document.write("Yes! I am now a JavaScript coder!");
//or even better as a test
alert("This alert was called");
}
Check the source of your page as well, it could be the document is being written to, you just can't see it due to markup/page styling.
As for you second issue, there will be no 'Runtime Exception' thrown if you reference a non-existent file. If you are using tools like Firebug or Chrome's developer tools, you should see a request to http://siteDomain/Scripts/aaaa.js with a response of 404, not found.
You generally should avoid using document.write() unless you absolutely have to use it for some reason... I don't think I've ever come across such a situation, and write a lot of Javascript.
Try this:
1) Put this in your HTML:
<script src="/scripts/teste.js"></script>
2) Put this in your JS:
alert('Yes! I am now a JavaScript coder!');
3) Open Chrome since it makes it easy to look for external resources loading and open the Network tab in Developer Tools (click the menu button at top-right, Tools > Developer Tools, Network tab).
4) Run your project and copy/paste the URL in the browser that comes up into this Chrome window, and hit enter.
When your page loads one of 2 things will happen:
A) You'll get the alert box you wanted or
B) You'll find out why it isn't loading because the Network tab will show the browser attempting to fetch teste.js and failing in some fashion, for example a 404, which would indicate you've got a typo in the path, or the script isn't where you thought it was, etc.
Put the following line at the very end of your document. There should not be anything after. Then try to load the page.
<script type="text/javascript" src="~/Script/Teste.js"></script>
Also, try pressing F12 once the page loads to see the source. Check if you script is there.
In MVC, the tilde is used to refer to the root URL of your application. However, it cannot normally parse this information. If you write:
<script src="~/Script/Teste.js"></script>
The lookup will fail, because the ~ means nothing special in HTML. If you're using Razor as your view engine (not ASPX), you need to wrap that call in Url.Content like so:
<script src="#Url.Content(~/Script/Teste.js)"></script>
Doing this will ensure a valid URL is provided to the browser.
With that in mind, you need to check that you have the file name and folder name both correct. You also need to ensure that the file is being deployed with your application. You can do this my opening the properties panel while the file is selected in the Solution Explorer and pressing F4.
So I created a simple slideshow with jquery and jquery ui. It works perfectly when I dragged the html into chrome, but when I uploaded the file to my server, the effect didn't work.
You can see the website on -guyzyl.org- (its the main page), or just the html file (which is the same as the one on the site -https://www.dropbox.com/s/0q3tnshbvmxu9ax/index.html-
any help is appreciated, and thanks in advance.
You are missing all these js .. (Seen in firebug in console error)
"NetworkError: 403 Forbidden - http://jqueryui.com/latest/ui/jquery.effects.core.js"
jquery...core.js
"NetworkError: 403 Forbidden - http://jqueryui.com/latest/ui/jquery.effects.slide.js"
jquery...lide.js
error: "NetworkError: 403 Forbidden - http://jqueryui.com/latest/ui/jquery.effects.slide.js"
Also . i would suggest you to read from google CDN ( this jquery ui contains all the effect files)
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js
While keeping a local copy of it, so that in case it is not able to get it from google cdn , it can look in local path .(as in your case and doesn't brake your website)
Nothing is wrong with the code itself: http://jsfiddle.net/ya8Yu/ is all of your code working.
you need to get your included files setup properly as Fidrizers suggested.
Also, in the future set up a jsfiddle so that we dont have to run around to gather all of your code and set up an environment to test.