I'm trying to put the jQuery Booklet plugin on a site that uses the 1.3.2 library - I can't remove this reference or upgrade. I have successfully used noConflict in the past with other plugins that require a newer version of jQuery on this site.
When I test locally and include the 1.3.2 reference, Firebug console tells me:
but the book still loads correctly and functions. Not sure what that error means. When I put the code onto my development site, the images in the book appear one stacked on top of the other, navigation buttons are missing, and I see an error in the Firebug console that says
TypeError: p2.offset(...) is undefined
[Break On This Error]
p2.offset().left + pWidth - hoverFullWidth,
In IE it tells me:
SCRIPT5007: Unable to get property 'left' of undefined or null reference
jquery.booklet.latest.js, line 1205 character 2
This is the code in question, part of jquery.booklet.latest.js
p3.draggable({
axis: "x",
containment: [
target.offset().left,
0,
p2.offset().left + pWidth - hoverFullWidth,
pHeight
],
Something isn't loading correctly. The scripts look like this in my page in my development environment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.booklet.latest.js" type="text/javascript"></script>
<link href="/opencms/opencms/CVWEB/css/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<script type="text/javascript">
var $j = jQuery.noConflict(true);
$j(document).ready(function(){
$j(function () {
$j("#mybook").booklet();
});
});
</script>
Is there something extra I need to do with noConflict since there are so many other scripts? Do I need to modify the jquery.booklet.latest.js file to include noConflict somehow? I tried declaring the variable and replacing $ like above but that didn't do anything.
I looked here and here to try to solve the easing error, but I am already including all the correct scripts.
I tried the solution here of using jQuery instead of $ with no luck.
I'm still pretty green when it comes to jQuery so any help is appreciated. Thank you.
I am about to move on to a different option but wanted to post here so I can learn what the problem is.
It must be your incomplete src location.
It should be something like this, as if running from localhost:
<script src="http://localhost/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
Related
It's been a nightmare to me before I came to know that in order to get jquery ui working in ASP.NET MVC I need to add #Scripts.Render("~/bundles/jqueryui"). Before doing so I kept getting Uncaught error: Undefined is not a function. What I did not understand was why on earth this would happen when I could see the jquery ui file in the sources when inspecting the html source. This is the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.plugins.js"></script>
<script src="~/Scripts/Helpers.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")//Added later to get it working
#RenderSection("scripts", required: false)
</body>
</html>
In my Helper.js file I have some helper functions that I usually use. One of them is applyDatetimePickerAndFormat that is called on $(document).ready(). Inside that function I have the following code:
$('.txt-date').datepicker({
showAnim: "drop",
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy"
});
If I omit #Scripts.Render("~/bundles/jqueryui") in the _Layout.cshtml I will get the aforementioned error. This code works perfectly with any plain html or web form. So it seems that somehow the document can't see the contents of the jquery-ui file. To make my question concrete:
When I look at the Sources of the the web page I can see jquery-ui-1.8.24.js and it's referenced in the html source. Then why can't the code find jquery-ui functions?
If every java script file has to be specified in the #Scripts.Render then why isn't there any problem with my Helper.js file?
And finally where does this ~/bundles/jqueryui path refer to?
jquery-ui depends on jquery (i.e. it must be defined after jquery) but you have duplicated your files. In the head you have included <script src="~/Scripts/jquery-1.8.2.js"></script> followed by jquery-ui. You then reload jquery at the end of the file using #Scripts.Render("~/bundles/jquery") (Its now after jquery-ui).
Delete the script in the head and it should work. I addition, I recommend you delete jquery.validate and jquery.validate.unobtrusive from the head and use #Scripts.Render("~/bundles/jqueryval") at the end of the file (before #RenderSection..). You can examine these bundles in App_Start\BundleConfig.cs file. There are numerous advantages to using bundles (see Bundling and Minification).
If you are using all these files in every page based on _Layout, you can define your own bundle to includes all files.
You need to define the strategy for your js. I recomend you ot organize your js first and after that separate it to smaller parts. One should be common for all the pages(jQuery in your case) and other scripts for validation should be included only on pages that have some editing fileds etc.
Use DRY principle and read some information about how js works. It helps me a lot some time ago and won't take a lot of time.
I referred this and using touch-punch. But, its throwing me the following error:
Object [object Object] has no method 'draggable' for the line :
<script>
$('#slider-range-min').draggable();</script> or <script>$('#widget').draggable();
</script>
How to resolve this issue?
The most probable error must be the order in which you referred external resources. Make sure the order is jquery, jquery UI, then jQuery Touch Punch.
<script src="js/jquery.1.9.min.js"></script>
<script src="js/jquery-ui-1.9.2.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
I have few questions on partials and overriding templates.
For that i used the following folder structure.
projectRoot
dust-core-0.6.0.min.js
jquery.js
test.html
partial.tl
main_without_override.tl
The content of partial.tl:
{+greeting} Hola {/greeting}
{+world} World {/world}
The content of main_without_override.tl:
{>partial/}
The content of test.html:
<!DOCTYPE html>
<html>
<head>
<script src="dust-core-0.6.0.min.js" type="text/javascript"></script>
<script src="jq.js" type="text/javascript"></script>
</head>
<body>
</body>
<script>
$.get('main_without_override.tl', function(){
console.log(arguments);
})
</script>
</html>
In the index.html when i try to get the main_without_override.tl its saying 404. But im sure that the file is there. The path that firebug is showing is correct.But browser says 404.
I want to know
How to get this main_without_override.tl
Apply templating for main_without_override.tl and render in the browser.
I searched in google most of the examples give only the syntax. Can somebody help me in rendering the main_without_override.tl template.
In order to compile templates on the client (which is probably not a really good idea), you need to include dust-full instead of dust-core. This is because dust-core does not include the Dust compiler.
The reason that compiling templates on the client is probably not a good idea is that Dust compiles to JavaScript and as #monshi mentioned, you can compile the templates and then serve them as JavaScript. It is possible to get .tl files through AJAX if you include dust-full, but it is a better idea to compile that template beforehand and then make a dynamic request for that .js file when you need.
You can include your dust template as a JavaScript file by using <script> tag, but you need to compile it first, which is explained here
Then add following templates (scripts) to test.html:
<script type="text/javascript" src="partial.js"></script>
<script type="text/javascript" src="main_without_override.js"></script>
And in you JavaScript render the template by dust.render method:
dust.render('main_without_override', your_json_object, function(err, out){
your_dom_element.innerHTML = out;
});
Related question:
how to use dustjs-linkedin as client side templating?
I'm following this tutorial on adding mobile features to an ASP.Net MVC 4 application.
When I launch the application (causing the Login page to be loaded), I get Access denied at the following point in jQuery 1.7.2 (also reproduced with 1.7.1)
if ( elem.parentNode ) { // Access denied here, Line 6081
elem.parentNode.removeChild( elem );
}
Walking down the call stack, I see the following in jquery.mobile-1.1.0.js (there are a few other methods on the call stack as well)
// Called from .initializePage:
if ( !$pages.length ) {
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 ); // Called from here, Line 7475
}
// First method in jquery.mobile:
if( $.mobile.autoInitializePage ){
$.mobile.initializePage(); // Called from here, Line 7541
}
If I comment out jquery.mobile from my application, it works as it did previously:
// _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.19.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
All JavaScript files are being served via the built-in VS2010 web server from the main project's domain.
UPDATE
Upon further inspection, I realize this is what jQuery Mobile is doing when the error happens:
// find and enhance the pages in the dom and transition to the first page.
// if no pages are found, create one with body's inner html
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
What's happening to cause jquery.mobile to fail?
It turns out that there was a reference to a third party script on the page (Comodo SSL validation) that certainly did not need to be on a mobile version of the page. jQuery Mobile tried to manipulate the related DOM, causing the error.
Thank you for pointing me in the right direction. I've been searching for days why the popup method (JQuery Mobile) didn't work on an .aspx page. Visual Studio automatically initializes the page with a scriptmanager.
The solution was to comment out the following line in the Asp:Scriptmanager tag, since it is conflicting with the JQuery reference in the head of the page:
<asp:ScriptReference Name="jquery" />
I would like load a different than English language locale for jQuery UI, while loading jQuery UI from Google Hosted Libraries CDN?
Is there a way to pass I18n parameter into load function?
google.load("jqueryui", "1.7.2")
I have also tried as per jQuery UI documentation on Datepicker internationalization to pass:
$(selector).datepicker($.datepicker.regional['pl']);
... but it did not do the trick :(
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/jquery-ui-i18n.min.js
EDIT:
It work's only google.load is omitted and standard JavaScript loading is used:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/i18n/jquery-ui-i18n.min.js"></script>
I realize that this may not be the answer you are looking for, but I stumbled upon your question when solving the very same problem.
I am approaching this by loading the i18n libraries from the local server:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<!-- local resource -->
<script type="text/javascript" src="/js/ui/i18n/jquery-ui-i18n.js"></script>
this code then works:
$(selector).datepicker($.datepicker.regional['pl']);
I am still interested in how to load the jquery-ui-i18n.js from a CDN.