jQuery Forum

removing and appending rows to tables
[1Reply]
- 27-Nov-2012 06:02 PM
- Forum: Using jQuery
I have 4 tables on a page with similar structure. Differences are the table id's and the number of tds per row, two tables have 2 per row, the other two have 4. Basic structure is:
1. ```
<table id="mytable"> <tbody> <tr id="tempRowID"> <td class="delete"> <img src="myImage.png" /> </td> </tr> </tbody> </table>
```
And the query is:
2. $(document).on('click', 'table td', function () {
4. var blankRowShort = "<tr id='tempRowID'><td colspan = 2>No Information entered.</td></tr>";
5. var blankRowLong = "<tr id='tempRowID'><td colspan = 4>No Information entered.</td></tr>";
6. var currentTable = $(this).closest('table').attr("id");
8. $(this).parent().remove();
10. if ((currentTable == "IDTable") || (currentTable == "aliasTable")) {
12. $(this).parent().append(blankRowLong);
13. }
14. else {
15. $(this).parent().append(blankRowShort);
16. }
18. });
So the function works great, until the if statement. Line 8 removes the row but then I need to add one of the generic 'no info' rows depending on which table and nothing I try seems to work. Some other things I've tried are:
1. $(this).closest('table').append(blankRowShort);
2. $('"#' + currentTable + '"').parent().append(blankRowLong);
Some ideas would be great, thank you.

Unobtrusive - adding a method, how to find a dependent property
[4Replies]
- 25-Oct-2012 05:47 PM
- Forum: Using jQuery Plugins
I am writing an MVC app and I have created a custom validator, now I am trying to write the client side. The intent is "if the dependant property is true (it's a radio") then this value must not be 0".

I am currently unable to get the value of radioValue, so the program fails at that point. What am I doing wrong?

$.validator.addMethod("requiredifyes", function (val, elem, param) {
var dependantProperty = param;
var radioValue = document.getElementByName(dependantProperty).value;
var counterValue = val;

if (dpElement = true) {
if (counterValue = 0) {
return false;
}
}
return true;
});

$.validator.unobtrusive.adapters.addSingleVal("requiredifyes", "othervalue", "requiredifyes");

Validator - new rule for conditional validation.
[0Replies]
- 22-Oct-2012 03:52 PM
- Forum: Using jQuery Plugins
I have a radio button pair, some text boxes, a button tied to a function , that pulls the values out of the textboxes, builds a table row with the data and displays the data in a table and advances a hidden counter, then adds the row to the table, and finally is the table. This is an ASP.NET / MVC app using unobtrusive and the jquery validate plugin.

I am trying to add a rule that says, if the 'Yes' radio is checked, the counter needs to be 1 or higher. Here is the code I have:
2. $.validator.addMethod("min_counter", function (value, elem) {
3. return value > 1;
4. });
7. $("#ROCounter").rules("add", {
8. min_counter: $("#RO_Yes").is(":checked"),
9. messages: {
10. min_counter: "Please provide further information"
11. }
12. });
and here is some HTML that corresponds:

Radio buttons:
2. <div class="editor-field2">
3. <input class="commentBox RadioIf" data-val="true" data-val-required="Field is required." id="RO_Yes" name="RO" type="radio" value="True" />
4. <label for="RO_Yes">Yes</label>
5. <input checked="checked" class="commentBox" id="RO_No" name="RO" type="radio" value="False" />
6. <label for="RO_No">No</label>
7. </div>
8. <div class="editor-label2">
9. <label for="RandomQuestion">Have you EVER had a cat?</label>
10. </div>
The counter:
1. <div>
  <input data-val="true" data-val-number="The field ROCounter must be a number." id="ROCounter" name="ROCounter" type="hidden" value="" />
  </div>
