We Keep Coding

Javascript autocomplete in Qualtrics fails to show below the question

I've implemented the following javascript code to use the autocomplete feature within the text field question in Qualtrics.
Qualtrics.SurveyEngine.addOnReady(function()
{
var textOptions = [
"Adam", "Athelney", "Baring"
];
jQuery('.QR-' + this.questionId).autocomplete({
source: textOptions,
minLength: 3
});
});
The code works; however, the autocomplete suggestions appears at the end of the page (below "Powered by Qualtrics" URL link). See the first screenshot:
I am not sure whether this is a bug within Qualtrics; however, I've tested the same code on an account provided by a different University (see the second screenshot below) where the same code works as expected (the suggestion appears right below the question, not at the end of the page) so I am left puzzled by this behavior.
Any ideas what may cause this behavior and how to resolve it? (both examples don't use any custom CSS or such but they are accounts hosted at two different Universities) Thank you.

Based on the comment above, copy the CSS html.JFEScope body#SurveyEngineBody ul#ui-id-5.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front rule from the working version to the Look&Feel>Custom CSS of the non-working version. The important part is the contents of the rule. Presumably they are different.
Although the classes are in a different order the only difference between the two selectors is the id of the ul element. Make sure you use the correct id (they may be different in the two surveys).

A bit late, but jquery autocomplete looks for .ui-front on a parent element; if it's not set you need to explicitly add a selector with the appendTo option in your custom js code for that questions.
var yourSourceList = ['foo', 'bar', 'baz'],
$elem = jQuery('.QR-'+this.questionId),
$elemParent = $elem.parent();
jQuery($elem).autocomplete({
source: yourSourceList,
minLength:3,
appendTo: $elemParent
});

Jquery $('input[name=""]').change(function WILL NOT FIRE in Chrome unless there is an uncaught error after it

So, here's a script that I've written to make some inputs dependent on an affirmative answer from another input. In this case, the 'parent' input is a radio button.
You can see that it hides parent divs of inputs when the document is ready, and then waits for the pertinent option to be changed before firing the logic.
If you'll look at the comment near the bottom of the javascript, you'll see what's been stumping me. If I remove the if statement, the change function does not fire. If I set the variable so that there is not an error logged in the console, then the change event does not fire.
If I change the jquery selector to $('select').change... the event fires, but obviously won't work on a radio button. Changing it to $('input').change... also fails.
<script type="text/javascript"><!--
$(function(ready){
$('#input-option247').parent().hide();
$('#input-option248').parent().hide();
$('#input-option249').parent().hide();
$('#input-option250').parent().hide();
$('#input-quantity').attr('type', 'hidden');
$('#input-quantity').parent().hide();
$('input[name="option\\[230\\]"]').change(function() {
if (this.value == '21') { //If yes, display dependent options
$('#input-option247').parent().show().addClass('required');
$('#input-option248').parent().show().addClass('required');
$('#input-option249').parent().show().addClass('required');
$('#input-option250').parent().show().addClass('required');
} else if (this.value == '22') { //If no, hide dependent options
$('#input-option247').parent().hide().removeClass('required');
$('#input-option248').parent().hide().removeClass('required');
$('#input-option249').parent().hide().removeClass('required');
$('#input-option250').parent().hide().removeClass('required');
}
});
//I don't know why this is necessary, but the input.change() event WILL NOT FIRE unless it's present. If I set the variable, then it breaks the change function above. If it's not here, it breaks the change function above. I'm stumped.
if(poop){}
});//--></script>
I'm really hoping that someone will see something rather obvious that my tired brain won't see. This is such a simple script, and I'm pulling my hair out over what seems like a rather annoying bug.

If you selector has special characters you need to use \\ before those characters.
$('input[name="option[230]"]')
should be
$('input[name="option\\[230\\]"]')
See http://api.jquery.com/category/selectors/

This may or may not be a good answer, but I managed to get the problem solved. I have another script on the page that is firing on the change event using this selector: $('select[name^="option"], input[name^="option"]').change(function() {
My best guess is that both functions cannot fire using a single change event from the same element. I moved the functional part of the code above to be within the second script, and it seems to be working as expected. If anyone wishes to contribute an answer that explains this behavior, I will accept it.

jquery effect highlight not working

I'm banging my head against the wall using the highlight feature, for which i use quite often.
In the console when I run:
$('.2').effect('highlight', {}, 3000);
It returns:
[​…​​]
Which is the element i'd like to highlight. However it doesn't highlight it and I get no errors.
Funny story, because when this it works; but what I like about highlight, it natively has a duration it removes the highlight.
$(".2").css({ backgroundColor: "#FFFF88" });
Any ideas are welcome!
http://jsfiddle.net/XxyjE/1/

What else do you have setting the background color on that element? On those elements above it?
E.g. I'm noticing this issue occurs with the dark colors on Twitter Bootstrap's .table-striped class. It looks like they are coloring the TDs, which means you can highlight the dark TRs until you're blue in the face, and you still aren't going to see a color change.
Try a:
$('.2 *').effect('highlight', {}, 3000)
if you want to confirm if that's the issue or not. Then try to find a more specific selector from there.

$.fn.highlight = function(){
this.css("background", "#ffff99")
var self = this;
setTimeout(function(){
self.css("background", "inherit");
}, 500);
};

This ia an old question I know, but I encountered a similar problem just recently, and wanted to share the fix for any others who are having similar issues.
The problem was that the element I was trying to highlight had the transition CSS property set, and this apparently interfered with the highlight effect (making it completely invisible).

I had a style="background:white;" attached to my element. When I removed that, the highlight worked.

Detect checkbox change in jstree

I am using the latest jstree commit from github with the checkbox plugin as a part of my form. I am using the tree with the "real_checkboxes" attribute.
Everything is fine except the checkbox plugin does not actually add any changed property attribute to the hidden field and nor does it seem to have a external function that will allow me to hook in to create custom functionality.
Is it possible for me to understand and listen for when a checkbox is either ticked or unticked?
Thanks,
UPDATE: after doing some experimenting I was able to over ride the default functionality of the check and uncheck methods using:
$.jstree._instance.prototype.check_node = function(node){ alert("here"); }
However it isn't very clean and it does override the whole method.
Is there:
a) a cleaner way to do it?
b) a way to just do a callback on the function rather than replacing the whole damn thing?
Thanks again,

#Noctyrn
Yes I did that originally but then I looked through the docs a lot more closely and found this:
$(".js_tree_'.$this->attribute.' div").bind("check_node.jstree", function(){});
But yes your function does the same :). But since mine is right to the jsTree docs Ima mark my answer as the right one. Also that function allows for different trees on the same page to have different binds so it is better overall :).
Thanks for the help :),

