Rebinding HTML tags to form fields

[Taylor Scott]

Hi Alex! Is there a way to rebind HTML controls? For example, if I add an HTML section via the UI and use either {} or {{}} to surround a field in the form, it will bind to my field. However, if I dynamically load some HTML into a section, and I have a field e.g. {Status} in the HTML, it doesn’t bind. Do you have a function I can call to ‘rebind’?

• This topic was modified 5 years, 5 months ago by Taylor Scott.

[Alexander Bautz]

This is designed to be initiated on load, but you can make a similar function by using this in your custom HTML instead of the {{fin}} placeholder:

<span class='live_value_placeholder_YOUR_FIELDINTERNAL_NAME'></span>

Then add this to your Custom JS:

var customUpdateliveObj = {};
function customLiveUpdate(fin){
    setInterval(function(){
        var placeholder = jQuery(".live_value_placeholder_" + fin);
        if(placeholder.length > 0){
            var firstPass = false;
            if(customUpdateliveObj[fin] === undefined){
                firstPass = true;
                customUpdateliveObj[fin] = getFieldValue(fin);
            }
            var val = getFieldValue(fin);
            if(val !== customUpdateliveObj[fin] || firstPass){
                customUpdateliveObj[fin] = val;
                jQuery(".live_value_placeholder_" + fin).text(val);
            }
        }
    },1000);
}
customLiveUpdate("YOUR_FIELDINTERNAL_NAME");

Replace YOUR_FIELDINTERNAL_NAME with the FieldInternalName of the field you want to attach the listener to.

Let me know how this works out.

Alexander

[Taylor Scott]

This is pretty fantastic, and it works well. Any idea what sort of performance it would get if I filled up the object with a few dozen fields throughout the course of the form?

[Alexander Bautz]

I’m glad it worked. I didn’t realize that you would use it for that many fields – and even though I don’t think it should cause any major slowdown of the form – using a setInterval isn’t the most elegant solution.

In the internal function I bind a change event to all fields and I have modified it so you can use it like this:

var updateTimeout = {};
function bindFieldUpdate(f) {
    if (updateTimeout[f] === undefined) {
        updateTimeout[f] = 0;
    } else {
        // Only bind once to each field
        return;
    }
    var update = function (f) {
        jQspjs(".live_value_placeholder_" + f).html(spjs.utility.getFieldValue({ "fin": f, "delimiter": "; " }));
    }
    jQspjs("#dffs_" + f).find("select, input:radio, input:text:first, input:checkbox, .sp-peoplepicker-topLevel").on("change blur", function (e) {
        clearTimeout(updateTimeout[f]);
        updateTimeout[f] = setTimeout(function () {
            update(f);
        }, 10);
    });
    update(f);
}
// Call it like this one time for each field you want to bind it to
bindFieldUpdate("Title");

Alexander

[Taylor Scott]

This works great also, here’s how I’m using it:

function customLiveUpdate(){
	// to work correctly the binders must have the correct class and prefix of element id
	// the id with the prefix must end in the fin
	var binderClass = 'p3binderClass';
	var prefix = 'p3binder_';
	var f = '';
//	var customUpdateliveObj = {};
	var updateTimeout = {};
	var eleId = '';
	
	    $("span[class^='" + binderClass + "']").each(function(){
				eleId = $(this).attr('Id');	
				f = eleId.substring(prefix.length);	    	
	    		
	    		bindFieldUpdate(f);
	    		
	    });
	    
	function bindFieldUpdate (f) {
	    if (updateTimeout[f] === undefined) {
	        updateTimeout[f] = 0;
	    }else{
			// Only bind once to each field
			return;
	    }
		var update = function(f){
			jQspjs("#" + prefix + f).html(spjs.utility.getFieldValue({ "fin": f, "delimiter": "; " }));
	    }
	    jQspjs("#dffs_" + f).find("select, input:radio, input:text:first, input:checkbox, .sp-peoplepicker-topLevel")
	    	.on("change blur", function(e) {
	        	clearTimeout(updateTimeout[f]);
	        	updateTimeout[f] = setTimeout(function () {
	            	update(f);
	        	}, 10);
	    	});
		update(f);
	}

^ whenever I load a new html file into a placeholder (I swap them regularly) I call customLiveUpdate(). It seems to work well. It looks like I can call it as often as a I want and since I’m just using your existing binding all I’m doing is adding a timeout (and not duplicating right)? The only thing I’m unclear about is where the updateTimeout object lives in scope. Since it’s called and instantiated each time I call won’t it recreate and thus reset the timeout even if one existed?

[Alexander Bautz]

I’m glad it worked.

I placed the var updateTimeout = {}; outside of the bindFieldUpdate function to ensure it was not overwritten when you call the function multiple times using the same field internal name. I recommend that you move it outside of your customLiveUpdate function.

Alexander

[Author]

Posts