I am getting an error: Cannot read property 'settings' of undefined, which is pointing to the jquery.validate.js file line 119:
2. rules: function(command, argument) {
3. var element = this[0];
5. if (command) {
6. var settings = $.data(element.form, 'validator').settings;
7. var staticRules = settings.rules;
Any assistance would be appreciated. Thank you.

Validator - add a 'RequiredIf' method/rule
[0Replies]
- 18-Oct-2012 05:36 PM
- Forum: Using jQuery Plugins
I am working on an ASP MVC3 project, using validate and unobtrusive jquery. I have several area on a page that I need to create custom validation for, and ensure it doesn't break anything else. Currently I have several sections, each have a radio button pair, some text boxes, a button and a table. User fills in the text boxes, hits the button, and I have a function that puts the data from the textboxes into a new row on the table. I also have a counter that is advanced once with each button press.

The validation needs to be along the lines of "If the radio button returned true, the counter needs to be > 1.

I wrote this function that seems like it would work, but I believe I need to re-write it so it is tied into the existing validation, hence the need to add a method or rule:
2. $(document).ready(function () {
3. $("#nextBtn").click(function () {
4. var rows = $("#ROTable tr").length;
5. if ($("#RO_Yes").is("checked") && (rows < 3))
6. {
7. $(this).closest("div.historyCollection").css("backgroundcolor: #ff0000;");
8. }
9. });
10. });
I have looked around and I found a section in this site discussing Rules (dependant value) which seems like it may fit. Butbecause I am pretty new to this stuff, I wanted to poll the experts before I look too hard in one direction. Thank you for reading.

EDIT: I have been playing around and I came up with this:
2. $(document).ready(function () {
3. $("ROCounter").rules("add", {
4. required: $("#RO-Yes").is(":checked"),
5. messages: {
6. required: "Please enter further information"
7. }
8. });
9. });
but it broke all the validation and caused an error in the jquery.validate.min.js file:
" TypeError: Cannot read property 'form' of undefined"

Translate function into a new validation rule
[1Reply]
- 11-Oct-2012 06:50 PM
- Forum: Using jQuery
I wrote a function to validate a section of a form. The intention is, when the form submit button is clicked, ensure there are at least 3 rows in the table, if the radio button with a value of true is clicked.

Here is the basic HTML structure:
2. <form id="MyForm" action="/" method="post">
4. <div class="Question">
5. <div class="RadioBtns">
6. <input type="radio" id="Radio_Yes" name="Radio1" value="true" />Yes
7. <input type="radio" id="Radio_No" name="Radio1" value="false" />No
8. </div>
9. <div class="TextFields">
10. <input type="text" id="field1" />
11. <input type="text" id="field2" />
12. <input type="text" id="field3" />
13. </div>
14. <table id="Table1" class="Data-Table">
15. <tr>
16. <th>Name</th>
17. <th>Age</th>
18. </tr>
19. <tr>
20. <td colspan=2>No Data Entered</td>
21. </tr>
22. </table>
23. </div>
24. <p>
25. <input type="submit" value="Add to Database" />
26. </p>
27. </form>
Here is the function:
2. $(document).ready(function () {
3. $("#SendBtn").click(function () {
4. var rows = $("#Table1 tr").length;
5. if ($("#Radio_Yes:checked") && (rows < 3))
6. {
7. $(this).closest("div.TextFields").css("backgroundcolor: #ff0000;");
8. }
9. });
10. });
It doesn't work and not sure why, but not really a big deal because I need to translate this into a new validation rule anyway. I am looking at doing something like:
2. $("#TxtFld").rules("add", {
3. required: "#Radio_Yes:checked"
4. });
but that also isn't working, so some help would be great. The other issue ios I actually have 7 ".Question" classes, so I am hoping to have one rule that will apply to all questions.

Here is the basic html structure:

Conditional validation tutorial
[1Reply]
- 11-Oct-2012 10:39 AM
- Forum: Using jQuery
Hi there. I am looking for a tutorial on conditional validation. I have 3 sets of radio button/Textarea in a section and on form submission, I need to loop through them, and for any radio buttons returning 'True', the corresponding textarea needs to contain text. If possible, I would like just one function or rule to do all three areas.

Then I have 4 other sections with a radio button pair, and a table. for these, if the radio button is true, there needs to be at least one row in the corresponding table.

So, any links to tutorials, samples, etc would be great. I am new to jquery.

Checkbox not an input?
[1Reply]
- 04-Oct-2012 06:58 PM
- Forum: Using jQuery
Here is a function:
2. $(document).ready(function () {
3. $("input.commentBox").click(function () {
4. if ($(this).closest('div.editor-field2').children('input:checked').val() == "True") {
5. $(this).closest('div.formQuestion').children('div.hidden').slideDown(800);
6. } else {
7. $(this).closest('div.formQuestion').children('div.hidden').slideUp("fast");
8. }
9. });
10. });
It works great if the input item is a radio button, but if I change it to a checkbox with the same class name .commentBox it no longer works. Can someone esplain to me way?

Thank you for reading my post.

defining inputs and classes
[3Replies]
- 21-Sep-2012 02:16 PM
- Forum: Using jQuery
Assuming this markup:
1. <div class="editor">
2. <div class="operations">
3. <input type="button" value="Display" />
4. </div>
5. </div>
What is the difference between these 2 lines? Do the refer to the same button or does the first one refer to the whole .operations div?:
2. $(".operations").click(function () {
3. $("input.operations").click(function () {

How to refer to to different radio button groups in same jquery function
[3Replies]
- 17-Sep-2012 05:47 PM
- Forum: Using jQuery
Hi there, I am creating an online questionnaire with a page full of groups made of:

question
radio buttons (Yes/No)
hidden textarea in a div that appears if the above radio button is yes

This pattern repeats 9 times with a different radio button group each time. I am using the jquery slideDown function to make the hidden textareas appear if the yes button is clicked, but I can not figure out how to write it so it only refers to the radio button group currently clicked. Currently when I click a Yes radio button, all 9 textareas appear, but I only want the textarea associated with the Radio group to appear. Here is some code:

jquery function:

$(document).ready(function () {
$(".commentBox").click(function () {
if ($('input[name=$(this)]:checked').val() == "Yes") {
$(".hidden, this").slideDown(800);
} else {
$(".hidden, this").slideUp("fast");
}
});
});

A couple radio button groups (html):
<div id="HistoryQ">

<div class="formQuestion">
<div class="editor-label">
@Html.LabelFor(model => model.HistoryModel.AbuseComment)
</div>
<div class="editor-field">
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbusePast, "Yes", new { @class = "commentBox" } )
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbusePast, "No", new { @class = "commentBox" })
@Html.ValidationMessageFor(model => model.HistoryModel.ChildAbusePast)
</div>
<div class="hidden">
<textarea class="abuseComment" cols="5" rows="4"></textarea>
</div>
</div>

<div class="formQuestion">
<div class="editor-label">
@Html.LabelFor(model => model.HistoryModel.CurrentAbuseComment)
</div>
<div class="editor-field">
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbuseCurrent, "Yes", new { @class = "commentBox" })
@Html.RadioButtonFor(model => model.HistoryModel.ChildAbuseCurrent, "No", new { @class = "commentBox" })
@Html.ValidationMessageFor(model => model.HistoryModel.ChildAbuseCurrent)
</div>
<div class="hidden">
<textarea class="abuseComment" cols="5" rows="4"></textarea>
</div>
</div>

I am pretty sure it has something to do with the THIS keyword being used incorrectly. Anywho, thank you for reading my post.

Response title

Attachments

jQuery Forum

Activity Trend

<div>
	<input data-val="true" data-val-number="The field ROCounter must be a number." id="ROCounter" name="ROCounter" type="hidden" value="" />
	</div>