I'm trying to implement jQuery tabs to replace AJAX tab container. I've followed the code from the jquery website but my tabs aren't showing up. It just loads the entire page full of data with no tabs. And firebug tells me the following error:
$("#tabs").tabs is not a function
$("#tabs").tabs();
I've got references to all the files needed:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
And I've got the function specified as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
The code for the tabs are as follows:
div id="tabs">
<ul>
<li><span>Patient Information</span></li>
<li><span>Medical History 1 of 3</span></li>
<li><span>Medical History 2 of 3</span></li>
<li><span>Medical History 3 of 3</span></li>
<li><span>Scheduler</span></li>
<li><span>Care Plan</span></li>
</ul>
<div id="tab-1">
</div>
**Repeats for all tabs through tab-6**
</div>
Can anyone tell me what I'm doing wrong? Since the .tabs() function isn't working the page is just loading like so -
Your code works just fine. The only thing you're missing is the CSS for the tabs - http://jsfiddle.net/8JX4A/
If you have another jQuery element in the same page maybe you have conflicts. I have the same problem, try with this:
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$("#tabs").tabs();
});
Then only change i:; jQuery.noConflict(); before each jQuery element.
You need to link the CSS file:
http://jsfiddle.net/fJaBa/
Try loading scripts in this sequence
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
$.fn.tabs = function() {
var selector = this;
this.each(function() {
var obj = $(this);
$(obj.attr('href')).hide();
$(obj).click(function() {
$(selector).removeClass('active');
$(selector).each(function(i, element) {
$($(element).attr('href')).hide();
});
$(this).addClass('active');
$($(this).attr('href')).fadeIn();
return false;
});
});
$(this).show();
$(this).first().click();
};
Live Demo Here
Not a jquery expert but I do know you will need some css to make the tabs work correctly. since they will need to be positioned relative. Also check out this jquery tabs tutorial to compare your code.
Is the 1.8 alias to the jQuery UI lib working? Have you tried using a specific full version, like 1.8.16 instead? Can you look at the page once it's loaded and see if jQuery and/or jQuery UI were actually pulled in successfully?
Related
I have to dynamically include some navigation bars, format and misc css classes via jQuery.
For each webpage I have the following code :-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').load('navigationtheory.html');
});
$(document).ready(function(){
$('#footer').load('../../include/footer.html');
});
$(function(){ $("head").load("../../include/header.html") });
</script>
This is inside the <head> dom element.
I have to isolate the second script contents into a separate file. I did so by including the exact code in a file called jqueryincludes.js and then call it in this fashion
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script>
<script src="jqueryincludes.js"> </script>
My contents of jquery includes is :-
$(document).ready(function(){
$('#navigation').load('navigationtheory.html');
});
$(document).ready(function(){
$('#footer').load('../../include/footer.html');
});
$(function(){ $("head").load("../../include/header.html") });
The page does not render correctly.
So in theory this should work. I am pretty certain its a syntax error, I could not find anything in jQuery documentation for external definitions.
I am new to Javascript and JQuery.
I am trying to implement color picker provided here http://automattic.github.io/Iris/
Here is my libraries that i am including.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
and this is how i am implementing this code
$(document).ready(function() {
jQuery('#color-picker').iris();
});
this is how i have my input field
<input type="text" id='color-picker' value="#bada55" />
but i don't why i get this error
TypeError: jQuery(...).iris is not a function
jQuery('#color-picker').iris();
Seem like the path to your iris script is wrong which caused the browser cannot load the file. So you can check again to see if the path js/iris.min.js is correct.
You can check to see whether your file is loaded or not by going to network tab of either Firebug or Chrome developer tools. If it cannot load the URL which you've provided than you'll receive a 404 error not found in this tab.
Or you can also try to replace:
<script src="js/iris.min.js"></script>
with direct link from Github:
<script src="https://github.com/Automattic/Iris/blob/master/dist/iris.min.js"></script>
The last note is that you just need to include jQuery once, you can choose either version 1.10.2 or 1.8.3 which you know that version will compatible with your jQuery code.
I think this should be something wrong with the iris script here, try to use this version directly from their home page:
<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
Fiddle Demo
Is your code placed in a way that would let it run before jQuery, jQueryUI and Iris is loaded? Make sure you place your own script file after the rest.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
<script>
$(document).ready(function() {
jQuery('#color-picker').iris();
});
</script>
You need to have link to jQuery and jQuery UI instead of adding jQuery twice.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
Then call iris on page load and it will work. Here is a link to working fiddle http://jsfiddle.net/WLru3/
PS: I have directly copy pasted code of iris in js code block, please use library link in your code instead.
Remove a line that includes jQuery 1.8.3 library
Make sure the path to iris.min.js is correct
I am trying to use jquery UI tab in mvc4 application. All the necessary scripts and styles added in bundleconfig and referred in layout.cshtml page.
please refer below code.
<div id="tabs">
<ul>
<li>Table</li>
<li>Heat</li>
</ul>
<div id="tabs-1">
content fo tab1
</div>
<div id="tabs-2">
Content for Tab2
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
required scripts already referred in layout.cshtml. but still tab not working properly. then i tried to add it in locally in same .cshtml page.
<link rel="stylesheet" href="#Url.Content("~/Content/jquery-ui-1.9.0.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.9.0.min.js")" type="text/javascript"></script>
then it works fine but it loaded jquery and UI scripts two times
I don't know what the exact problem is.
Hey try as follow and remove the added jquery lib files from .cshtml page.
$(document).ready(function(){
$("#tabs").tabs();
});
I think you should add render section for scripts to the end of body tag in layout.cshtml
#RenderSection("scripts", required: false)
And type script code in Scripts section on view
#section Scripts {
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
}
PS: links for jquery and jquery.ui must be before RenderSection in layout.cshtml
I have read that I have to put back in the event handler for it to work in dreamweaver from JS Fiddle, I have put it back in and I it still wont work? Here is the Demo: http://jsfiddle.net/EfLJJ/6/
Here is my JS Code:
$(document).ready(function() {
$(".list .fs1").bind({
mouseenter:function(){
$(".sublist").show();
},
mouseleave: function(){
$(".sublist").hide();
}
});
});
Add the jQuery library to your script.
Put this code inside the <head> tags of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your html code inside head put this line of code in order to include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Otherwise will not be able to use it.
In jsfiddle this works in a different way.
Also, if you're using jQuery version 1.7 and above, I'd recommend you switch from using ".bind()" to ".on()" for as ".on()" is the preferred method according to the jquery website. Check out the difference between ".bind()", ".on()" and ".live()" for more info here, What's the difference between `on` and `live` or `bind`?
Problem solved! To get it running in Dreamweaver you have to use the Javascript Script Tags
Javascript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Your Code Here */
</script>
There is a conflict between using ColorBox iFrame with the Bootstrap, from Twitter ..
I am trying to use the following coee to resolve the conflict ,, but the same problem :
including the required libs:
<script src="../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../js/colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
color box js:
jQuery(document).ready(function ($) {
// colorbox code here
});
and bootstrap js:
$(document).ready(function () {
// bootstrap twitter code here
});
Both functions do the same as long as jQuery === $ in the current scope (which is usually the case).
The first version is better though as it also works if noConflict was used.
jQuery(document).ready(function($) {
// both colorbox and bootstrap code here
});