I have a checkboxlist on a page as below.
<asp:CheckBoxList runat="server" ID="lstFeatures" RepeatDirection="Vertical"></asp:CheckBoxList>
The backend code looks like so.
private void MakeRegionCheckboxes(ReportRegion region, int margin)
{
foreach (ReportRegion subregion in region.childRegions)
{
ListItem item = new ListItem();
item.Text = subregion.Name;
item.Value = subregion.Name;
item.Selected = subregion.DefaultSelection;
item.Attributes.Add("style", "margin-left:" + margin.ToString() + "px");
lstFeatures.Items.Add(item);
MakeRegionCheckboxes(subregion, margin + 30);
}
}
When this runs on a blank project, it indents the "subregions" nicely as the style:margin-left:30px gets rendered in a span as you can see.
<td>
<span style="margin-left:30px">
<input id="lstFeatures_1" type="checkbox" checked="checked" name="lstFeatures$1">
<label for="lstFeatures_1">Member Information</label>
</span>
</td>
However, when I run the same code in my main project it doesn't render the spans and therefore the margin isn't getting set. All I get is this.
<td>
<input id="ctl00_pg_BuildReport_lstFeatures_1" type="checkbox" checked="checked" name="ctl00$pg$BuildReport$lstFeatures$1">
<label for="ctl00_pg_BuildReport_lstFeatures_1">Member Information</label>
</td>
It's the same framework on both projects (3.5) the only difference is the main project has a masterpage, and maybe some extra panels, but I just wondered what would stop the span on getting rendered? Any help would be useful. Thanks!
Try this and see if it has any effect:
item.Attributes.CssStyle.Add("margin-left", String.Format("{0}px", margin));
Related
I inherited a form that includes a RadioButtonList structure that's similar to this (names changed to protect the innocent):
<asp:RadioButtonList id="ChicagoCubsInfield" RepeatDirection="Vertical" RepeatColumns="1" XPath="somePath">
<asp:ListItem Value="Tinker" Text="Tinker (Shortstop)" />
<asp:ListItem Value="Evers" Text="Evers (Second Base)" />
<asp:ListItem Value="Chance" Text="Chance (First Base)" />
</asp:RadioButtonList>
When it renders in a browser, of course, it looks something like this:
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker (Shortstop)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers (Second Base)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance (First Base)</label></td></tr>
</table>
Here's my problem: I need it to look like this (note the difference in table cell rendering):
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker</label></td><td>(Shortstop)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers</label></td><td>(Second Base)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance</label></td><td>(First Base)</td></tr>
</table>
In other words, I need the name and (position) separated out into separate columns, but they still need to align by row. Is this possible in a RadioButtonList?
I've tried making them into individual RadioButton objects, but after doing so, I started getting the following:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
I tried messing around with validation (including setting the CausesValidation property to "False"), all to no avail.
Note: I am not as concerned about the validation error as much as I am about the table rendering; that is more important (unless, that is, fixing the validation error helps fix the rendering issue).
What would be the best way to tackle this?
Thanks in advance . . .
Edit: I was able to recreate what I wanted by using straight client-side <input> tags, but this is not ideal. I would much prefer using server-side <asp:RadioButton>.
I've been doing some digging, and it appears that the reason why my RadioButton tags are failing validation is because of the ct100 prefixes that are concatenated to the beginning of the ID/Name tags. When the page is working (with the RadioButtonList) the IDs for each ListItem seems to have a "ct100_Content_" prefix, but the name has a "ct100$Content$" prefix.
The error I'm getting (when trying to use individual RadioButtons) is:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
From what I'm seeing, I think the control is looking for "ctl00_Content_ChicagoCubsInfield_0" (note the "_" instead of the "$").
How do I force the ID to use the underscores instead of dollar signs? I need to keep it local to these tags, as I believe settings are used elsewhere (again, this is not my form), and I don't want to break anything else.
Edit: So much for that theory. I came across the "ClientIDMode" attribute, set it to "Static", and explicitly set my IDs. No dice. The digging continues . . .
This may be answer what you are looking for:
$( document ).ready(function() {
$('label[for^="ChicagoCubsInfield"]' ).each(function() {
var data = $(this).text();
var arr = data.split('(');
$(this).text(data.substring(0, data.indexOf("(")));
$(this).parent().parent().append("<td>(" + arr[1] + "</td>");
// alert(arr[0] + " : " + arr[1]);
});
//alert( $('#ctl00_Content_ChicagoCubsInfield').html());
});
See Demo:
Demo Here
When all was said and done, here's what I ended up doing . . .
I added this to my <script>:
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(0)').append(<td>(Shortstop)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(1)').append(<td>(Second Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(2)').append(<td>(First Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr td').css([misc formatting goes here]);
This did exactly what I wanted. Now I can format the table at my leisure.
I have two exactly radio button lists in my page, top and bottom. If I select a radio button in the top list, I would like the bottom list make the same change. Is there any way I could achieve this synchronization?
My radio button lists are in a content page.
<asp:RadioButtonList ID="rblVerification1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="V">Verified</asp:ListItem>
<asp:ListItem Selected="True" Value="NV">Not Verified</asp:ListItem>
</asp:RadioButtonList>
Update:
I wrote following javascript function, but it doesn't work. The first alert return 34, a werid number, I am expecting 2. The second alert return undefined. Can anybody tell what I did is wrong?
function rblVerificationClicked(source, destination) {
alert(source.length);
var selectedValue;
for (var x = 0; x < source.length; x++) {
if (source[x].checked) {
selectedValue = source[x].value;
break;
}
}
alert(selectedValue);
for (var x = 0; x < destination.length; x++) {
destination[x].checked = false;
}
for (var x = 0; x < destination.length; x++) {
if (destination[x].value == selectedValue) {
destination[x].checked = true;
break;
}
}
}
In page_load, I added
rblVerification.Attributes.Add("OnClick", string.Format("rblVerificationClicked('{0}', '{1}');", rblVerification.ClientID, rblVerification1.ClientID));
rblVerification1.Attributes.Add("OnClick", string.Format("rblVerificationClicked('{0}', '{1}');", rblVerification1.ClientID, rblVerification.ClientID));
Resolved:
I found what caused the problem.
asp:RadioButtonList render as input type=”radio” HTML elements.
So to get asp:RadioButtonList client id, call getElementsByTagName(“input”) which will return an array of radio buttons.
The easiest way is to do this via JavaScript. I created some example code below:
The html:
<div id="list1">
<input id="item1" type="radio" name="list1"/>Item 1
<input id="item2" type="radio" name="list1"/>Item 2
<input id="item3" type="radio" name="list1"/>Item 3
<div>
<br/>
<div id="list2">
<input id="item1" type="radio" name="list2"/>Item 1
<input id="item2" type="radio" name="list2"/>Item 2
<input id="item3" type="radio" name="list2"/>Item 3
<div>
The JavaScript:
$("input[name=list1]:radio").bind("change", function(e) {
var chk = $("div#list2")
.children("input[id=" + $(this).attr("id") + "]");
chk.attr("checked", true);
});
I also created an JsFiddle for it so you can see it in action.
I am starter with Play Framework. I got a problem when i passed parameters.
I want to pass a collection from view to controller. And i do not know how to do this. I always get "null" when i get a collection from view.
My code below:
Code in controller:
public static void create(List<Book> books) throws Exception {
for(Book book : books){
System.out.println(book.get(0).author) // i got null :(
}
}
Code in HTML
Book 1:
<input type="text" name="books.author" />
<input type="text" name="books.title" />
Book 2:
<input type="text" name="books.author" />
<input type="text" name="books.title" />
When i submit, i want to add 2 records into database include Book1 and Book2. Please support me
Thanks
You can make this work by simplying add the array indicator to your HTML code
Book 1:
<input type="text" name="books[0].author" />
<input type="text" name="books[0].title" />
Book 2:
<input type="text" name="books[1].author" />
<input type="text" name="books[1].title" />
I have tested this solution, and it works fine.
Also note that your println will not compile, as you are calling get(0) on the Book object, and not the List object. If you just println book.author, it outputs the author as required.
In case anyone needs an example of the Javascript for dyanmically adding and removing books (JQUERY needed):
<script type="text/javascript">
$(document).ready(function() {
var bookCount=0;
$('#btnAddBook').click(function() {
bookCount++;
//newElem = go up a to the parent div then grab the previous container
var newElem = $(this).parent().prev().clone().attr('id', 'book[' + bookCount + ']');
//for each input inside the div, change the index to the latest bookCount
$(newElem).find("input").each(function(){
var name = $(this).attr('name');
var leftBracket = name.indexOf("[");
var rightBracket = name.indexOf("]");
var beforeBracketString = name.substring(0,leftBracket+1);//+1 to include the bracket
var afterBracketString = name.substring(rightBracket);
$(this).attr('name', beforeBracketString + bookCount + afterBracketString);
});
//insert it at the end of the books
$(this).parent().prev().after(newElem);
$(newElem).find("input").each(function(){
$(this).attr('id', $(this).attr('id') + bookCount);
});
//enable the remove button
$('#btnRemovebook').removeAttr('disabled');
//If we are at 16 divs, disable the add button
if (bookCount == 15)
$(this).attr('disabled','disabled');
});
$('#btnRemoveBook').click(function() {
bookCount--;
//remove the last book div
$(this).parent().prev().remove();
//in case add was disabled, enable it
$('#btnAddbook').removeAttr('disabled');
//never let them remove the last book div
if (bookCount == 0)
$(this).attr('disabled','disabled');
});
});
</script>
<!-- HTML Snippet -->
<div id="book[0]">
<label> Book: </label>
<input type="text" name="books[0].author" value="Author" />
<input type="text" name="books[0].title" value="Title" />
</div>
<div>
<input type="button" id="btnAddbook" value="Add another book" />
<input type="button" id="btnRemovebook" value="Remove last book" disabled="disabled" />
</div>
<!-- REST of the HTML -->
I have a series of checkboxes and I would like to append the text value to a div every time and item gets selected, but I'd also like to remove the item from the div's text when an item is deselected.
I'm guessing the best way would be with some sort of an array? Can I get some guidance on this one?
edit: I should have mentioned this is for an ASP.NET checkboxlist (my bad), so my output looks something like this:
<div id="ctl00_ContentPlaceHolder1_divServices" style="width:450px; height:250px; overflow-y:scroll;">
<table id="ctl00_ContentPlaceHolder1_chklstServices" border="0">
<tr>
<td><input id="ctl00_ContentPlaceHolder1_chklstServices_0" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$0" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_0">Adhesives & Sealants</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_chklstServices_1" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$1" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_1">Air Ambulance</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_chklstServices_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$2" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_2">Air Charter</label></td>
</tr>
</table>
</div>
<div id="selectedServices"></div>
I am actually trying to accomplish two things:
1) colorize (or remove color) of the cell background color when the checkbox is toggled (done this bit)
2) Append or remove the text of selected items when the checkboxes are checked/unchecked
My javascript/jquery code:
function ToggleBGColour(item) {
var td = $(item).parent();
if (td.is('.rowSelected'))
td.removeClass("rowSelected");
else
td.addClass("rowSelected");
}
You can use .map() and Array.join(), like this:
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().text(); //get the <label>'s text
}).get();
$("#myDiv").text(arr.join(','));
});
Whenever a checkbox changes, it'll loop through all checked checkboxes, create an array of their values, then put that as a comma delimited string into the <div>.
This is an example of course, just change the selectors to narrow down to the checkboxes you care about. You can give it a try here.
I'm adding a check box to a page using the following statement;
<script language="C#" runat="server">
protected void Page_Load ( object src, EventArgs e )
{
if (!IsPostBack)
{
CheckBox XChkBox = new CheckBox(); //instance of System.Web.UI.WebControls.CheckBox
XChkBox.ID = "someId"
XChkBox.Text = "someText"
somePlaceHolder.Controls.Add(XChkBox);
}
}
</script>
I need to get the Text attribute of that check box on click. I tried $(this).attr('Text'); inside $('input[type=checkbox]').click(function(){}); but it returns undefined.
Where am I going wrong? Please suggest.
cheers
ASP .NET renders the Text property of the ASP:CheckBox server control, as a label element just after the <input type="checkbox" /> on the generated markup at the client, it looks something like this:
<input id="someId" type="checkbox" name="someId" />
<label for="someId"> someText </label>
You can get the text of the label by:
$("input:checkbox").click(function() {
var $label = $(this).next('label');
alert($label.text());
});
The CheckBox control renders the Text inside a <label> element. The text is not part of the HTML checkbox. If you want to get the text from jQuery, you have to get it from the <label>.
Also, the <label> it generates doesn't actually have an ID. If your CheckBox is named checkBox1, then the HTML it outputs will be <label for="CheckBox1">, and the text is inside that element. I believe the correct jQuery syntax would be:
$('label[for="checkBox1"]').html()
This depends on how you're implementing what you call "text".
If it's like this:
<input id="chkFoo" type="checkbox" text="Check me, fool!" />
Then you can access the text like this:
$("#chkFoo").attr("text")
If you do it like this
<input id="chkFoo" type="checkbox" />Check me, fool!
I think you're out of luck. Put a span around the text if you have to do it this way and grab it like this:
<input id="chkFoo" type="checkbox" /><span id="spnFoo">Check me, fool!</span>
$("#spnFoo").text()