jQuery UI tabs doesn´t work - javascript

on the page: http://www.turtle-esport.de is the jQuery UI feature "tabs". I use it to switch between 2 "twitch stream channels". I moved that page to another Webspace but now i get this error message in the console:
Uncaught TypeError: $(...).tabs is not a function
The console show me that jQuery is loaded. Can anyone help me?

Mistakes
Your jQuery file is included after the function call.
Could not find jQuery UI included in the page.
So move the code block after the jQuery file. Then download and use the jQuery UI Plugin.

Related

How to call jqueryui autocomplete in masterpage for control defined in content page

I am trying to fire the autocomplete jQueryUi widget on a textbox defined in an aspx content page.
My reference to the jQuery-ui.js file is in the head section of the masterpage.
The autocomplete call is made in a script block in the masterpage at the bottom of the page.
I understand the id of the control defined in the content page is different to the id generated in the output page and so the reference I've made to the control (in the script section of the masterpage) is the correct id as it displays in the output page (ctl00_Content_txtEmailAddress_txtText).
I am getting the following exception when the page loads. Any help, much appreciated.
Uncaught TypeError: $(...).autocomplete is not a function
at HTMLDocument.<anonymous> (PasswordReset.aspx?r=P1.WEBGUEST&f=P1.EPR.USERPASS.VIW:376)
at fire (jquery.js:974)
at Object.fireWith [as resolveWith] (jquery.js:1084)
at Function.ready (jquery.js:406)
at HTMLDocument.DOMContentLoaded (jquery.js:83)
I've included snippets of the content and masterpage below
Content page:
<p1:CustomisableTextBox ID="txtEmailAddress" runat="server" SkinID="Block"
Mandatory="true" MandatoryValidation="true" CanDisable="false"
CanChangeMandatory="false" />
Masterpage:
<script type="text/javascript">
$(document).ready(function () {
$("#ctl00_Content_txtEmailAddress_txtText").autocomplete({
source: 'AutocompleteHandler.ashx'
});
});
</script>
I've thought a lot about this query I've had and it occurred to me that if autocomplete is not defined, then there must be an issue with the js file that provides the widget.
I've put it down to a couple of things.
The file is not being loaded
There is an issue/confict between the jquery-ui file and the jquery file
There is an issue with the sequence in which the jquery file(s) are loaded into the browser
The code block that calls the autocomplete function is incorrectly placed in the masterpage.
Funnily enough, I tried several permutations of each of the above and finally got the file to load without error.
Only problem is the autocomplete doesn't fire !!!
I'll post again when I resolve this issue entirely and hope this helps someone the grief and wasted time it has given me.

Object [object Object] has no method - jQuery error

I am trying to get flexslider up and running but I am getting the following error.
Uncaught TypeError: Object [object Object] has no method 'flexslider' maximizesocialmedia.wordpresslochness.com/:234
It looks like the most common problem with that error is jQuery is loaded twice. I have been looking and can't find where it would be loaded twice on my site. When I view the source I can't find it loaded twice and I am not seeing anything in the chrome web inspector. Could there be a different reason as to why it's not working? Here is the site
If I need to update this post with any code please let me know.
You're not loading the flexslider plugin in your page, try adding it in a script tag, after jQuery.
It's probably named jquery.flexslider.min.js.
that console error could mean that the jquery/js for the flexslider haven't loaded so the flexslider give an error that the flexslider object for the settings is not defined as an object
i guess...
Seems like the jQuery flexslider is not loaded. I just looked at your site and I couldn't find the javascript file related to flexslider.
Include the flexslider javascript in you page and it should work.
I also noticed that the site used slidesjs

unable to get .datepicker() function to initiate on dynamically loaded page

I'm still quite new to JS and am having some issues with getting JS to run on a dynamically loaded page.
After loading the "Apply Online" page dynamically through the .load method I am unable to then get a jquery date picker to attach to the "appDataOfBirth" input field. After reading through a couple similar posts I've tried things such as .live however even though this works for say an alert, it won't initialize the date picker.
I've been playing around with something link below, where "applyOnlineBtn" is the carasel link to open up the application section displaying the form - however this does not seem to work.
$('#applyOnlineBtn').live("click", function(){
alert('test message');
$("#appDateOfBirth").datepicker();
});
If any one could help me to get this working it would be greatly appreciated.
Resources:
Website URL: http://www.kingsroad.net.au/qutproject/index.php
the JS that loads the content into the mid div is located at kingsroad.net.au/qutproject/js/general.js (this is where I've attempted to use my code to activate the date picker).
the online application content is located at kingsroad.net.au/qutproject/content/applyOnline.php
You May use
$('your_element').load(URL_TO_LOAD,function(){
$("#appDateOfBirth").datepicker();
});
this will apply datepicker to the new loaded content.
Did you check javascript error console?:
Uncaught TypeError: Object [object Object] has no method 'datepicker
So, check your datepicker library, maybe you've not include datepicker library in your page.

jQuery UI Not being loaded properly? Dialog method not found

I'm having an issue with my jQuery UI dialog on this page (and this page only):
http://www.satelliteinternet.com/
I'm not sure what the issue is as it's working on all the other pages on the site. The error I'm getting is the $("#DealerSearch") object has no dialog method. Very odd indeed.
Has anyone else experienced this issue?
They only difference i see here is that jquery is loaded twice on your homepage and once on the other pages. Try removing the one loaded from google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

jQuery tabs is loaded but not working in WordPress

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.

Categories

Resources