Duplicating a repeating table row in livecycle designer - javascript

I have a table on one page in a Livecycle Designer form and would like the repeating row to duplicate to another table on a different page. I have this working on the first table on the first page to the table on the second using the exit event however, if the same information on the second table stays the same, because it is on the exit event, it does not copy to the new table on page 3.
I have this code in table 1 on page 1 on the exit event which works:
xfa.resolveNode("Month2.Performancegoals2.updates.details[" + this.parent.index + "]").projectName.rawValue = this.rawValue;
I thought this code would work using a button which unhides page 2
xfa.resolveNode("Month1.Performancegoals2.updates.details[" + this.parent.index + "]").projectName.rawValue = xfa.resolveNode("Month2.Performancegoals2.updates.details[" + this.parent.index + "]").projectName.rawValue
but this does not work. Actually when a value is placed in the field and the button is clicked, the entered value disappears.
Can anyone help? I'm out of time!

OK, looks like you're assigning values backwards. Values in Javascript are assigned from right to left. So, whatever is on the right of the '=' get put into the left side.
e.g.,
x=5; //assigns the value 5 to x
y=x; //assigns whatever is in x to y
Month1 = Month2; //Month2 is assigned to Month1.
If Month2 is blank, then Month1 becomes blank

Related

jQuery DataTable : Delete row and reload

Now, I am working with jQuery DataTable. Everything is going well in intializing data tables with javascript data array.
In my table, it included remove row button. When I clicked the Remove button of each row, I delete record using following function.
function removeRow(itemList, recordIndex){
itemList.splice(recordIndex, 1);
dataTable.clear();
dataTable.rows.add(itemList);
dataTable.columns.adjust().draw(false);
}
This function performed well with no error. At that, I set false to draw() function to prevent going to first page when delete records in any other page.This one also working for me.
The problem is, when my itemList has 11 records, and I go to second page of data table and delete the 11th record.
So, my itemList will left only 10 record and My data table should show the first page of paging.
But, jQuery data table is not doing that. It still have in second page with no records.
I don't know how to fix that one. I want to show previous page after delete every records from current page.
I know `draw()`` function without false parameter will go to first page. But it go to first page in every deletion.
I only want to go to previous page, when I deleted all records from current page.
Please, help me. Thanks.
I found an hacky way to get the previous pagination when the current has been emptied.
It is specific to jQuery DataTable, since using it's class naming.
Try it in CodePen.
function removeRow(recordIndex){
// Get previous pagination number
var previousPagination= parseInt( $(document).find(".paginate_button.current").data("dt-idx") ) -1;
// Splice the data.
data.splice(recordIndex,1);
myTable.clear();
myTable.rows.add(data);
myTable.columns.adjust().draw(false); // May ajust the pagination as empty... `.draw(false)` is needed.
// Decide to redraw or not based on the presence of `.deleteBtn` elements.
var doIdraw=false;
if($(document).find(".deleteBtn").length==0){
doIdraw=true;
}
myTable.columns.adjust().draw(doIdraw); // Re-draw the whole dataTable to pagination 1
// If the page redraws and a previous pagination existed (except the first)
if(previousPagination>1 && doIdraw){
var previousPage = $(document).find("[data-dt-idx='" + previousPagination + "']").click();
}
// Just to debug... Console.log the fact that only one pagination is left. You can remove that.
if(previousPagination==0 && doIdraw){
}
}
Notice that I used:
#myTable as the table id
.deleteBtn as the delete buttons class
data as the dataTable data
I removed all console.log() and example related code in the code above (but not in CodePen).
"Delete this →" button handler is:
$("#myTable").on("click",".deleteBtn",function(){
var rowElement = $(this).closest("tr");
var rowIndex = myTable.row(rowElement).index();
removeRow(rowIndex);
});

Jquery each loop showing first value as zero or NaN

I am using jquery to gather data from a dynamically created table via Jquery. I am able to get the data, but now I want to sum up the fields and put the result inside a text field or label etc dynamically when I press enter. I am using the following code:
$("#iq").keypress(function(e)
{
if(e.which==13)
{
var tot=0;
$('#tab .itemtotal').each(function()
{
tot = tot + parseInt($(this).html());
});
$("#totalamount").val(tot);
}
});
My problem is that the value showing in the textfield is zero or NaN for the first time and after that its calculating correctly. I used the same code and associating it with a button and checking its click event and its working properly and showing first item also.
Any suggestions? If need some more clarification let me know. Thanks in advance.

How to sort by a second column while keeping the sorting on the first column?

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.

How to add Numeric Pager in Google Table Chart?

recently i am adding a Google table chart to my project. my task is to add a numeric pager in it. but i only can add
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';.
it only shows next and previous button. so how can i change it to numeric paging. thanks in advance.
You would have to create a custom event handler for your chart. For instance, you can use a dataView to get 10 rows of data as follows:
var dataView = new google.visualization.DataView(data);
var page = 1;
dataView.setRows(page * 10 - 9,page * 10);
You can then create buttons in any way you'd like (images, etc.) below the chart, and attach an event to each of them. You can have that event show the page number in between, and then when you click the < or > buttons, it will change the page and the number through a function call, such as:
page = page + 1; // Obviously -1 for the minus button
dataView.setRows(page * 10 - 9,page * 10);
Then you'd write the 'page' to your document where the page number exists. You can do a current/max page value by looking at the max rows of data using:
var maxPage = data.getNumberOfRows();
Then you can write some sort of an error trapping function (for if they click "back" on the first page, or try to move to "next" on the last page). Or you can grey out the buttons. Or you can have it loop to the last page. Or whatever.
Whenever you make a change, you just redraw the table using your dataView instead of the actual data.

Adding an input name upon creation of new table row

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.

Categories

Resources