Jquery ui.accordion error - jquery-ui

I have a featured content slider on my homepage here: etiquetteplus.net
That slider loads fine in old versions of IE and FF. But new versions and with chrome it doesnt.
I get theses errors, but I am not sure what they mean.
ui.core.js:179Uncaught TypeError: Cannot read property ':' of undefined
Uncaught TypeError: Cannot read property ':' of undefined
Uncaught TypeError: Object function (E,F){return new o.fn.init(E,F)} has no method 'widget'
I have tried newer versions of jquery but that didnt help either. Any suggestions? Thanks!

there seems to be allot going on here but the most important thing I see off hand is on line 41 of your source code you include jquery and colorbox like so
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.etiquetteplus.net/wp-content/themes/etiquette/js/jquery.colorbox.js"></script>
then on line 86 you load a really really really old versions of jquery
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-content/plugins/wp-faq/js/wp-faq.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-content/plugins/wp-faq/js/jquery/ui.core.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://www.etiquetteplus.net/wp-content/plugins/wp-faq/js/jquery/ui.accordion.js?ver=2.9.2'></script>
i also see this error
Error: Error calling method on NPObject!
Source File: http://www.etiquetteplus.net/wp-content/themes/etiquette/js/sifr.js
Line: 17
in ff error console
then on your html is not valid
on line 210 you have a closing
</a>
tag with no open you spans a span without close etc...
you need to make sure you are using only one version of jquery and you need to validate your html
i use web devloper addon in firefox to help trouble shoot there are all kinds of cool things to help you get a good working site in order. ff only has a built in error console that will help as well
I am sure that there are more problems that what I have shown here. but if you do diligence and comb your code and html with a fine tooth comb you will get it working correctly. If you get stuck post another question (not duplicate of course) and someone will help.
good luck
mcgrailm

Related

Webpacker load error (Uncaught TypeError: $(...).metisMenu is not a function)

Trying to get a (what should be) simple module to work: metisMenu
However, unfortunately I'm failing in doing so, apparently something in my Webpacker setup because when loading my page I get the error: Uncaught TypeError: $(...).metisMenu is not a function
There is an issue in loading the module in application.js. The module is being loaded in vendor/assets/javascripts/app.js
I have jQuery correctly installed
the following snippet into the head section makes it work (but this is without the use of Webpaker):
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/metismenu"></script>
.
I've created a github branch. Please help! https://github.com/henkjanwils/metisMenu-error

jsPDF "Object expected" Exception in IE when trying to save the PDF

