I added a button to the ribbon toolbar button in my extension to the Tridion CMS. On click of the button a popup page will display with two drop downs. By changing the values in the first drop down control I should populate the values for second drop down control. In my case I am using ASP drop down list control. For the time being I will hard code the values to be populated to the second drop down in java script. For this requirement I am using the following code but I am not able to populate the value (Not Identifying the tag).
Java script code:
ABC.WCMS.RTFExtension.Popups.ButtonPopup.prototype._populate = function () {
var selectedValue = $('#functionalcomponent').value;//First dropdown selected value
var dropdownId = $("#Dd");//Second Dropdown Control
switch (selectedValue) {
case "Home Ware":
dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
dropdownId.append($("<option> </option>").val("Air-Conditioners/Coolers").html("Air-Conditioners/Coolers"));
break;
case "Education":
dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
dropdownId.append($("<option> </option>").val("Colleges").html("Colleges"));
break;
default:
dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
dropdownId.append($("<option> </option>").val("No Value").html("No Value"));
}
return true;
}
ASPX Controls:
<%--Dropdown1--%>
<asp:DropDownList ID="functionalcomponent" runat="server"></asp:DropDownList>
<%--Dropdown2--%>
<asp:DropDownList ID="Dd" runat="server"></asp:DropDownList>
How can I populate the values for second drop down from external JavaScript file?
Rather than adding values on demand, you may use the approach below:
Add all the items beforehand to the DOM.
Hide the required items using jQuery logic.
You may refer the following post for a hint Hide options in a select list using jQuery
Please take a look at jQuery disable SELECT options based on Radio selected (Need support for all browsers) also
I recently worked on a GUI extension where we populated a drop down based on the value of another drop down. When I populate using javascript I have the following code:
$j(c.SystemDropDown).append("<option value=\"" + value + "\">" + value + "</option>");
As you can see my example appends the whole <option> tag, where as yours is specified using the .val(), perhaps you could try this way?
The version I have is working great :)
Related
I have a Select2 working fine attached to a select list but when someone enters a new item and I rebind the select list and try to programmatically select the new item, it refuses to display.
There are a number of other posts re this but their solutions don't work for me.
Use .select2("val", value). Does nothing.
Use .select2("data", value). Does nothing. Not sure how this is supposed to be different.
Use the InitSelection option to set a value. This leads to the following error message: Uncaught Error: Option 'initSelection' is not allowed for Select2 when attached to a select element.
In the Ajax success function after adding the new option to the database, I have the following Javascript:
BindDishes(RestaurantID); //rebinds the select list successfully
$('#hidDishID').val = data.DishID; //populates a hidden field
var arr = '[{id: "' + data.DishID + '", text: "' + data.DishName + '"}]';
$("#dd").select2("data", arr);
So in this latest iteration I have tried to supply an array with the id and text from the select list item as per another suggested solution but still nothing occurs. What am I doing wrong? Is this impossible when using Select2 with a select list?
Edit: I have the following line in MVC that creates the Select list:
#Html.DropDownGroupListFor(m => m.DishID, Model.GroupedSelectList, "Select a dish", new { id="dd",style="width:470px;" })
which must be causing the problem by binding to DishID from the model which was originally blank when it came from the server. DropDownGroupListFor is just an HTML helper that allows for using OptionGroups in a Select but it must be the binding that is a problem. What is the best approach here, to bind in a different way or to somehow update the model's DishID, not sure of the best practice?
var $example = $(".js-example-programmatic").select2();
$example.val("CA").trigger("change");
You need to destroy your select2 before adding/modifying items. If you do, then your select2 will respond just like its bound first time
Select2 Dropdown Dynamically Add, Remove and Refresh Items from
I am dynamically generating some dropdowns and then allowing them some of those to be removed on board dyanmically. so that time, i have encountered an error of selection option (dropdown) elements id mismatch. something like below is.
newly added dropdowns.
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][1]" id="client_time_window_1">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
after i dynamically remove them via javascript. (lets say i am removing the second one) so then new ones will be displayed as followings,
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
So now the issue i have is, the names of the dropdowns are like this, (0,2,3)
CSSAtapsClient[client_time_window_arr][0],
CSSAtapsClient[client_time_window_arr][2],
CSSAtapsClient[client_time_window_arr][3]
So this is causing an error for me and i need to reorder this name and make it be like this, (0,1,2)
CSSAtapsClient[client_time_window_arr][0]
CSSAtapsClient[client_time_window_arr][1]
CSSAtapsClient[client_time_window_arr][2]
how can i simply rename these dropdowns name attribute (from 0 to how much ever dropdows are exisiting) ? appreciate an early reply
EDIT 1
I tried this, but didnt work.
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][i]");
});
You can simply reset the values using .attr() method:
$('#tbl_dynamic_call_dates select').attr('name', function(i) {
return 'CSSAtapsClient[client_time_window_arr]['+ i +']';
});
I did this,
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][" + i + "]");
});
What is the best way to show/hide a textbox or an entire div section based on a users selection from a dropdown? I don't believe its possible with server controls, so I would have to use regular client side HTML controls, correct? Thanks for any input. Would jQuery be the best option for this?
Based on the drop down selection, I want to be able to display the following Div, and by default hide the Div. Thoughts?:
<div id="divLimitPrice">Limit Price<br />
<asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"> </asp:TextBox>
You can do it with server controls the same as simple html controls. You only need to correct set the rendered client IDs of the control. Here is an example: (see the notes on the code for what I do)
function TriggerChange(me)
{
// get the drop down control
var cTheDropDown = jQuery("#<%=ddlControl.ClientID%>");
// find the value of the selected one
var SelValue = jQuery('option:selected', cTheDropDown).attr('value');
// now do what you like with it
if(SelValue == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
a shorter version of
function TriggerChange(me)
{
// get the selected value from the drop down list
// and base on it, show or hide your div
if(jQuery("#<%=ddlControl.ClientID%>").val() == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
And on control you add the trigger as:
<asp:DropDownList ID="ddlControl" runat="server" onchange="TriggerChange(this);">
Hi I have a drop down whose items are populated by javascript and has no option tags. When the page loads, the drop down is loaded with all the options by an external JavaScript file. When the user selects an item from this drop down i would like this selected item to update a text box (which is on the same page) with their selection so I can then send this by email.
I can get it to work on a normal drop down with actual options tags that isn't populated by javascript, but can't get it to work with my Populated drop down. I have read on various posts that drop down items populated with JavaScript wont be read by the server because it is all done client side, and that a work around involves adding the populated drop down selection to a hidden field, but I cant find a method for doing so. I am also working with classic ASP to send the form
Hope someone can help,
Hi I forgot to mention that the drop down inst populated by inline JavaScript but rather from an external JS file
hi some code i have used, works fine for a normal drop down, but not my one that is populated with JS
function ChooseContact(data) {
document.getElementById ("friendName").value = data.value;
}
<select onchange="ChooseContact(this)"><option value='1'>1</option><option value='2'>2</option></select>
Thanks R
HI - its all done using this external script
http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm
HI Here is a snippit of the exteranl JS file populating the drop down
/var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists
var onclickaction="alert" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired.
var newwindow=0 //Open links in new window or not? 1=yes, 0=no.
/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////
addListGroup("chainedmenu", "First-Select");
addOption("First-Select", "Select a course type", "", 1); //HEADER OPTION
addList("First-Select", "New Staff", "", "NewStaff");
addList("First-Select", "All Staff", "", "AllStaff");
addList("First-Select", "Learning, Teaching, Research and Knowledge Exchange", "", "Learning");
addList("First-Select", "Leaders and Managers", "", "Leaders");
With your posted code, it should be perfectly possible to achieve what you are trying to do. I've constructed an example that expands on your code to show you how the input field can be updated.
See this jsFiddle
And also one that shows you it should still work if all of the options are generated via JavaScript. So maybe the issue you are having is elsewhere?
<select id="selecty" onchange="ChooseContact(this)"></select>
<input type="text" id="friendName" />
<script>
var opt = document.createElement("option");
opt.text = "One";
opt.value = "1";
document.getElementById("selecty").add(opt,null);
opt = document.createElement("option");
opt.text = "Two";
opt.value = "2";
document.getElementById("selecty").add(opt,null);
opt = document.createElement("option");
opt.text = "Three";
opt.value = "3";
document.getElementById("selecty").add(opt,null);
function ChooseContact(data) {
document.getElementById("friendName").value = data[data.selectedIndex].value;
}
</script>
See this jsFiddle
I am using this script Dynamic Drive Chained Menu and what I am trying to do is when someone clicks the "go" button the values of the selections made display in a text box with a message that says something like "You have selected:"
I've changed the main part, from the alert is up to you :)
function goListGroup(){
var options = [];
for (i=0;i<arguments.length; i++){
if (arguments[i].selectedIndex!=-1){
options.push(arguments[i].options[arguments[i].selectedIndex].value);
}
}
alert(options);
}
Don't forget to set the value attribute on the option element!