We Keep Coding

How to display value for dynamically generated text box

I have a dialog with a form displaying details of an object. There is x dynamically generated h:inputtext if there is x number of values to be displayed. The values don't appear in the text boxes however, they appear in the browser console using JavaScript to get the value of the text boxes. How do I show the values in the respective text boxes?
From the bean, a map containing the ids of the text boxes and their respective values is passed to the view. When the document finishes loading, jquery is used to retrieve the values and then assign them to the text boxes.
Below is the view:
<ui:repeat var="a" value="#{managedBean.listA}">
<ui:repeat var="b" value="#{a.listBofA}">
<input class="form-control" value="#{managedBean.getABs(b, a)}" id="A_B_ID_#{a.id}_#{b.id}" name="A_B_ID_#{a.id}_#{b.id}" />
</ui:repeat>
</ui:repeat>
<script type="text/javascript">
$(document).ready(function() {
var folders = $.parseJSON('#{managedBean.foldersMap}');
$.each(folders, function( index, value ){
$('#A_B_ID_'+index).val(value);
});
});
</script>

Submit div content contains form control states

I have a div with HTML tags and form controls like check boxes, text and drop lists. I want to post the whole content along with form controls' states (ie, capture user's choices) to save it into database and later, re-render the exact HTML.
How can I do that? I used
$("#div").clone()
But it seems control states not saved.
Note: I don't want to post the inner form, then re-render form states because the HTML is dynamic (it's a HTML template)

If I understand your question right, you need to store control states into HTML elements first (to a markup) and then submit div's innerHTML property...
See this fiddle - http://jsfiddle.net/esy1cc8z/
First of all you need to iterate over all form controls in specified DIV:
var ctrls = parent.querySelectorAll("input, select, textarea");
for(var i = 0; i < ctrls.length; i++){
var el = ctrls.item(i);
//...
And then store states of various form controls into DOM elements as attributes (= default values in HTML):
var type = el.getAttribute("type");
//For checkbox
//Checkbox
if(type == "checkbox"){
if(el.checked)
el.setAttribute("checked", "checked");
else
el.removeAttribute("checked");
//Other textual / numeric input types
} else {
el.setAttribute("value", el.value);
}
Of course if you need usable algorithm then you need to write conditions for all form control types, this is just an example...
Note: this is pure JS solution, using jQuery it may be simplier code...

Using telerik radgrid itemcommand with a radwindow to get initial data for InsertMode Dropdowns

I need some assistance with the telerik radgrid's itemcommand to get some information from a user adding a new record prior to opening the Grid in Insert mode. I have the itemcommand working to open a radwindow, present the user with a dropdown list of items to select from and a radbutton to select the value and close the radwindow, then this value is passed back to the parent page in javascript. All the values are passed down and I can use the alert function to validate this.
So at this point I need to continue the flow to open the radgrid in insert mode and filter a dropdown in the insertmode using the value from the radwindow noted above. In order to use this value I'm attempting to assign it to a hidden radtextbox for use in the ItemDatabound event when the form is loading in insert mode. Unfortunately, the value isn't being set via the javascript in this hidden control and is acting like it is erroring somewhere in the javascript. I feel like I'm overcomplicating this but was hoping for some guidance on what others have done to implement something like this.
<asp:LinkButton ID="addNewRecord" runat="server" Text="Add New Record" OnClientClick="openWin(); return false;" OnClick="InitInsert">Add New Record</asp:LinkButton>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
//<![CDATA[
function openWin(sender, args) {
var oWnd = radopen("ParserFileNewDialog.aspx", "RadWindow1");
}
function OnClientClose(oWnd, args) {
//get the transferred arguments
var arg = args.get_argument();
if (arg) {
var lenderid = arg.LenderID;
var tb = null;
tb = $find("<%=newLenderID2.ClientID %>");
alert(tb.get_text());
tb.set_text(lenderid);
$find("<%=hdnInsertBtn2.ClientID %>").click();
}
}
//]]>
</script>
</telerik:RadCodeBlock>
Any help is greatly appreciated!

What type of control is the newLenderID2 that you attempt to set a value to? With this syntax, it should be a RadTextBox. If it is an asp:HiddenFiel, you need
$get("<%=newLenderID2.ClientID %>").value = lenderid;
If you get an error - what is the error?
Also, you can fire a grid command and pass an argument to it (depending on the command) directly via the grid's masterTableView client-side API and the fireCommand() method: http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html. Thus, you may not need the hidden button at all. A hidden field will suffice for data transmission.

ASP.NET Server Controls - Show Hide Textbox based on Dropdown selection

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

How to populate a drop down with values from JavaScript?

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 :)