I am trying to add or remove dynamic fields within table for use with jquery validation plugin.
Though I could not hide element within table tried to wrap it using as code below.
<tr>
<td>
<textarea style="display:none;">
<textarea>Text for first Text Area</textarea>
<textarea>Text for second Text Area</textarea>
<textarea>Text for third Text Area</textarea>
</textarea>
</td>
</tr>
But my real problem is style="display:none" could able to hide first Text for first Text Area
All other textarea padding within it is visible.
Could someone help me with it ?
I spend 2 days googling to find the answer but unfortunately could not find any solution. Finally I found the solution when I am teaching my nephew to write HTML code. Simply replaced < with < and > with > then walla, it works.
Thanks everyone who tried to help me.
<tr>
<td>
<textarea style="display:none;">
<textarea>Text for first Text Area</textarea>
<textarea>Text for second Text Area</textarea>
<textarea>Text for third Text Area</textarea>
</textarea>
</td>
</tr>
Related
the first column is clickable and works fine. But now, I'd like to make the entire row clickable based on that same URL. And as each row prints, I'd like each row clickable with that respective URL that is dynamically created.
Sort of like wrapping all the td's for each row within "< a > < /a >"
But not sure how to do ... I saw an example using a databind click in the < tr >. But I'm not sure how to wrap all the tds within that URL, etc.
TIA.
<tbody data-bind="foreach: items">
<tr>
<td style="width: 300px"><h4><a data-bind="text: Name, attr: {href: $root.rootBaseUrl() + 'Items/' + ID}"></a></h4></td>
<td style="width: 400px"><h4><span>Link this as well</span></h4></td>
<td style="width: 400px"><h4><span>Link this as well</span></h4></td>
</tr>
</tbody>
I have below view which generates PDF invoice using MvcRazorToPdf library
<table border="0">
<tr>
<td>
<h1>Company Name </h1>
</td>
<td>
<div style="text-align:right;margin-right:0px;">
Invoice
</div>
</td>
</tr>
</table>
<hr/>
<div>
#Model.InvoiceNum
</div>
Above code generates below view in pdf
But how much ever I style the above div within td for invoice, I am not able to move the Invoice text to the right side of the pdf. I've tried adding link to bootstrap.css which doesn't work either. Anyone have any solution for this? Has anyone worked on styling the pdf with MvcRazorToPdf librabry?
Your text alignment is being respected, its just that by default, you table and its cells will be collapsed to fit the content (easy to check by using your browser tools to inspect the elements).
Give your table (or its cells a width), for example
<table style="width:100%;">
However, using <table> elements is not good practice (refer Why not use tables for layout in HTML? and Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS.). Instead you can use floats or relative/absolute positioning, for example
<div style="position:relative;">
<h1>Company Name</h1>
<span style="position:absolute;right:0;bottom:0">Invoice</span>
</div>
or
<div>
<h1 style="display:inline-block">Company Name</h1>
<div style="float:right;margin-top:40px;">Invoice</div>
</div>
I'm new to MVC - I'm creating a simple survey application with a Survey Model and Controller and multiple Views in which users fill out their answers.
In my views I have a table of radio buttons, where each row is a group and the user has to select one radio button in each row. When the page loads, I want none of the radio buttons to be checked, forcing them to make a selection (throwing an error if they do not).
The problem is that the last radio button in each row is being selected somehow by default. I even specifically set one of the other buttons to checked to see what would happen, but when it loads it's still the last one that is checked. I have no idea why that is happening, how to change it, or even then what would be the best way to validate a selection is made in each group when the user tries to move on.
My Survey Model contains these STRING properties: mddbccu, mddtfuu, mddbccub, mddtfuub. There is nothing in my model except the properties.
This is an example of one of the rows of radio buttons in a view:
<tr>
<td>#Html.DisplayNameFor(Function(model) model.mddtfuu)</td>
<td>
<div><input name="mddtfuu" id="mddtfuu0" value="Never" checked="" type="radio"></div>
</td>
<td>
<div><input name="mddtfuu" id="mddtfuu1" value="Rarely" checked="" type="radio"></div>
</td>
<td>
<div><input name="mddtfuu" id="mddtfuu2" value="Sometimes" checked="" type="radio"></div>
</td>
<td>
<div><input name="mddtfuu" id="mddtfuu3" value="Usually" checked="" type="radio"></div>
</td>
<td>
<div><input name="mddtfuu" id="mddtfuu4" value="Always" checked="" type="radio"></div>
</td>
</tr>
Remove "checked" property from each radio button.
Thats it. Simple.......
i.e:
<input name="mddtfuu" id="mddtfuu0" value="Never" type="radio">
We need to display only 1 of the labels depending on condition. This is done through Javascript. That works fine, but the issue is we get a 508 compliant error saying 1 form element has 2 labels. The issue is with "for" in the table. Removing it also shows a 508 error. I tired to change the second label for to for="org.dateOfReg", but still the same. Is there a way to have only 1 label and pass the "for" and "name" values dynamically from javascript? Or is there any other option? Please help. Appreciate it a lot.
<tr id="showDates">
<td id="TypeDate1"><s:label for="dateOfReg" name="dateofReg" value="Date of Interest" /><span class="required" >*</span> :</td>
<td id="TypeDate2"><s:label for="dateOfReg" name="dateofReg" value="Date of Completion" /><span class="required" >*</span> :</td>
<td id="typeDatePick">
<sj:datepicker showButtonPanel="true" id="dateOfReg" name="org.dateOfReg" displayFormat="mm/dd/yy" label="Date of Interest" changeMonth="true" changeYear="true" size="7"/>
</td>
</tr>
Thanks
Harry
Here is what you can do to resolve this. Just have one label and change its innerHTml using JavaScript instead of hiding the label.
<tr id="showDates">
<td id="TypeDateLabel"><s:label for="dateOfReg" name="dateofReg" value="Date of Interest" /><span class="required" >*</span> :</td>
<td id="typeDatePick">
<sj:datepicker showButtonPanel="true" id="dateOfReg" name="org.dateOfReg" displayFormat="mm/dd/yy" label="Date of Interest" changeMonth="true" changeYear="true" size="7"/>
</td>
</tr>
<script language="javascript">
function TriggerToChangeLabel(triggerCondition)
{
if (triggerCondition)
$("dateOfReg").innerHtml = "Date of Interest";
else
$("dateOfReg").innerHtml = "Date of Completion";
}
</script>
But keep in mind that even though it makes the code 508 compliant; Dynamically changing the label text goes against the spirit of the accessibility. Better way to implement the same is it to have two date fields ("Date of Interest" and "Date of Completion"). Upon submission enforce "required" edit on one of the field based on the condition you have for the label change.
I started to work on an ASP.NET MVC4 solution with the SPA template (Single Page Application).
The starting template manage some todo lists with a kind of post-it design.
I slightly modified the template this way:
no more post-it design for dislaying elements
but a table to list all elements + delete + edit button on each element
at the end of the table: an add button
I have now the ability to edit one element in a form tag like this:
<form data-bind="with: currentTodoList, validate: true">
<h1>Edition</h1>
<table>
<tr>
<td>ID</td>
<td><b data-bind="text: todoListId"></b></td>
</tr>
<tr>
<td>User ID:</td>
<td><input class="required" data-bind="value: userId" /></td>
</tr>
<tr>
<td>Title:</td>
<td><input class="required" data-bind="value: title" /></td>
</tr>
<tr>
<td>Category:</td>
<td><input data-bind="value: category" /></td>
</tr>
</table>
<p>
<button data-bind="click: $parent.saveTodoList">Save</button>
<button data-bind="visible: todoListId, click: $parent.deleteTodoList">Delete</button>
<button data-bind="click: $parent.showGrid">Cancel</button>
</p>
</form>
As you can see above, I set the validate data-binding on the form tag and I have some input element with the class required.
When I test this implementation it doesn't work as expected. Example:
If I clear (empty) the userId field (which is required) I have a red validation message (picture 1). OK.
If I fill this userId field again, the red validation messaged disappeared. OK.
Then if I clear (empty) the title field (which is also required) I have the red validation message next to the userId field (picture 2). NOK.
The inverse is also true: userId <--> title. Any idea where is the problem?
Here is a link to download my test VS2012 solution to reproduce the problem.
Ok, so I played with your markup a little, with slight modification to the view model (not using a list, but editing a single entry).
Take a look at this jsfiddle - http://jsfiddle.net/Zxjrb/1/
I have added a span for validation message for ID and User ID, skipped the span for Title and Category.
<span data-bind='visible: todoListId.hasError, text: todoListId.validationMessage'> </span>
You can see the messages coming up, when Id or UserId field being empty, and that not happening for the title/category fields.