When trying to save the PDF file, the following stack trace occurs and the file is not downloaded:
TypeError: Object expected
at API.save (http://localhost:8080/applications/lib/jspdf/jspdf.debug.js:3648:11)
at Anonymous function (http://localhost:8080/applications/js/<my_custom_js_file>.js:288:12)
at Anonymous function (http://localhost:8080/applications/lib/angular-1.5.8/angular.min.js:158:482)
at e (http://localhost:8080/applications/lib/angular-1.5.8/angular.min.js:45:442)
at Anonymous function (http://localhost:8080/applications/lib/angular-1.5.8/angular.min.js:48:300)
Also tried with a simple example and had the same results:
var doc = new jsPDF();
doc.text("hello", 20, 20);
doc.save("table.pdf");
IE does not support native Promise. Therefore, the initialization script fails at line 12016 of Version 1.5.3:
SCRIPT5009: 'Promise' is undefined
jspdf.debug.js (12016,5)
Afterwards, the script is no longer initializing the required context.
A fix should be a 3rd party promise library - I have solved it by including the following resources before including jspdf.debug.js:
<script type="text/javascript" src="/applications/lib/ie-promise/es6-promise.js"></script>
<script type="text/javascript" src="/applications/lib/ie-promise/es6-promise#4/dist/es6-promise.auto.js"></script>

Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

I've included two below scripts in my header and I get the error "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js key=************"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
When I remove either script, I get additional js errors. How can I properly refactor these two scripts in my rails app?
In your example above, you're including the same script twice, but with different parameters. You should be able to solve your issue by including the script once, with all the required parameters like this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&sensor=false"></script>
If you're calling google maps via an ajax call, you can use window.google = {} upon exiting the state in which the map was called.
I know that in my case it's not a Rails app but might help to someone else ... I'm working with React and I was getting the same error when I was switching between views/pages.
And like wLc said window.google = {} worked like a charm and was deleting the error in the console but the <script> tag was remaining in the html and was added every time I was revisiting the page that has the map.
On componentWillUnmount I've added some code to remove the tag.
const allScripts = document.getElementsByTagName( 'script' );
[].filter.call(
allScripts,
( scpt ) => scpt.src.indexOf( 'key=googleAPIKEY' ) >= 0
)[ 0 ].remove();
window.google = {};

Can the document.location.protocol value be changed in a WinRT webview?

I'm currently having an issue with the WebView control used in a Universal WinRT app (Windows 8.1/Windows Phone 8.1).
I currently load the following piece of JavaScript into the WebView using the NatigateToString method:
<html>
<head>
<base href='MY_BASE_URL'>
</head>
<body>
<script>
var idcomments_acct = 'MY_ACC_ID';
var idcomments_post_id='POST_ID';
var idcomments_post_url='POST_URL';
</script>
<span id='IDCommentsPostTitle' style='display:none'></span>
<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
</body>
</html>
This is the piece of code for the IntenseDebate generic install that can be found here.
The issue is with this line of code in the referenced IntenseDebate code:
load_js(document.location.protocol+"//connect.facebook.net/en_US/all.js")
This piece of code fails because document.location.protocol is set to about: in the WebView, leading to a 404 error on this call.
On the Android/iOS webviews simply setting the base URI to a http: or https: based address using their loadDataWithBaseUrl methods worked fine, but the WinRT WebView is missing a similar method. And setting the Base url in the HTML itself (like shown in the piece of code above) does work for resolving image url's and sortlike, but this method doens't change the document.location values.
Since I can't modify the referenced JS file and putting the above piece of HTML on a server isn't an option in this apps usecase, is there any way you can force the document.location.protocol to be a certain value in the WinRT webview? Or is there any other way to get this bit of HTML to work in a webview?
There isn't a direct way to do this. WebView doesn't provide any interface to override the document.location . If branching off of the protocol is a common pattern then this may be a good feature to request on http://wpdev.uservoice.com .
I'm not familiar enough with HTML/JavaScript best practices to say for sure, but most of the references I find searching for document.location.protocol warn against assuming that the protocol will always be http: or https. This may be something that IntenseDebate should fix.
That said, you may be able to get past this by injecting code into your page which finds the problem location in the DOM and changing it live. You can't change just the protocol, but you may be able to find where it is referenced and change that there. I assume it gets loaded into the commentScript.src from genericCommentWrapper2.php referenced in genericCommentWrapper2.cs and then added to the document's head.

How to use Ruby on Rails 3.2 with 'yui 3.5'?

I'm writing write my first RoR application with YUI framework. I tried googling for ror+yui manuals with no success. So I went to YUI site. YUI says:
// Put the YUI seed file on your page.
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Where it's supposed to be putted in RoR app?
I've tried to app/assert/javascripts/yui-min.js.
As a result i got <html class="yui3-js-enabled"> in every page. Supposing YUI is working now i've tried to copy-paste "Work with the DOM" example from YUI's page to app/public/index.html.
The error I received was:
Uncaught ReferenceError: YUI is not defined.
I tried the info in this link and it was not helpful to me:
https://stackoverflow.com/questions/1452829/tutorial-suggestions-on-yui-with-ruby-on-rails
Your first step in any rails app is to delete app/public/index.html ... then work in your pages inside of rails.
So that means create an app/views/layouts/application.html, and that's where you add your
<html>
<head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Based on the link, you might not have it in your <head> and it needs to be.
UPDATE: (sample javascript code to change h1)
<script>
YUI().use('node', function (Y) {
var headerElement = Y.one('h1');
headerElement.setHTML("I have been updated");
});
</script>

Resources