You are viewing limited content. For full access, please sign in.

Question

Question

How do you Trigger the UPDATE of a variable (tables)

Forms Version 10
Updated August 10, 2018
asked on August 7, 2018

(using Laserfiche 10.3, Forms)

Basically,  i have a form that i am reordering the rows of, as I reorder the rows I update the table label to show the move. however... this is not saved after you "submit" and reload the form variables on the next page...

 

now i know that i can use JS to add a row, then delete a row as a means to update the tables but it feels like a really messy and inelegant way to solve the issue... we should be able to call the same updates that are happening in that process. 

$(".testTable tr").each(function(){
        $(this).children("td").first().html( "Item "+($(this).index()+1) );      
        });

 

 

Next form page, same form variable but reverted order of index rows

0 0

Answer

SELECTED ANSWER
replied on August 10, 2018 • Show version history

Just wanted to Reply with my Solution... some code is borrowed from another question someone asked on this forum but they used the "delete row add row" to clean up the tables.

Thanks for the Hints/Help Jason it pushed me in the correct direction to come up with the solution. (sorry i was in a hurry so its a bit ugly and maybe not that elegant but it works well)

/*Hide the actual radio button, so only the radio button label is displayed*/
.moveUpAndDown input[type=radio] {display : none;}

/*Put a border around the radio button label and color its background, so it looks kind of like a button*/
.moveUpAndDown .choice {border-style : outset; border-width : 1px; background-color : lightgray;}

/*Adjust the layout of the radio button label so that it appears centered in the "button"*/
.moveUpAndDown .choice .form-option-label {max-width : 100%; margin-left : 4px;}
$(document).ready(function () {
  
  //run this code when any of the MoveUpAndDown radio buttons are clicked
  $(".testTable").on('click', '.moveUpAndDown input', function() {

    var row = $(this).closest('tr');
    var SwapName=null;
    var SwapDesc=null;

    //if the up "button" on the row was clicked
    if (row.find('.moveUpAndDown input:checked').val() == 'Up')
    {
      var rowswap = row.prev();
      if($(rowswap).find('.Name input').val() != undefined && $(rowswap).find('.Name input').val() != "")
      	{
            //window.alert($(rowswap).find('.Name input').val());
      		SwapName = $(rowswap).find('.Name input').val();
      		SwapDesc = $(rowswap).find('.Desc textarea').val();
      		$(rowswap).find('.Name input').val($(row).find('.Name input').val());
      		$(rowswap).find('.Desc textarea').val($(row).find('.Desc textarea').val());
      		$(row).find('.Name input').val(SwapName);
      		$(row).find('.Desc textarea').val(SwapDesc);
          	$(rowswap).find('.Name input').change();
          	$(rowswap).find('.Desc textarea').change();
          	$(row).find('.Name input').change();
          	$(row).find('.Desc textarea').change();
    	}
    }
    
    //if the down "button" on the row was clicked
    else if (row.find('.moveUpAndDown input:checked').val() == 'Down') 
    {
      var rowswap = row.next();
      if($(rowswap).find('.Name input').val() != undefined && $(rowswap).find('.Name input').val() != "")
      	{
            
      		SwapName = $(rowswap).find('.Name input').val();
      		SwapDesc = $(rowswap).find('.Desc textarea').val();
      		$(rowswap).find('.Name input').val($(row).find('.Name input').val());
      		$(rowswap).find('.Desc textarea').val($(row).find('.Desc textarea').val());
      		$(row).find('.Name input').val(SwapName);
      		$(row).find('.Desc textarea').val(SwapDesc);
          	$(rowswap).find('.Name input').change();
          	$(rowswap).find('.Desc textarea').change();
          	$(row).find('.Name input').change();
          	$(row).find('.Desc textarea').change();
    	}
    } //end of if... else... statement
    
    //cleanup work
    if (row.find('.moveUpAndDown input:checked').val() != undefined) {
      
      //clear the radio button value - sometimes the event function will trigger twice.
      //Clearing the value prevents the previous if statements from being triggered if
      //it runs the function a second time.
      row.find('.moveUpAndDown input:checked').prop('checked', false);  
    } //end of if statement
    
  }); //end of $(".testTable").on('click', '.moveUpAndDown input', function() {
  
}); //end of $(document).ready(function () {

 

0 0

Replies

replied on August 7, 2018 • Show version history

I think rather than trying to rearrange the actual DOM elements, you would be better off moving the data around since everything on the back end is tied to the Field identifiers.

For example, if you move Field1(1) down and move Field1(2) up, they are still the same objects storing the same values so really you are just changing the display, not the data order.

 

To change the order of the data in a way that will hold from one step to the next, you should do something more like the following:

Set two JavaScript variables for each column, store the current values of those fields, then assign the values back to the new fields.

For example,

// Note that the Index of a row is actually 1 off from the number in the
// Field id attribute because I believe those start at 1 instead of 0

// The upper row 'index'
var topRow = 1;

// The lower row 'index'
var bottomRow = 2;

// Store the current values of each row
var topField1 = $('#Field1(' + topRow + ')').val();
var topField2 = = $('#Field2(' + topRow + ')').val();
var bottomField1 = $('#Field1(' + bottomRow + ')').val();
var bottomField2 = $('#Field2(' + bottomRow + ')').val();

// Swap the rows
$('#Field1(' + topRow + ')').val(bottomField1).change():
$('#Field2(' + topRow + ')').val(bottomField2).change():
$('#Field1(' + bottomRow + ')').val(topField1).change():
$('#Field2(' + bottomRow + ')').val(topField2).change():

