typeahead in javascript / jquery - javascript

I'm trying to create a typeahead with the following code:
function makeTypeahead($container, schedule){
if(schedule !==undefined && schedule.classes!== undefined){
$.each(schedule.classes, function(value){
if(value.passed === false){
$container
.find('.activeClasses')
.typeahead({
source : Fp.pluck(schedule.classes, 'className'),
items : 15
});
}
});
}
}
//In this code, typeahead doesn't work at all. (nothing shows in typeahead dropdown)
I have also tried:
function makeTypeahead($container, schedule){
//All non-passed classes
if(schedule !==undefined && schedule.classes !== undefined){
for(var i=0; i<schedule.classes.length; i++){
if(schedule.classes[i].passed === false){
console.log(schedule.classes[i].passed);
$container
.find('.activeClasses')
.typeahead({
source : Fp.pluck(schedule.classes[i], 'className'),
items : 15
});
}
}
//in this code, typeahead doesn't work at all. (nothing shows in typeahead dropdown)
I have a list of schedules and the classes are every class in the schedule. I want to be able to say that if the class is NOT passed, don't allow it in the typeahead.
This is done on a twitter bootstrap popup. the html is using mustache - for example: (I cant get the full html to show, I guess I'm not formatting it right for stackoverflow)
input id="{{stnId}}"
value="{{stnValue}}"
Does anyone know what I am doing wrong? I feel like I'm so close to getting it to work.

function makeTypeahead($container, schedule){
//Need All non-passed classes.
if(schedule !==undefined && schedule.classes !== undefined){
var notPassed = Fp.filter(schedule.classes, function (class) { return !class.passed; });
$container
.find('.activeClasses')
.typeahead({
source : Fp.pluck(notPassed, 'className'),
items : 15
});
}
}

Related

JavaScript in DOM popup

SilverStripe 2.4.7
Hi
I have been reading this tutorial and have tried to implement it but I am confused. It doesn't seem to work but I'm not getting errors or anything.
My question is am I missing something like a module, etc? I have implemented the code like so...
JQ = jQuery.noConflict();
JQ(document).ready(function() {
// Find the select box, named differently on the update and add forms
var sel = JQ('select[id="DataObjectManager_Popup_DetailForm_Status"]');
if (sel.attr('id') == undefined) {
sel = JQ('#DataObjectManager_Popup_DetailForm_Status');
}
// hide either the internal or external link editing box
if (sel.val() == 'rejected' || 'Rejected') {
JQ('#DataObjectManager_Popup_DetailForm_Reason').show();
} else {
JQ('#DataObjectManager_Popup_DetailForm_Reason').hide();
};
// toggle boxes on drop down change
sel.change(function(e) {
if (sel.val() == 'rejected' || 'Rejected') {
JQ('#DataObjectManager_Popup_DetailForm_Reason').show();
} else {
JQ('#DataObjectManager_Popup_DetailForm_Reason').hide();
};
});
});
Nothing happens when I use the dropdown so do I need to install a module too or is there something else I'm missing?
Thanks in advance.

Disable Select based on another element on the Same Row

In a table, I have a row with two inputs - one select and one text. What I want to achieve is that if one has a value, then the other (on the same row) should disable. This works correctly onload when there is a value in the textbox, but doesn't seem to work when there is a value in only the select box.
As you can see in the example here: http://jsfiddle.net/anAgent/UBUhn/1/ the "change" event works correctly, but it doesn't work onload.
Any help would greatly be appreciated!
I'm working with jQuery 1.5.2 and with both Google Chrome and IE9
Update With Final Code
Thanks #scoopseven and #eicto for your input. Based on these two answers, here's the final code. I hope it helps someone else.
$(document).ready(function() {
$(".validation-compare").change(runRowValidation);
$(".validation-compare").each(runRowValidation);
});
function runRowValidation() {
var $me = $(this),
$other = $('.validation-compare',$me.closest("tr")).not($me),
mVal = $me.val(),
oVal =$other.val();
if(mVal != "" && oVal == "") {
$me.removeAttr('disabled');
$other.attr('disabled',1);
} else if(mVal == "" && oVal != "") {
$other.removeAttr('disabled');
$me.attr('disabled',1);
} else {
$other.removeAttr('disabled');
$me.removeAttr('disabled');
}
}​
You can see it in action at: http://jsfiddle.net/anAgent/UBUhn/24/
i don't think that you you need to set the class valid, all you have to do is replacing
var $otherInput = $('.validation-compare', $parent).not('.valid');
by
var $otherInput = $('.validation-compare', $parent).not($me);
And this will resolve your problem on onload. Here is an example
var validme=function() {
var me=$(this);
me.removeClass('validation-compare');
if (me.val()) {
console.log(me);
me.addClass('valid');
me.parent().parent().find('.validation-compare').attr('disabled',1);
me.addClass('validation-compare');
return;
}
me.removeClass('valid');
if (me.parent().parent().find('.validation-compare.valid').length<1) {
me.parent().parent().find('.validation-compare').removeAttr('disabled'); }
me.addClass('validation-compare');
}
$('.validation-compare').each(validme);
$('.validation-compare').change(validme)
http://jsfiddle.net/UBUhn/22/
You need to separate out the function and call it on the click event and on page load. Something like this:
jQuery(function($){
function myFunction() {
// do somestuff
}
// myFunction needs to be called when select is clicked and when page is loaded
$('#someelement').click(myFunction);
$(document).ready(myFunction);
});

js code to replace checkbox and closures

The following javascript (prototype 1.6) code hides all checkboxes on the page and inserts a div element with some css style and a click event to act as a fake-checkbox. It also looks out for a label next (or previous) the checkbox, to also trigger the same event.
When I click the div (fake_el) itself, everything works as expected, but when I try the same with the label, it only works one time. after that, the el isn't gonna change - as if it (the el) would be a value-parameter.
Any ideas here?
$$('input[type=checkbox]').each(function(el) {
if (el.visible()) {
var fake_el = new Element('div', { className:'checkbox checkbox_' + el.checked });
var label = (el.next() != null && el.next().tagName === 'LABEL' && el.next().readAttribute('for') === el.id) ? el.next() : undefined;
label = (el.previous() != null && el.previous().tagName === 'LABEL' && el.previous().readAttribute('for') === el.id) ? el.previous() : label;
var action = function(el) {
el.checked = (el.checked) ? false : true;
fake_el.className = 'checkbox checkbox_' + el.checked;
}
fake_el.observe('click', function() { action(el); });
if (label != null) { label.observe('click', function() { c.log(el); action(el); c.log(el); }); }
el.insert({ after:fake_el }).hide();
}
});
I changed a couple items and created a jsFiddle for this. First and foremost, c.log had to be changed to console.log for it to work for me :). After that, the only thing I changed was how the divs were added, since it wasn't working for me with insert. I set up some test data and away I went...
EDIT: Perhaps you don't have a non-label tag between two checkboxes and it is getting confused? Notice I have a br between label and the next checkbox, maybe you need to do something like that.

Javascript loop with dynamic jquery val() not being picked up

I'm trying to pick out the value of an input box using jquery.
No probs there
$('#id_of_my_input_box_1').val();
But I need several so decided to put them into a loop:
============
var config_total_instances = '==some value='
for (var x = 1; x <= config_total_instances; x++) {
if (isset($('#id_of_my_input_box_'+x).val())) {
alert($('#id_of_my_input_box_'+x).val());
}
}
============
If I submit the form and I've got say 10 input boxes, the code above doesn't alert a value if the relevant input box has value.
I'm using a function below to check for values.
============
function isset(my_variable) {
if (my_variable == null || my_variable == '' || my_variable == undefined)
return false;
else
return true;
}
============
Am I missing something vital..? :-(
Addition: I shoudl add that I'm askign why I don't get the value of
$('#id_of_my_input_box_'+x).val()
echoed out in my alert box
Extending #Faber75's answer. You can set a class name for all your text element and then use something like this
$("input:text.clsname").each(function(){
if (isset(this.value)) {
alert(this.value);
}
});
In your current code if you are assigning a string to config_total_instances then it will not work.
don't consider my message an answer, more of a tip.
For a simplier code you could consider adding a class to the textboxes you need to check.
For example adding to all the inputs you need to check the class="sample" you could the use the jquery selector $(".sample") , returning you all the items and then you could simply do
$(".sample").length to count the items and $(".sample")[0].val() (or similar) to get/test values.
Cheers
Have you tried this? (note that there are three =)
if (my_variable === null || my_variable == '' || my_variable === undefined)
As an alternative to this try
if (typeof(my_variable) == 'null' || my_variable == '' || typeof(my_variable) == 'undefined')
Maybe I'm misunderstanding, but can't you just get all the <input>'s in a <form> that aren't :empty if that's the end goal of what you're trying to accomplish?
$('form#some_id input:not(:empty)').each(function () {
// do something with $(this).val() now that you have
// all the non-empty <input> boxes?
});
Or if you're just trying to tell if the user left some <input> blank, something like:
$('form#some_id').submit(function (e) {
if ($(this).find('input[type="radio"]:not(:checked), input[type="text"][value=""], select:not(:selected), textarea:empty').length > 0) {
e.preventDefault(); // stops the form from posting, do whatever else you want
}
});
http://api.jquery.com/category/selectors/form-selectors/

Getting all visible elements using MooTools

I am moving from jQuery to MooTools (for the fun..) and I have this line of code :
$subMenus = $headMenu.find('li ul.sub_menu:visible');
How I can write this in mootools?
I know that I can use getElements but How I can check for visible ul?(I am using this(:visible) selector a lot).
Edit -
I implemented my own function :
function findVisibleElements(elementsCollection){
var returnArray = [];
elementsCollection.each(function(el){
if(el.getStyle('display') === 'block'){
returnArray.push(el);
}
});
return returnArray;
}
And what i want is to slide up all the visible sub menu, this is what I wrote :
// Sliding up the visible sub menus
if( visibleSubMenus.length > 0 ){
visibleSubMenus.each(function(el){
var slider = new Fx.Slide(el, {duration: 2000});
slider.slideOut();
});
}
Why my code isn`t working?My function is working, and the problem is with the Fx.Slide.
I added mootools more with Fx.Slide.
Just extend the selector functionality - it's MooTools!
$extend(Selectors.Pseudo, {
visible: function() {
if (this.getStyle('visibility') != 'hidden' && this.isVisible() && this.isDisplayed()) {
return this;
}
}
});
After that just do the usual $$('div:visible') which will return the elements that are visible.
Check out the example I've created: http://www.jsfiddle.net/oskar/zwFeV/
The $$() function in Mootools is mostly equivalent to JQuery's $() does-it-all selector.
// in MooTools
var elements = $$('.someSelector');
// natively in most newer browsers
elements = document.body.querySelectorAll('.someSelector');
However, for this specific case since :visible isn't a real pseudo class, you'll have to approximate it using an Array filter in Mootools.
var isItemVisible = function (item) {
return item.style.visibility != 'hidden' && item.style.display != 'none';
}
var elements = $$('ul').filter(isItemVisible);
There might be other things that you consider make an item 'invisible', in which case you can add them to the filtering function accordingly.

Categories

Resources