Chosen + Dependent Dropdown (JQuery) - javascript

I'm using Chosen ( http://harvesthq.github.io/chosen/ ) and Dependent Dropdown ( http://plugins.krajee.com/dependent-dropdown) plugins for HTML select forms on my page.
Everything works great except one issue - if 1st (parent) select contains an option which is selected by default when page loads, 2nd (dependent) select is empty, and I need to manually re-select option from 1st select to get options in the dependent select.
According to http://plugins.krajee.com/dependent-dropdown#options I added "initialize:true" to options list, so it looks like:
<script>
// Child # 1
$("#membership_referrer_id").depdrop({
url: 'membership_new_ajax.php',
depends: ['client_id'],
initialize: true
});
</script>
However, it didn't help. In case it matters, I use chosen for 1st (parent) select only.

Even though it is an old question, I encountered the same problem recently.
My solution was to destroy the chosen selector with $("#form_field_id").chosen("destroy"); to revert to the native select

The issue is in the CSS of Chosen plugin, try using another plugin(select2) for the other drop down.

Related

Options not being posted by Bootstrap Multiselect

I'm using Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect). It's a great component but i'm having the issue described below.
Let's say i have a select with id 'select-status' with 10 options and i want the app opens by default with the first 3 options selected. For this i'm using this code :
$(function () {
$('#select-status').multiselect('select','1');
$('#select-status').multiselect('select','2');
$('#select-status').multiselect('select','3');
});
I can see the code above works because the 3 options appear checked when i load my application.
The problem is, when i submit the form, only one option is being posted, UNLESS i manually click on the select dropdown to show the options. Only by doing this and not even clicking in any option, the form will post correctly, with the 3 selected options.
I assume that probably i need to do some code after i select the options programatically.
Any hints ?
Thanks !
What if you use an array of values instead?
$('#select-status').multiselect('select', ['1', '2', '3']);
It would be interesting to see the rest of your markup too, though. And also hear what you use to grab the data.

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');

Qooxdoo - celleditor problem with selectbox

I've made table with celleditor similar to this:
http://demo.qooxdoo.org/current/demobrowser/#table~Table_Cell_Editor.html
-row 'Status' with selectbox (I need to remember in this selectbox for items - name and ID).
But problem is like in this example - when I select an option and deactivate this editor (edit other row, or click somewhere else), and then return to edit it again, then it is selected other option than it was before - always first element on list.
I think it's a bug in qooxdoo (version 1.4.1), but do you have any solution for this (too keep correct element selected when I edit this cell again?
I believe the standard solution to this problem is to keep a 'presentation model' of the user interface state. When the widget is shown again, you reconfigure it with the selection box showing the last used item or whatever you consider appropriate.

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.

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax

Categories

Resources