locked
Moving a multiline text field on an edit form drops data RRS feed

  • Question

  • I have a standard editform on a custom list that needs to move rows around a bit depending on a value of another field. My code works fine for most fields, but if I try to move a multiline text field to another location on the form I lose data.

     I use CEWP on this form with this general code:

    .... references to jquery here ....
    
    $(document).ready(function() {
    
    var requestType = $("select[title='Task Type']").val();
    if(requestType == "Catalog Request") {
    		moveCRRows();
    	}
    
    });
    function moveCRRows() {
       var elemTarget = $('nobr:contains("Character Count")').parents('tr:first');
       var elemSource = $('nobr:contains("Task Details")').parents('tr:first').eq(0);
       elemSource.insertAfter(elemTarget);
    
    }

    Task Details is a Multiline text field defined as 'rich text' (we came from 2010 so most of our fields were defined as rich text not enhanced rich text).

    If I leave this code in place, the 'Task Details' row moves properly but the field is empty and all data is lost on a save.

    It does not do it for me or for everyone, seems to be computer/browser (IE) dependent. I had a similar problem with timing issues with people pickers and had to use a setTimeout call to a function, but I'm not sure if this is the same type of problem. I'm showing just one move, I'm actually moving 7 other rows around.

    Multiline fields have lots of parts in the DOM - is it possible that I'm trying to move the row before it's all there, even though the document is 'ready'? Is that what I need to do, put function moveCRrows into a window.setTimeout call?


    Robin

    Friday, May 20, 2016 7:38 PM

Answers

  • Hi Robin,

    We can use jslink to achieve your requirement, the following code for your reference:

    (function () { 
     
        // jQuery library is required in this sample 
        // Fallback to loading jQuery from a CDN path if the local is unavailable 
        (window.jQuery || document.write('<script src="http://code.jquery.com/jquery-1.12.3.min.js"><\/script>')); 
     
        // Create object that have the context information about the field that we want to change it's output render  
        var hiddenFiledContext = {}; 
        hiddenFiledContext.Templates = {};  
        hiddenFiledContext.Templates.OnPostRender = moveCRRowsOnPostRender; 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hiddenFiledContext); 
     
    })(); 
    
    function moveCRRowsOnPostRender(ctx) {
    	var requestType = $("select[title='Task Type']").val();
    	if(requestType == "Catalog Request"){
    		var elemTarget = $('nobr:contains("Character Count")').closest('tr');
    		var elemSource = $('nobr:contains("Task Details")').closest('tr');
    		elemSource.insertAfter(elemTarget);
    	} 
    }

    Save as the code to a js file(named "moveCRRows.js"), add the file into a Document Library(named "JSLink").

    Then edit the editform.aspx page -> edit web part -> add the following url in the "JS link" property.

    ~site/JSLink/moveCRRows.js

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.



    • Edited by Dennis Guo Monday, May 23, 2016 5:06 AM
    • Proposed as answer by Patrick_Liang Thursday, June 2, 2016 1:27 AM
    • Marked as answer by Robin In OR Thursday, June 2, 2016 2:14 PM
    Monday, May 23, 2016 5:03 AM

All replies

  • Hi Robin,

    We can use jslink to achieve your requirement, the following code for your reference:

    (function () { 
     
        // jQuery library is required in this sample 
        // Fallback to loading jQuery from a CDN path if the local is unavailable 
        (window.jQuery || document.write('<script src="http://code.jquery.com/jquery-1.12.3.min.js"><\/script>')); 
     
        // Create object that have the context information about the field that we want to change it's output render  
        var hiddenFiledContext = {}; 
        hiddenFiledContext.Templates = {};  
        hiddenFiledContext.Templates.OnPostRender = moveCRRowsOnPostRender; 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hiddenFiledContext); 
     
    })(); 
    
    function moveCRRowsOnPostRender(ctx) {
    	var requestType = $("select[title='Task Type']").val();
    	if(requestType == "Catalog Request"){
    		var elemTarget = $('nobr:contains("Character Count")').closest('tr');
    		var elemSource = $('nobr:contains("Task Details")').closest('tr');
    		elemSource.insertAfter(elemTarget);
    	} 
    }

    Save as the code to a js file(named "moveCRRows.js"), add the file into a Document Library(named "JSLink").

    Then edit the editform.aspx page -> edit web part -> add the following url in the "JS link" property.

    ~site/JSLink/moveCRRows.js

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.



    • Edited by Dennis Guo Monday, May 23, 2016 5:06 AM
    • Proposed as answer by Patrick_Liang Thursday, June 2, 2016 1:27 AM
    • Marked as answer by Robin In OR Thursday, June 2, 2016 2:14 PM
    Monday, May 23, 2016 5:03 AM
  • Thank you Dennis I'll give this a try. I've used JSLink code in the past, so this code makes sense to me.

    Robin

    Monday, May 23, 2016 2:00 PM
  • Hi Robin,

    Any update?

    If my reply helps you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Wednesday, May 25, 2016 12:58 AM
  • Yes, this worked. Thanks for the jslink reminder - I always forget about it.

    Robin

    Thursday, June 2, 2016 2:16 PM