Javascript not loading wordpress footer - javascript

I recently started learning Javascript. I am trying to add a small script to the footer of a page on my Wordpress site. I am using the "insert headers and footers" plugin. However, the script does not seem to load. I do not believe it is a syntax issue, since a similar script works on a different site. However, I cannot figure out what is different here. When looking at the inserted script in chrome inspector, inside of the script seems to be just plain text (not colored javascript code). Is there something I can do to fix this and make the script run?
Link to the page: http://memories.uvaphotography.com/home/services/
Javascript code I am trying to insert:
<script>
$("#reply-title").hide();
</script>

jQuery in WordPress runs in noConflict mode which means the global $ shortcut for jQuery isn't available. Replace your code with the following:
<script>
jQuery(document).ready(function($) {
$("#reply-title").hide();
});
</script>
Inside the document ready wrapper the $ can be used as an alias for jQuery.

The reason that you're not seeing your script execute is because jQuery isn't assigned to the $ variable.
When viewing the element inspector console on your page there's a javascript error
Uncaught TypeError: undefined is not a function
When I run the same script via console replacing $ with jQuery the #reply-title is hidden successfully.

Related

Running external Javascript in HTML

new to this stuff, please bear with me.
I have an external js file, declared in my HTML etc. JS code is fine and works in Fiddle - https://jsfiddle.net/0hu4fs4y/
<script src="js/noti.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/scripts.js"></script>
However, it doesn't work. Am I running an old JQuery Library?
Is it something stupid/obvious I'm missing?
Two things:
I'm guessing noti.js relies on jQuery. If so, it should be after the script tag that includes jQuery (probably down with your scripts.js).
Make sure these script tags are at the end of the HTML, just before the closing </body> element, so that the elements they act on exist when the scripts run.
Your code works in the fiddle because you've pasted the code directly in and used jsFiddle's (mind-numbingly surprising) default that waits to run your code until the window load event runs, which is very, very late in the page load process. If you're a beginner, you've probably seen the anti-pattern of putting script tags in head and done that in your stuff, meaning that your elements don't exist when your code runs, because the parser hasn't seen them yet.
the console error at jsfiddle is:
ReferenceError: $ is not defined
which could be becasue your noti.js is using jquery
put jquery script on top of all other script

Wordpress jQuery is not found when using specific theme

I have created a shortcode via a plugin which adds a bunch of javascript and html out to a page via the PHP for the plugin.
This works just great on the twentyfourteen theme - and my plugin works as expected.
When I try installing my plugin and using my shortcode in a OptimizePress theme it does not work.
When I attempt it there is a console error stating :
Uncaught ReferenceError: jQuery is not defined
This is on this line:
jQuery(document).ready(function() { --this line
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
This is part of the javascript I add to the page as part of the shortcode.
Interestingly when I look at the source for the page there is certainly jQuery loaded. However, for some reason when I use this shortcode in this theme it has positioned my javascript I echo out as part of the plugin into the as seen in my picture below (my code is inside the highlighted script tag)- whereas the jQuery doesnt load until the end of the page - which is probably why we hit this error with jQuery not being defined.
When the shortcode is used in the twentyfourteen theme my javascript output as part of the plugin is contained inline within the body as seen in this pic (the script tag) of the page - meaning it can find jQuery as it will have loaded:
Can anybody suggest why this is happening and how I can make my javascript sit inline rather than in the of my document when using shortcodes in OptimizePress to help resolve this error or any other solutions to resolving this problem.
The answer was to use add_script within my plugin php and add the script to the wp_footer! Many thanks to alex alex for the support. I had to use global keywords within my php plugin to access variables defined outside of the scope of the newly created php function for the add_script call.

Uncaught TypeError: Property '$' of object - jQuery

I'm using wordpress and trying to include various JavaScript files in my theme's templates. The file which causes the error is the very last js file which is included but I still get this error. Could I get some help?
$(document).ready(function() {
$("#image-cycle").cycle();
});
the error is thrown at the very first line - but the script is loaded well after jQuery.
Wordpress uses jQuery's noconflict mode by default. This means you always have to wrap your code in a DOM ready handler that will map jQuery to the dollarsign, otherwise the dollarsign will be undefined, like this :
jQuery(document).ready(function($) {
$("#image-cycle").cycle();
});
The codex
You probably forgot to include Jquery.
Check if u have put put the script tags properly and closed them.
You might have put the src of jquery but the tags might be wrong.

3rd Party Script Breaking my JS

I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)
Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!
The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.

ASP.net: ClientScript.RegisterClientScriptBlock fires before jQuery is loaded

Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.

Categories