This is actually less clean but at least it gets the job done:
var check_node_func = $.jstree._instance.prototype.check_node;
$.jstree._instance.prototype.check_node = function(node) {
check_node_func.apply(this, arguments);
alert("here");
}

better html watermark mechanism for input and textareas

I'm using jquery.watermark for adding watermarks for html form inputs. I love it, really easy to use as a developer and makes the site easier to use for visitors. Problem is, for some browsers, people are submitting forms with fields that are supposed to be left empty... but they get submitted with the watermark text! That is an absolute dealbreaker problem and I'm going to have to stop using this watermark unfortunately because of it.
Are there any other mechanisms which do not exhibit this behavior, at least not in any modern browser (including IE6+)? I prefer jQuery, but any mechanism will do. I assume javascript is necessary..
UPDATE: I think I'm going to go with jq-watermark, unless there are better mechanisms someone knows about or there's something wrong with this? It looks great:
supports individualized css
supports html5's placeholder attribute as a fallback mechanism, which I was unaware of
uses a mechanism which doesn't allow for submitting watermarks to the server
has an elegant feel which fades the watermark with focus and only removes when entering text
UPDATE 2: Unfortunately, looks like the jq-watermark plugin doesn't actually work well at all... at least not for me and I have a pretty standard setup. Maybe there's a conflict with other javascript, but I doubt it. I really like their feature set, particularly the html5 fallback. In fact, I like the html5 fallback so much that I'm tempted to just forget about a javascript mechanism for this and only have this for html5 browsers. But not even firefox has this html5 feature yet, only safari and chrome as far as I can see :(. That's only 10% or so of my visitors...
UPDATE 3: I've finally been able to get jq-watermark to work well. I've had to add some CSS rules to its classes and adopt some html conventions (like using a div container instead of setting the width on an input element). The reason the html5 fallback mechanism wasn't working and I was experiencing weird behavior was that you can't rely on the automatic application of jq-watermark to all elements with the class jq_watermark, in fact it's harmful to have any elements with that class if you want to use the placeholder attribute. Instead you have to call $(selectors).watermark('placeholder text', {fallback:true});. Kind of sucks because you have to duplicate the placeholder text in that call and on the placeholder attribute. But, of course, you can use jQuery's .each() to read that attribute. Also, on firefox, the fading upon focus looks somewhat bad... but Firefox 4 will have placeholder html5 support, so I'm not too worried. The font changes a little as well frequently when focusing on an input element.
A bit disappointing having wasted a good few hours testing all the solutions out there and having a pretty poor choice for such a simple mechanism. jq-watermark, after tweaking it and your html, is probably the best solution there is.

I built a really simple jQuery plugin for this sort thing, it isn't that difficult. This uses the title attribute for the placeholder text but that is pretty easy to change.
(function($) {
$.fn.egText = function(options) {
options = $.extend({ }, $.fn.egText.defaults, options || { });
var $all = this;
$all.focus(function() {
var $this = $(this);
if(!$this.data(options.dataKey))
$this.data(options.dataKey, 'yes').removeClass(options.egClass).val('');
})
.blur(function() {
var $this = $(this);
if($this.val() == '')
$this.addClass(options.egClass).removeData(options.dataKey).val($this.attr('title'));
else
$this.data(options.dataKey, 'yes');
})
.blur();
$.unique($all.closest('form')).submit(function() {
$all.each(function() {
var $this = $(this);
if(!$this.data(options.dataKey))
$this.val('');
});
return true;
});
};
$.fn.egText.defaults = {
dataKey: 'egText', // The key we use for storing our state with .data(), just in case there are conflicts...
egClass: 'lolite' // The CSS class to add to the <input> when we're displaying the example text.
};
})(jQuery);
You're welcome to use this if it does what you need. I don't know if it works in IE6 but it does work in the latest Firefox, Safari, Opera, Chrome, IE7, and IE8.

This jQuery Watermark plugin does not alter the value of the input fields. So you should be safe using it.