This is just some rough code since I don't know what your actual process looks like and there's a lot that would need to change for it to work correctly, but it should hopefully give you a general idea of what needs to be done.

Adding .change() at the end after you set the new value is necessary to ensure that the new value holds and will show correctly on the next form.

This way you are not moving elements around on the page, you are actually sorting the data between table rows to ensure your resorting will actually be preserved.

0 0
replied on August 7, 2018

Hmmm, that is most definitely another way of doing it, with an if statement to make sure the top/bottom cannot move in the "wrong" direction.  think i will give this a try as at least a working solution instead of using the "add" "delete" option we have now.

because the thing is... using my current method, if i Add a row and then delete the row, the data does save in the correct order.

0 0
replied on August 7, 2018

Yes, adding and deleting rows would save the data, but it seems a bit excessive since all you really need to do is swap the values between two specific rows.

It could become quite inefficient if you were to do something like swapping rows 1 and 2 when you have 10 rows and have to resort the entire table as a result.

0 0
replied on August 7, 2018 • Show version history

how would you recomend getting the field identifiers via the dom element?

 

currently im using...

var row = $(this).closest('tr'); to get the row.

i could use something like....

var cell = row[0].cells; to get the cells right?

 

but then how would i grab each cells "fieldx(x)" identifier?

 

this should be the syntax for accessing the fields value once i get a way to retrieve the id attribute

$('id^=[Field4]')

 

 

replied on August 7, 2018

It depends on your trigger. If you have a good way of identifying the index of the row, you may not need to use the field id at all.

Instead, you could add a custom CSS class to each of the fields, then use that as your target.

For example, if you add a class called "nameField" to the first column, then $('.nameField input').eq(0) would target the one in the first row.

Along the same lines, if you added "descriptionField" to the second column, then $('.descriptionField textarea').eq(1) would target the second row.

So, the question becomes, how are you adding your custom sorting buttons? This will play a major role in identifying the most effective solution.

0 0
SELECTED ANSWER
replied on August 10, 2018 • Show version history

Just wanted to Reply with my Solution... some code is borrowed from another question someone asked on this forum but they used the "delete row add row" to clean up the tables.

Thanks for the Hints/Help Jason it pushed me in the correct direction to come up with the solution. (sorry i was in a hurry so its a bit ugly and maybe not that elegant but it works well)

/*Hide the actual radio button, so only the radio button label is displayed*/
.moveUpAndDown input[type=radio] {display : none;}

/*Put a border around the radio button label and color its background, so it looks kind of like a button*/
.moveUpAndDown .choice {border-style : outset; border-width : 1px; background-color : lightgray;}

/*Adjust the layout of the radio button label so that it appears centered in the "button"*/
.moveUpAndDown .choice .form-option-label {max-width : 100%; margin-left : 4px;}
$(document).ready(function () {
  
  //run this code when any of the MoveUpAndDown radio buttons are clicked
  $(".testTable").on('click', '.moveUpAndDown input', function() {

    var row = $(this).closest('tr');
    var SwapName=null;
    var SwapDesc=null;

    //if the up "button" on the row was clicked
    if (row.find('.moveUpAndDown input:checked').val() == 'Up')
    {
      var rowswap = row.prev();
      if($(rowswap).find('.Name input').val() != undefined && $(rowswap).find('.Name input').val() != "")
      	{
            //window.alert($(rowswap).find('.Name input').val());
      		SwapName = $(rowswap).find('.Name input').val();
      		SwapDesc = $(rowswap).find('.Desc textarea').val();
      		$(rowswap).find('.Name input').val($(row).find('.Name input').val());
      		$(rowswap).find('.Desc textarea').val($(row).find('.Desc textarea').val());
      		$(row).find('.Name input').val(SwapName);
      		$(row).find('.Desc textarea').val(SwapDesc);
          	$(rowswap).find('.Name input').change();
          	$(rowswap).find('.Desc textarea').change();
          	$(row).find('.Name input').change();
          	$(row).find('.Desc textarea').change();
    	}
    }
    
    //if the down "button" on the row was clicked
    else if (row.find('.moveUpAndDown input:checked').val() == 'Down') 
    {
      var rowswap = row.next();
      if($(rowswap).find('.Name input').val() != undefined && $(rowswap).find('.Name input').val() != "")
      	{
            
      		SwapName = $(rowswap).find('.Name input').val();
      		SwapDesc = $(rowswap).find('.Desc textarea').val();
      		$(rowswap).find('.Name input').val($(row).find('.Name input').val());
      		$(rowswap).find('.Desc textarea').val($(row).find('.Desc textarea').val());
      		$(row).find('.Name input').val(SwapName);
      		$(row).find('.Desc textarea').val(SwapDesc);
          	$(rowswap).find('.Name input').change();
          	$(rowswap).find('.Desc textarea').change();
          	$(row).find('.Name input').change();
          	$(row).find('.Desc textarea').change();
    	}
    } //end of if... else... statement
    
    //cleanup work
    if (row.find('.moveUpAndDown input:checked').val() != undefined) {
      
      //clear the radio button value - sometimes the event function will trigger twice.
      //Clearing the value prevents the previous if statements from being triggered if
      //it runs the function a second time.
      row.find('.moveUpAndDown input:checked').prop('checked', false);  
    } //end of if statement
    
  }); //end of $(".testTable").on('click', '.moveUpAndDown input', function() {
  
}); //end of $(document).ready(function () {

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...