I have an order form I had put together for a client, you can view it here.
As you can see it creates a new row with 5 input fields (per row). Here's my problem, I have this form outputting the form in html format to the clients email for office use. I need to add a "unique name" for each input in the newly created row in order to pass that to the processing and out to the email.
Here is the JS file for adding rows
I know this has to be triggered by the $addRowBtn but I have been at this for awhile now and everything I have tried has just broken the form.
I've tried this example but to no avail:
thisRow.find("input.ClassName").attr("name","newName" + num);
num++;
I will buy the first person that helps with this a cup of coffee or something! It's bugging the ever living crap out of me!!
in your javascript you are setting thisRow as follows
thisRow = $(this).parents("tr");
but it should be
thisRow = $(this).parents("tr").eq(0);
then you can do
thisRow.find("input").each(function(i) {
$(this).attr("name", "newName" + i);
});
Also check what this returns alert(thisRow.find("input").length); it should return 5 since you have 5 input elements in the row.
I hope it works.
Just looking at this, I can see that this is being attached to the "remove row" function. Shouldn't this be fired off on the "add row" function. I'll give it whirl and see what happens.
Also, because each row has a unique identifier (orderType, sample, pattern, etc.), each input gets incremented when a new row is created, can I just assign each one with a starting value like this:
input class="order_type" name="orderType[i]" type="text"
And couldn't I just set up an array for each of the five inputs and loop it through until it hits the "max rows" which is 6?
I just don't know how to push that value "i" off to the newly created inputs on each row.
Related
The Problem
Hi, I am making a table in which I have two buttons, View and Update for each row. I am generating the rows in one for loop. Since I am using innerHTML, Instead of adding the onclick listeners there, I make another for loop after the first one and add the event listeners there. The event listeners are added to all rows. However, the parameter( Row number) passed in functions for all rows is the number for the last row.
Not sure why this is happening, any clues or advice will be helpful. I will leave the relevant code and debugging results below.
The Code
Adding New Rows
table.innerHTML="";
var count=1;
querySnapshot.forEach((doc) => {
var innerhtml='<tr id="row">.....</tr>';
//Append the new row
table.innerHtML=table.innerHTML+innerhtml;
//Assign new ID to row
document.getElementById("row").id=count.toString()+"row";
//Increment Count for next row/iteration
count=count+i;
});
Adding event Listeners for Each Rows
for(var i=1;i<count;i++){
console.log("Adding functions for row : "+i);
//Get/Generate ID of rows (ID was assigned with same logic)
var cchkid=i.toString()+"chk";
var uupdateid=i.toString()+"update";
console.log("Adding functions for row : "+cchkid + " "+uupdateid);
//Add Listeners for Each button in row i
document.getElementById(cchkid).addEventListener("click", function(){
alert("adding check function for id : "+i);
check(i-1);
});
document.getElementById(uupdateid).addEventListener("click", function(){
alert("adding update function for id : "+i);
update(i-1);
});
}
Debugging by using Console Log & Inspect
Count : 3
Adding functions for row : 1
Adding functions for row : 1chk 1update
Adding functions for row : 2
Adding functions for row : 2chk 2update
Inspect
Using inspect element, I can ensure that all rows have separate id's
So far everything looks good, However, when console logged inside the said functions, all rows give the same value for the passed parameter.
Console Log after clicking on two different rows
2 Display data for user ID: 1
This should be :
Display data for user ID: 0 for first row
Display data for user ID: 1 for second row and so on
I cannot figure out what's wrong here, kindly help this newbie out. Thanks!
The answer was simple but took me a little while to figure out. When assigning eventlisteners in a loop, I was using var for the iterator. That is, for(var i=0;i<length;i++). However Inside the listener, the var i doesnot exist even if the listener is added inside the loop because of the scope of var in JS.
for(var i=0.......){
button.addeventlistener("click",function(){ myFunc(i); }));
}
Changing the var here to let does the trick here. That's it.
I have many documents in Notes, all of the documents have a different form, like this picture :
(possibly like pic 1, pic 2, or pic 3)
How can I write the code in Xpages?
use the "computed field"? Or use the "input text"?
I used the "input text".But only for one item, not for all.
var doc = purchase.getDocument();
var A0 = doc.getItemValueString("DAY_A0");
if(A0 != 0){
return "Division processing";
}
If the form not only has one item, like the pics. How can I write the code to append all of the items?
I'm making the following assumptions here:
You have 10 fields in the document with numbers that might or might not be > 0
The 11th value (Total) shall be computed
You want to show one document at a time, not a list
You know how to add a data source to a page
Version 1:
Create a regular XPages form, use the wizard when adding the document data source. It now would show also the field with 0 values
Click on each ROW and change visibility property to computed (make sure you hit the row, not the cell or field) and add a visibility formula based on the field oof that row. Something like doc.DAY_A0 > 0
Add a computed field where you add the values of all 11 fields
done
Version 2:
in the page open event, get a handle on the document and compute a scoped variable that only contains the values you are interested in. Could be messy since you need a label (that is not your field name) and a value
Use a repeat control to render the values
Hope that helps
I am working on table that is built dynamically depending on filters chosen. I currently am able to sort by any row that I click. The problem is I need the first row that I sort by to stay when I click on another row, so that the second row I click is sorted within the means of the first row. An example I have two columns, first name and last name.
**FirstName** **LastName**
Bob Zimmer
Bob Anderson
Kathy Walege
Kathy Ball
So say I click on the first name row. It will stay the same since the first names are already in order. But when I click on the Last Name row I want the following to happen.
**FirstName** **LastName**
Bob Anderson
Bob Zimmer
Kathy Ball
Kathy Walege
I currently have it working so it only sorts by one column at a time. I am using both javascript and vb.net to get this to work with my code.
Here's the javascript:
function SortColumn(col)
{
__doPostBack('SortBy',col);
}
Here's the vb function that calls the javascript function:
Private Function AddSortLinkToColumn(ByVal sSortColumn As String) As String
Dim sVal As String = ""
sVal = "<a href=""javascript:SortColumn('" & sSortColumn & "');""><font face=""Webdings"">"
If m_sSort <> "" AndAlso Split(m_sSort, "-")(0) = sSortColumn AndAlso m_sSortDrxn = "ASC" Then
sVal &= "5"
Else
sVal &= "6"
End If
sVal &= "</font></a>"
Return sVal
End Function
This is currently taking the column that is being clicked and matching it up with my global sort variable. If they match it displays an up arrow. If it fails it displays a down arrow.
I know that I need to somehow keep track of the first column that was clicked, but I am not sure how to do so. I have tried it on the vb.net side and javascript sides by adding another column to the sort but it doesn't do me any good if I can't get the first column value to stay!
How can I keep the first column's sort and then sort by the second column as well? Any help would be greatly appreciated!
UPDATE
With the help of the answer listed below I finally got this working! Here's the code:
function SortColumn(col)
{
<% if m_sSort = nothing then %>
__doPostBack('SortBy', col);
<% else %>
__doPostBack('SortBy', document.getElementById("SortField").value + "," + col);
<% end if %>
}
The m_sSort was a public variable on the vb.net side. The "SortField" was the name of the hidden field where the m_sSort value was being stored.
Add a hidden field to the page called prevCol or something like that. Since it is a hidden field it will be posted back with the form.
In your postBack event handler, make sure to consume that hidden field and replace its value with the currently clicked column.
In this way you will have the column that is clicked as well as the column that was previously clicked. If you check the value and it is empty you know you are starting off.
Your remove sort button would then clear the prevCol field to ensure that you are starting fresh.
So your flow would look like this:
First column click: prevCol is empty so you sort by the currently clicked column and write its identifier to the prevCol field on the
returned page.
Second column Click: prevCol now has a value. So first sort by that value, then sort by the supplied column. Make sure you write the
supplied column to prevCol in the return.
Xth column Click: Same as second click. Inherintly this is going to make the prevCol the first column that is sorted each time.
When you click your remove sort button, ensure you are not writing a value to prevCol and thus starting the cycle over.
In this way you are kind of caching your previous column on the client with each response so that it is always present during post back.
EDIT:
I thought it would be simple to alternatively do this entirely on the client side with jQuery as long as the server did not need to know the order of the rows.
So I spent some time thinking about how this would be done using jQuery and I found it was a bit more challenging than I originally anticipated.
with some help from James Padolsey I was able to easily sort the table rows, but the logic of sorting based on the previous column was a bit strange.
This is what I ended up with.
I have no idea how can I solve my problem. I have Django template with two models. I put these models in inlineformset_factory.
Example
DhcpConfigFormSet = inlineformset_factory(Dhcp, IPRange, extra=1)
and I displayed this form in template like this pictures
form http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/601592_10151469446139596_1335258068_n.jpg
I want implement event, when I click on plus stick (marked field on pictures), show one more row (ip initial field, ip final field and delete check box).
I tried to do it on this way :
$(document).ready(function() {
$(".plusthick-left").click( function() {
var tr= $(".sort-table").find("tbody tr:last").length;
$(".sort-table").find("tbody tr:last").after($(".sort- table").find("tbody tr:last").clone())
});
but I have problem, because I just made copy of last row and took same attributes values?
My question is : How can I make new row, and set all attributes with values of last row increased by one.
For example:
<input type="text" id="id_ip_initial_0_ip_range">
This is field that generated form in template, and I want make field with id value like this:
<input type="text" id="id_ip_initial_1_ip_range">
How can I do it? :)
I'm having trouble figuring out how to do a simple Javascript task on fields in a table created with Rails 3.
My table has characteristic rows that the user adds using a form below (which updates the database and reloads the table partial).
The number of columns in the table is based on the number of attributes submitted in a different form. No matter how many columns are in a row, there is also a Total column after them. Each cell in the table has a text_field input, with an ID that is based on the row object id and the column object id.
What I'm trying to do is create an OnChange event for each of those cells, so that when a field value changes, the Total column gets updated with the total value in the text_field inputs of all cells in that row.
I don't know how to pass the Rails objects to Javascript (so I can cycle through the IDs), I can't figure out how to get the DOM element names and values if I use an action in the controller, and I don't know how to use RJS to do this either. Can anyone offer any help on how to do this? Thank you!
Sarah
If you use jQuery, you can set a class on the textboxes and listen to the change event on it.
example:
<input type="text" id="WhateverXXX" class="MyValue" />
<script type="text/javascript">
$(function(e) {
$('.MyValue').change(function(e) {
// update the total
});
});
</script>
In jQuery it'd be easy to iterate over all elements with the same class, so proper design of your document will help here.
Maybe something like this:
$('.thing_to_change').live('change', function() { retotal(); });
Your retotal function can be similar:
var total = 0;
$('.thing_to_change').each(function() { total = total + $(this).val() });