jQuery combobox setting default value after creation - javascript

I'm having a difficulty using the jQuery combobox widget as mentioned here:
I'm using jQuery to load the options for the select using ajax, which means that upon creation of the combobox, there are no options in it. When I get the values from the ajax call, I set the first option to be be selected. This works fine for the underlying select, but not for the input-field which jQuery combobox has added.
I've seen the solution here but this will not work if the options are added after _create is called(also, it is kinda outdated since the widget by default handles this).
As far as I can tell, there are no relationsship between the underlying combobox and the input-field that makes the one update the other. Or am i wrong here?
Regards,
Runar

ok..solved this myself adding the following code snippet in _create :
select.change(function() {
var selected = select.children( ":selected" );
input.val(selected.val() ? selected.text() : "");
});
Then invoked change on the combo after values had been populated.

Related

select2 change selection programmatically

I've got a select2 selection that I'm trying to set the value for using javascript.
I've created a fiddle at this address.
https://jsfiddle.net/rfeynman/wn9v3bud/
I'm trying both he following
// method 1
$('#groupList').select2('data',{id:"group2", text:"group2"},true);
// method 2: as seen on the select2 website
var groupList = $('#groupList').select2();
$(groupList).val("group2").trigger("change");
My problem is that I'm unable to change the selection for a select2 input that loads data using ajax. Any idea what i'm doing wrong?
looks like this can be done using the following code. you need to add the option to the select list and then set the value.
var option=$("<option>").attr("value","group2").html("group2");
$("#groupList").append(option);
$("#groupList").val("group2").trigger("change");

Testing combobox developed using ExtJS with CasperJS

I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');

Knockout not updating on input value changed with datepicker

So I have to collect a date and time from the user. I want to be able to set both from a single picker. I found this nice one by curious solutions here. Our site uses jQuery, jQuery mobile, and Knockout. When I use the datepicker to select the date my knockout binded variable is not updating, even though the value of the input box has changed. If I use jQuery to get the value it shows up just fine.
So my question: Can someone help me figure out how to get my knockout binding to update?
I've already tried setting the valueUpdate to input, and afterkeydown with no luck.
Here is a link to a fiddle I made that demonstrates the problem: http://jsfiddle.net/TrueEddie/eg6zM/
In the plugin, when the value of the element is set it needs to trigger the change event.
Something like:
_setValueOfElement: function(sElemValue)
{
var dtPickerObj = this;
var $oElem = $(dtPickerObj.dataObject.oInputElement);
if(dtPickerObj._compare($oElem.prop("tagName"), "INPUT"))
$oElem.val(sElemValue);
else
$oElem.html(sElemValue);
//ADDED THIS LINE
$oElem.change();
return sElemValue;
},
The plugin doesn't seem to have any eventing built-in, so doesn't look like there is a good way to react to the value being set otherwise.

jQuery Selectbox Append Options OnChange

I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.

Show a different set of checkboxes in a webform based on the value chosen in a combobox

Will a javascript library like Prototype/Scriptaculous or jQuery help me create a dynamic form on a webpage where I can show a different set of checkboxes based on the value chosen in a combobox?
Yes. You can easily show/hide the desired checkbox-s in onChanged event of the combo box. You even don't need special JavaScript libraries to do that.
Yes, because all these libraries (frameworks) help make easy the cross-browser fiddling with the DOM..
Something along the lines of (in jQuery)
$(document).ready( //when the DOM is loaded invoke the following function
function(){
$('combobox_selector').change( // when someone changes the value of the combobox invoke the following function
function(){
$('some_checkbox_selector').hide(); // hide some checkboxes..
$('some_other_checkbox_selector').show(); // show some other checkboxes..
}
)
}
);
The selector parts of the code above should be replaced by the logic that determines which items gets hidden and which shown when the value of the combobox changes..

Categories

Resources