jQuery plugin not loading -- script failing - asp.net

I've tried this with a couple of different plugins, so I'm sure it's not them. I also have one running on my personal machine and it works just fine.
I'm loading jQuery and then loading the plugin second. Then the next line of code is calling the plugin via:
$("a[rel]").colorbox(...)
or
$("a[rel]").overlay(...)
and I'm getting "object does not support property or method". It's not on the html object, I've narrowed it to the actual function call to jQuery plugin -- the $("a[rel]") selector is working fine alone. It's as if the plugin is never actually loading.
Have any of you ever seen this? I'm running on XP, so IIS6 (5?) Latest jQuery 1.3.2 though I tried 1.3.1 and 1.2.6.
Much appreciated!!!

I had the same problem yesterday, and it was because I had this line twice:
<script src="jqueryScripts/jquery-1.3.1.js" type="text/javascript"></script>
It was in an ASP project and I included another .asp page which also had the reference, so it took me 2 hours to figure out..
Maybe you have the same problem?

Do you try to enable JavaScript debugging in your browser, maybe you can catch some error, and that why browser doesn't loading plugin file. You can also try to load plugin dynamically using getScript method of jQuery and on complete event run your function.
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});

Related

Algolia - WordPress - Uncaught TypeError: wp.template is not a function

I am getting this error:
Uncaught TypeError: wp.template is not a function on template for Algolia. It is clearly associated with the widget that calls the hits:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
hitsPerPage: 30,
templates: {
item: wp.template('instantsearch-hit'),
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
From what I already know this needs wp-util.js script to work (this is supposed to be part of WordPress and this script can be found:
/wp-includes/js/wp-util.js
More about it here:
https://codex.wordpress.org/Javascript_Reference/wp.template
It seems the issue is that the template is not loading for some reason. I tried to enqueue the script via functions.php, but after doing so apart from getting previous error I get two new errors:
Uncaught ReferenceError: _ is not defined
at wp-util.js:17
at wp-util.js:124
Did anyone had such issue and managed to resolve it already?
Thank you for your help.
Are you using Cloudflare rocket loader by any chance?
There is a bug report for the same error that is apparently caused by Cloudflare rocket loader.
The solution mentioned in that bug report is:
I applied a small workaround to prevent the js error, which was
blocking other scripts in my website, adding:
if( wp.template == null ) return;
right after the firing of the script:
jQuery(function () {
In this way, my following scripts are fired correctly, but sometimes
(let's say 1 time every 4 page loads) the autocomplete search is not
fired.
Faced same issue in my wp's admin panel. And found that "BackUpWordpress" plugin was the problem. I just deactivate it and checked page again. Error was gone.
So the solution is just deactivate additional plugins one by one and check errored page every time. This is how you can have the idea which plugin is responsible for this jquery error.
I confirmed that to deactivate plugin will not erase saved data inside that plugins. So there is no issue to deactivate plugin. Once your work complete on the page where "Uncaught TypeError: wp.template is not a function" error occurred, you can activate plugins again.
In my case I had W3 Total Cache plugin installed, and Minify option was set to Manual.
After I removed wp-underscore script from manual minify list, issue with the wp.template() Not a function was gone.

How to submit contact form 7 without page refresh in wordpress?

Hi I'm pretty new to contact form 7. I've seen on Youtube tutorials, that contact form 7 submits without page refresh. But when I install the plugin it's working with a page refresh.
Please advise on how to enable it to work without page refresh. Thanks.
I found the fault, the issue was i haven't included the wp_head() and wp_footer() functions in my theme.
There's a page in contactform7 site on this:
https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
there they have mentioned the requirements for ajax to work.
Add wp_head() funtion in your header.php file and wp_footer() function in footer.php file.
That's it solved :)
My problem was solved by changing the jquery used. Check the version you are using.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
enter code here
</script>
I have recently experienced this problem. I have opening a form inside popup and submit would refresh it.
So, after some much hair pulling I happened to view source and there I noticed some part of footer code wasn't highlighted. Why? turns out it was my silly mistake. I forgot to close one iframe tag. Once I closed it. view source code was perfectly highlighted and the problem was resolved.
After verifying that one of the main reasons why the page refreshes when submitting the form are:
JavaScript file is not loaded:
If you are using themes downloaded from the store, usually the problem is with page optimizers like Lite Speed Cache.
Otherwise check that your themes are loading the Ajax file correctly.
This was my case, the Js files were loading in delay, I was using a Page Cache which was speeding up the web page but not loading the javascript files correctly.
Conflicts with other JavaScript
HTML structure is not valid

Meteor: Images and text do not load after moving to Iron:Router

My site works fine when the data is in a template, but once I try to route to it using iron:router, a background image and most remaining content no longer appear. (Some of the content still appears with working css, JS components so I know that those files are being read. Also, when inspecting the element, all the text, images are still visible in the code, but not the website.
This works fine (index.html):
<body>
{{>home}}
</body>
This adds another {{>home}} section, but the new section is having issues rendering as explained above (router.js):
Router.map(function() {
this.route('home', {path: '/'});
});
Are you on the latest iron:router? I had a similar problem, and inquired about it in this pull request:
https://github.com/iron-meteor/iron-router/issues/1051
Latest response indicates this should be fixed now!
You've followed the wrong tutorial :( There are plenty of tutorials and articles out there explaining to define routes like you did.
However, the Iron Router project page explains how to define routes differently.
For more information on routes, have a look at this article about Iron Router as well.
Fixed: problem was not with iron:router but rather that not all elements were loaded into the page yet. Document.ready() works fine when I directly called template.
Issue is that when iron:router loads the template, the new page elements are being loaded after the JS files were already called (JS that animates the images/text in).
Solution: use rendered instead of document ready:
Template.MyTemplate.rendered = function(){
}

Blank page in IE8 and 9

I've recently built and launched this page: http://www.thaiestatenetwork.com
It works great in Chrome, Safari, Firefox and even IE10, but in IE8 and 9 all I get is a blank page.
I've read through post here on SO about similar issues and based on that I've tried this:
going over my templates in an attempt to find DOM errors.
Tried setting position:static on html and body
commented out #font-face in my CSS (since I was getting an error in IE on BrowserStack related to #font-face)
Checked for potential CORS issues. Found none.
None of it works.
Strangely too, when I tunnel to my local dev machine through BrowserStack, everything works like a charm.
I should add that the site is built using router https://github.com/tmeasday/meteor-router and runs on Heroku using this build pack: https://github.com/oortcloud/heroku-buildpack-meteorite
I really hope someone out there has that fresh pair of eyes that will lead me on the right track.
I've solved it!
The issue turned out to be related to the way I was initializing Google Analytics (GA). I was doing this:
Template.menu.created = function() {
// GA initialization code here
};
I had to do this:
Template.menu.rendered = function() {
if ( typeof ga === 'undefined' ) {
// GA initialization code here
}
};
So basically I was attempting to initialise GA on first creation of my menu template, but instead I had to latch on to the rendered callback and add a conditional to make sure I only initialise GA once.
Overall I am not thrilled with my approach to initialising GA, but that is another matter entirely. It works.

Why is my javascript function not found by the page it is embedded in?

I have a page that has a simple javascript in the header portion of the page:
<script type="text/javascript">
function doLogout() {
var conf = confirm("Really log out?");
if (conf === true) { //changed == to === for boolean comparison
$.post("logout.aspx");
}
}
</script>
It uses jQuery to do an AJAX post to my logout page. The only issue right now is that when I click on the link (logout) to fire this function, nothing happens. I checked FireBug's console, and it told me that the function is not defined. This has happened to me before, but I think I botched a bunch of code to fix it sometimes.
Does anyone know the proper way to fix this issue?
Edit
After doing a lot of googling and trying different things, I found this very concise and informative post. Apparently, as the linked article states, the way the script is referenced in the web site is important as it won't run properly otherwise! Hopefully this information will be useful for more people.
This can also occur if there is a syntax error earlier in your javascript code. Often this will just be interpreted as the function not existing (nor any function AFTER the error). Check the code above this code (if there is any) and this code for syntax errors.
A way to tell if the cache error is it is to open Firebug and view the Script source. If the page was cached, you won't see your code. If it loaded but has syntax errors, the code will show, though it won't "find" it.
Things to test:
1) Can you call this function from something else? Like add a <script> at the bottom of the page to call it?
2) Does the page validate? Sometimes I get screwy javascript errors if there is some busted HTML like a missing </b>
3) I've been starting to wrap my javascript in <![CDATA[ ]]> just incase I've got goofy chars in my javascript.
4) I assume you've tested this in other browsers and have the same behavior, right?
5) If you haven't installed it already, install the Web Developer firefox addon. It has a nifty toolbar menu that will disable the cache for you so everything reloads.
6) As weird as it sounds, I once hit a javascript issue that was because of how my text editor was saving UTF-8 files. I forget the details, but it was adding some byte-order-mark or something that upset the browser.
I've had this occur when the page had been cached and so it didn't load the new script in. So to fix it clear all private data from Firefox. Not sure if that helps but it sure happened to me a bunch.
Other ideas for you to test:
is the function defined in the DOM tab in FireBug?
if you call doLogout() from the FireBug console, what happens?
I assume this is not the only script on that page. Make sure that some later script is not modifying doLogout to something else
I had the same issue and tried all that's been suggested here without success.
The only way I fixed it was by discovering that in the <script src="jquery.js"> tag I was using in the head of the page I forgot to close it with its </script> causing the page to ignore all Javascript functions. So please check that your includes look like:
<script src="jquery.js"></script>
I hope that helps. Ross.
If you are using DevExpress controls these links may help you: How to register and execute a JavaScript downloaded to the client via a callback and How to register and execute a JavaScript downloaded to the client via a callback (standalone JS file) and Executing javascripts from user controls dynamically created through ASPxCallback panels
The issue might occur if you have NoScript. You should check and make sure it's not blocking said script.
I had this issue and discovered the problem was just a wrong case letter inside the name.
Call: filterCheckbox()
vs
function filterCheckBox() {}
problem: lowercase "box" vs uppercase "Box".
So check if the name is exactly the same.

Resources