custom field renderer issue

Pat,

I think that you need to bind that event to the input inside field.element:

$(field.element.find('input')).on('change',function() { ... });

No dice.

Pat can you try logging your “period” variable inside the switch? I have a suspicion that something may be wrong with it…

Pat,

I just realized that is a Date field. Does it work if you type in a date rather than select one in the date picker?

No dice on that either.

^^ bump ^^ this doesn’t work. Any other insights?

If you paste the code here, I’ll look at it. 🙂

Here it is.

var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]), jsDate = skuid.time.parseSFDate(value), period = field.row.Item__r.Price_per_Period__c, $ = skuid.$; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); // If we're in edit mode, then update end date value console.log('snippet is called. period is ' + period); if (field.mode == 'edit') { console.log('field.mode == "edit"'); //$(field.element).on('change', function() { $(field.element[0].firstChild.value).on('change',function() { console.log('on change works'); switch (period){ case "Day": console.log('Day'); break; case "Week": console.log('Week'); break; case "Month": console.log('Month'); break; case "Year": console.log('Year'); break; default: console.log('nothing'); break; } }); }<br>

Does the switch get called at all? Are you getting console.log Day,Week, etc. ? Are you getting “on chenge works”?

This doesn’t get called so the listener isn’t working.

console.log(‘on change works’);

^^bump^^

Weird, I never got this notification.  Looking at it now…

If you use J’s code and type in the text box instead of using the date picker, your change event should fire.  However, jQueryUI’s datepicker does not fire the change event on your input element when you make a selection.  You have to override the onSelect event that Skuid has put on that datepicker.  Here’s my version of the snippet and you can follow when the logs are shown.

var field = arguments[0],&nbsp; &nbsp; value = skuid&#46;utils&#46;decodeHTML(arguments[1]),<br />jsDate = skuid&#46;time&#46;parseSFDate(value),<br />period = field&#46;row&#46;Item__r&#46;Price_per_Period__c,<br />$ = skuid&#46;$;<br />&nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; skuid&#46;ui&#46;fieldRenderers[field&#46;metadata&#46;displaytype][field&#46;mode](field,value);<br />&nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &#47;&#47; If we're in edit mode, then update end date value<br />&nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; console&#46;log('snippet is called&#46; period is ' + period);<br />&nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; if (field&#46;mode == 'edit') {<br />&nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('field&#46;mode == "edit"');<br />&nbsp; &nbsp; &nbsp; &nbsp; console&#46;log(field&#46;element);<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; var myInputElement = field&#46;element&#46;find('input');<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; myInputElement&#46;on('change',function() {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('on change works');<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch (period){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "Day":<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('Day');<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "Week":<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('Week');<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "Month":<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('Month');<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "Year":<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('Year');<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('nothing');<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; });<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; var originalSelectFunction = myInputElement&#46;datepicker('option','onSelect');<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; myInputElement&#46;datepicker('option','onSelect',function(dateText,datepickerobj){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; originalSelectFunction(dateText,datepickerobj);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('my additional code'); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log(dateText);<br />&nbsp; &nbsp; &nbsp; &nbsp; });<br />&nbsp; &nbsp; }

As you can see it gets tricky because you have to handle both changes to the text box and changes to the datepicker widget.  It may be easier (and better) for you to just write a model action snippet instead of a custom field renderer here, but the custom field renderer approach should work.

Well, at least now the change code is working. Problem is that the variables aren’t working.

I think maybe I should go with running the snippet for a model action. Can this work using the row updated with the specified field “Start Date”. Are the arguments the same?

I forgot to fix the period variable in the code I posted.  That may be the issue you’re seeing.

if your code is like this…
period = ‘field.row.Item__r.Price_per_Period__c’,


it should be this instead…
period = field.row.Item__r.Price_per_Period__c,

I made that change since I don’t have that field, but forgot to put it back.

As for the model action snippet, I forget what the arguments are. I usually just do console.log(arguments); to see what is sent into the snippet.

Nope. I fixed that. The field variable is saying it’s undefined.

weird. If you show me exactly in the code where it’s undefined i might be able to help.  Although, I think the model action is the better approach anyways.

It’s defined on rendering the field, but not on change of either kind.

It’s defined for me.  I just put…
console.log(field); 
inside those change handlers and it shows up just fine.

Figured it out… I think. The Price_per_Period__c is a picklist field is on a related record through Item__r. I don’t think this field is accessible until the row I’m on is saved. Other fields are, but not this one. As such, it’s the one field that doesn’t show in the model until after I save the record.

I’ll either have to save the record prior to this or create another model just to do this query for this value.

I think …

Since is a datepicker, have you tried to use ‘changeDate’ instead ‘change’?