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>
Related
I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.
In Bower, how do I get and continue to update a custom build of jQuery UI? Let's say I only need components for Core, Widget, Mouse, Position, Sortable, and Accordion in jQuery UI? I rather not download the entire jQuery UI library.
To give a practical example of a possible approach and to answer to Egg's comment here's a way to do it.
Just bower install the whole thing as suggested by Sindre and include only the scripts that you need in the html.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
This will already work and reduce significantly the file size of the libraries downloaded by the user when using your app or website. Here is a post about this straight from the horse's mouth.
To further increase download speed you can then create your own bundle in your preferred way, maybe using Grunt usemin or whatever else method you fancy to get to this kind of html:
<script src="scripts/bundle.min.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
You could have your own fork, but then you would need to keep that up to date too. Just let it download the whole thing and only use the pieces you need, I don't see the problem with that.
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>
What's the right way to initialize objects on a jquery mobile page? The events docs say to use "pageInit()" with no examples of that function, but give examples of binding to the "pageinit" method (note case difference). However, I don't see the event firing at all in this simple test page:
<html>
<body>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<div data-role="page" id="myPage">
test
</div>
<script>
$("#myPage").live('pageinit',function() {
alert("This never happens");
});
</script>
</body>
</html>
What am I missing? I should add that if you change pageinit to another event like pagecreate this code works.
---- UPDATE ----
This bug is marked as "closed" in the JQM issue tracker. Apparently opinions differ about whether this is working properly or not.
It started working when I embedded script within page div:
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
Used jQuery Mobile 1.0RC1
.live() is deprecated, suggestion is to use .on() in jQuery 1.7+ :
<script type="text/javascript">
$(document).on('pageinit', '#indexPage', function(){
// code
});
</script>
Check the online doc for more information about .on(): http://api.jquery.com/on/
Turns out this is a bug in 1.0b3 that is fixed in the current head. So if you want a fix now, you gotta grab the latest from git. Or wait for the next release.
jQuery(document).live('pageinit',function(event){
centerHeaderDiv();
updateOrientation();
settingsMenu.init();
menu();
hideMenuPopupOnBodyClick();
})
This is working now. Now all page transitions and all JQM AJAX functionality would work along with your defined javascript functions! Enjoy!
pageinit will not fire in case it is on secondary pages ( NOT MAIN page ) if it is written in common <script> tag...
I have such a problem - on secondary pages that are not loaded with 'rel="external"', the code in the common <script> tag is never executed...
really this code is always executed...
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
althrough if you made "tabbed interface", using of "pageshow" is better
I had to put the script in the HTML page section which to me is a bug. It is loaded normally in a browser (not via AJAX) and all on a single page including javascript. We're not supposed to have to use document ready.
The easiest way I found to deal with this was to use JQM + Steal. It works like a charm as long as you put:
<script type='text/javascript' src='../steal/steal.js?mypage'></script>
Inside of the data-role='page' div.
Then use AJAX to connect anything that can use the same mypage.js and use an external link (by using the rel="external" tag) to anything that requires a different steal page.
#Wojciech Bańcer
From the jQuery docs:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Try this:
$('div.page').live('pageinit', function(e) {
console.log("Event Fired");
});
$(document).on("pageinit", "#myPage", function(event) {
alert("This page was just enhanced by jQuery Mobile!");
});
The events don't fire on the initial page, only on pages you load via Ajax. In the above case you can just:
<script>
$(document).ready(function() {
alert("This happens");
});
</script>
I have a problem of implementing the jQuery Dialog as Modal Form.
$(document).ready(function(){
$("#add-newItem")
.button()
.click(function () {
alert('a');
debugger;
$("#dialog-form").dialog("open");
});
});
Here execution is hitting the method and displays "Alert" as per the code. After the it comes to debugger and when I use "F10" it tries to execute the "$("#dialog-form").dialog("open");
" and getting the error below...
Microsoft JScript runtime error: Object doesn't support property or method 'dialog'
I have properly given refence to the jQuery as below
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<link href="../../Content/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
What could be the problem. If check using F12 of IE9 of my displayed page, I can list out the Dialog method from the script libray. but these are not vailable for the "$("#dialog-form")
regards,
Vinu
Do you have the <div id="dialog-form" /> ? Make sure the div element is present.