I am suddenly getting a most unwelcome error on this page:
Error: $("#accordion").accordion is not a function
My jQuery code is as follows:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h4", autoHeight: false, collapsible: true });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
// controls the sidebar navigation action
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
$(window).ready(function() {
$('li.products ul').show();
$('li.technical ul').show();
$('li.tips ul').show();
});
});
</script>
I has worked for weeks and today...errors all the way.
I would appreciate any help in determining the cause of the error.
Thanks.
Found the problem:
This:
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
does not link to anything anymore.
The requested URL
/svn/tags/latest/ui/ui.accordion.js
was not found on this server.
Related
I am using knockout to render a page with rows of data. On each row there is a link which should call a controller function which returns a partial view.
knockout script for link is (inside foreach loop)...
<a class="lnkEdit" data-bind="attr: {'href': '#Url.Action("ControllerActionName", new RouteValueDictionary() { { "Controller", "ControllerName" } })/'+ id}">Details</a>
Script section...
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#dialog-edit").dialog({
title: 'Details',
autoOpen: false,
resizable: false,
position: ['center', 50],
width: 700,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$(".lnkEdit").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
$("#btncancel").on("click", function (e) {
$("#dialog-edit").dialog("close");
return false;
});
ko.applyBindings(new UnitViewModel());
})
My page has div as place holder for dialog...
<div id="dialog-edit" style="display: none">
Problem: When I click on link for details; the controller returns partial view but jquery is not able to generate dialog so the page opens as normal view. What is wrong with this?
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I'll Check Your code and is working...
just add CSS and JS proper.
Hi I have a small app that uses JQM and Sammy. I am using Sammy to load pages dynamically and appending to the body of my index.html. the problem is i dont see the JQM themes are getting applied and there are no errors in console as well.
Are there any reason for this. I do call the following
context.render('view/abc.template')
.appendTo(context.$element(),function(){
$(document).ready(function () {
$("#container").trigger('pagecreate');
});
});
Thanks
This is how I did it;
1) firstly I disabled my JQM routing like so in a file called plugins.js;
$(document).bind("mobileinit", function() {
/**
* check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ for more details
*/
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
This code was loaded before I loaded JQM, like so;
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
Then my main.js function looks like this;
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.get('#/', function(context) {
context.load('/templates/index.template', function() {
$("#container").trigger('pagecreate');
}).appendTo(context.$element());
});
this.get('#/landing', function(context) {
context.load('/templates/landing.template', function() {
$("#container").trigger('pagecreate');
}).replace(context.$element());
});
});
$(function() {
app.run('#/');
});
})(jQuery);
I think you are not far off on your code snippet above. NB you have your $(document).ready function as a callback to appendTo, which does not take a callback. You will see mine is in load() which does
I have such an issue, I am using few script like jquery carousel slider, jquery drop down menu but when I am trying to add jqueryui dialog all others scripts do not work. Here is my code:
Before I add JqueryUi dialog:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>
<script>
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
$('.boxgrid2.caption').hover(function(){
$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});
});
$('.boxgrid3.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
});
</script>
<script>
jQuery(document).ready(function($) {
jQuery('#mega-menu-1').dcMegaMenu();
});
</script>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
});
-->
</script>
Code with JqueryUi dialog:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>
<!--Dialog start-->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"
});
$( ".log-in" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<!--Dialog end-->
<script>
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
$('.boxgrid2.caption').hover(function(){
$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});
});
$('.boxgrid3.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
});
</script>
<script>
jQuery(document).ready(function($) {
jQuery('#mega-menu-1').dcMegaMenu();
});
</script>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
});
-->
</script>
One more very strange thing for me is that when I add JqueryUi dialog script after all script (to the end of this code) it doesn't work at all.
Any ideas why?
I have used noConflict();
add to script $jQ = jQuery.noConflict(); then change all $ -> $jQ
<script>
$jQ = jQuery.noConflict();
$jQ .fx.speeds._default = 1000;
$jQ (function() {
$jQ ( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"
});
$jQ ( ".log-in" ).click(function() {
$jQ ( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...
In my web page, here is the head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />
and the body:
<div id="dialog_test" title="Test">
TEST
</div>
GO
<script>
$(function() {
$( "#dialog_test" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Ajax": function() {
$.ajax({
"url" : "http://jquery.malsup.com/block/wait.php",
"success" : function(json) {
$( "#dialog_test" ).dialog( "close" );
}
});
}
}
});
$( "#go" ).click(function(event) {
event.preventDefault();
$( "#dialog_test" ).dialog( "open" );
});
});
$(document)
.ajaxStart(function() {
$.blockUI({
theme: true
})
})
.ajaxStop($.unblockUI);
</script>
Any idea?
You don't specify what you have tried with z-index.
The blockUI plugin has an option to change the z-index of the message it creates (documentation):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO
Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.
I've found two possible ways around this:
'destroy' the dialog when it is closed and recreate it when
it is opened.
rather than blocking the whole UI, just block the
dialog. This can be done using the widget method, like this:
$( ".selector" ).dialog( "widget" ).block({
theme: false,
message: '<h1>Wait for me please...</h1>',
css: { border: '3px solid #a00' }
});
If you build a simple dragger:
$(document).ready(function(){
$('#tomove').draggable({
axis: 'x',
drag: function(event, ui) {
mouseUp();
}
});
});
And you try to stop it programmatically:
function mouseUp() {
if($('#tomove').offset().left > 400) {
$('#tomove').trigger('mouseup');
}
}
You will get this message in error console:
this.helper is null
Is there any way to fix this?
Thanks for your help.
It looks like you're just trying to constrain movement on the draggable element, is this correct? Have you seen this page: http://jqueryui.com/demos/draggable/#constrain-movement
EDIT
How about this instead then: (sample page, does what you're asking - be mindful of the jquery inclusion location)
Also notice I changed the name of the method to be something a little more apropos. This will not stop the user from being able to drag back to the left. I didn't think you wanted to actually stop them if they hit 400 (or whatever other wall).
If you want to do that, you merely $('#element').draggable('destroy')
<html>
<head>
<title>Draggable jQuery-UI Width Block</title>
<script src="jquery-1.4.2.min.js" ></script>
<script src="jquery-ui-1.8.1.custom.min.js" ></script>
</head>
<body>
<div id="tomove" style="width:100px;height:20px;background:silver;">
<span>some text</span>
</div>
<script>
$(document).ready( function() {
$('#tomove').draggable({
axis: 'x',
drag: function(event, ui) {
dragBlock( ui );
}
});
});
function dragBlock( ui ) {
if( ui.position.left > 400 ) {
ui.position.left = '400px';
}
if( ui.position.left < 0 ) {
ui.position.left = '0px';
}
}
</script>
</body>
</html>