Develop Reference

js: Using some custom jQuery

I have a bit unusual case in my project. The jQuery is loaded under a namespace, like
var grp = {
"jQuery": jQuery.noConflict(true)
};
So in my custom scripts I am doing:
(function($){...}(grp.jQuery);
The question I have is how to handle external jQuery plugins. E.g. I want to add autocomplete plugin, which depends on jQuery, and starts with
$(document).ready(function() { ....
And it looks like the only option to include them in source code like
<script type="text/javascript" src="/static/autocomplete_light/django_admin.js"></script>
would be to edit them all, which is not practical...

You have two options:
Move jQuery to where the plugins expect to find it (i.e. to a global)
Edit all the plugins to tell them where jQuery actually is
You could try writing a preprocessor that edits all the plugins for you at build time (this would probably be more work and more error prone than is worthwhile).

Assuming you are not using the $ variable name anywhere else,
maybe you can append it to the window on startup so it'll be available.
Something like:
(function(jQuery) {
window.$ = jQuery;
}(grp.jQuery))

Disable dates in Protoplasm DatePicker

I am using the ProtoPlasm Datepicker in one of my apps, now I want to disable all the dates earlier than today.
I used the following code:
Protoplasm.use('datepicker').transform('input[type="text"].xyz_datepicker', {dateFormat: 'MM/dd/yyyy'});
But I'm still unable to do it. Any help?

I am not familiar with Protoplasm; however, according to their doc, you should be able to do this:
Protoplasm.use('datepicker')
.transform('input.datepicker', { 'minDate' : '1/1/2016' })
Ref. http://jongsma.org/software/protoplasm/control/datepicker
However, I don't recommend this approach. I recommend just using standard jQuery UI as outlined https://jqueryui.com/datepicker/#min-max

I have fixed the issue by adding the following line of code to my js file:
Protoplasm.use('datepicker').transform('input.datepicker', { 'minDate' : '1/1/2016' })

TypeError: datepicker_instActive is undefined in Jquery-ui Datepicker

I have built rails + angular app. In this I have used jquery-ui datepicker. I didn't find the solution why I get this error in console:
TypeError: datepicker_instActive is undefined
if(!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline?
datepicke...
in console.
My versions of css is jQuery UI Datepicker 1.11.2
and js is also the same. jQuery UI Datepicker 1.11.2
And when I move my cursor on datepicker widget no.of same error counts are increased.
I think issue is in this function of Jquery:
function datepicker_handleMouseover() {
if (!$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
$(this).parents(".ui-datepicker-calendar").find("a").removeClass("ui-state-hover");
$(this).addClass("ui-state-hover");
if (this.className.indexOf("ui-datepicker-prev") !== -1) {
$(this).addClass("ui-datepicker-prev-hover");
}
if (this.className.indexOf("ui-datepicker-next") !== -1) {
$(this).addClass("ui-datepicker-next-hover");
}
}
}
Do you have face same issue ever? Or any idea how can I resolve it. I have used bootstrap-modal popup and in that form I used datepicker.

Same issue here in jQuery UI 1.11.4. We just created a bug ticket http://bugs.jqueryui.com/ticket/14578 and hope this is fixed soon by the jQuery team.
To workaround the problem, just
download only the datepicker component from the jQuery UI site via custom download (https://jqueryui.com/download/),
Extract jquery-ui.js from the ZIP archive and rename it, e.g. jquery-ui-1.11.4-datepicker-fix.js
embed the script right after your full jQuery UI script in your template(s), and
add a null-check to the first line of function datepicker_handleMouseover() as follows:
function datepicker_handleMouseover() {
if (!datepicker_instActive || !$.datepicker._isDisabledDatepicker( datepicker_instActive.inline? datepicker_instActive.dpDiv.parent()[0] : datepicker_instActive.input[0])) {
...
}
No further changes to your code should be required. The patch can easily be removed when the bug has been fixed by simply removing the script tag from your templates.
Note that this workaround completely overwrites the original datepicker plugin.

I encountered this error when I included jquery-ui twice. Removing either instance resolved it.

After destroying a datepicker, calling refresh on another datepicker sets datepicker_instActive again, which might be a more acceptable workaround than modifying external plugin code:
// Delete a datepicker
$('#date1').datepicker('destroy');
// WORKAROUND: Refresh another datepicker until the following is fixed
// http://bugs.jqueryui.com/ticket/14578
$('.hasDatepicker').last().datepicker('refresh');
Here's an updated Fiddle from the ticket to demonstrate the workaround.

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!

I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});

Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

jQuery Grails Plugin

I'm trying to install the jQuery plugin for Grails. Now I have a path and an include but it's pointing to js/jquery/jquery-1.4.3.js. I would like to change this. Following the documentation I should add
jquery {
sources = ''
version = '1.4.4'
}
To my Config.groovy file. Having done this I see no change. What is the correct way to change the include or do I need to simply move and rename the file?

ref: http://www.grails.org/plugin/jquery
Add to config.groovy
jquery {
sources = 'jquery' // Holds the value where to store jQuery-js files /web-app/js/
version = '1.4.4' // The jQuery version in use
}
Then
grails clean
grails run-app
It work for me

You can also download Jquery from it's site and then put it in your web-app/js.
Next simply include it on top of your page or in your layout.gsp with something like..
<script type="text/javascript" src="${resource(dir: 'js', file: 'jQuery-144.js')}"></script>
That's all there is to start using jQuery.
Hope it helps..