I have a sensitive a boolean field that cannot be display with a label. I;m using a custom template to display an image. When it’s clicked, it changes to another image. This is fine. But at the same time, I want to toggle the actual field on the model to true/false.
// this code only runs once. If I click it once, it takes the new css class and prints 1. On second clicks, the function is not entered. If I remove the updateRow, the function is entered fine. 1 will be printed. Any ideas why??
(function(skuid){ var $ = skuid.$; $(function(){
var contactModel = skuid.$M(‘Contact’),
contactRow = contactModel.getFirstRow(),
hiddenFieldChecked = contactModel.getFieldValue( contactRow, ‘hiddenfield__c’ );
$(‘.customIcon’).click(function(event) {
alert(1);
$( this ).closest(‘.nx-fieldtext’).toggleClass(‘customIconTextColor’);
hiddenFieldChecked = hiddenFieldChecked ?false:true;
contactModel.updateRow({Id:contactRow.Id}, {hiddenfield__c: hiddenFieldChecked });
});
});
})(skuid);
Click event only runs once when updateRow is added
+8
+3Hi Jill!
Thank you for your question, are you selecting “inline” for the Javascript resource location for this snippet? Inline components run on page load which needs to be used in this instance. I copied your code to try to reproduce the issue, but was unable to replicate it. Are you seeing any console log errors when you click on the ‘customIcon’ image the second time?
Thanks,
Christine
+5Jill,
When you call an updateRow with JS, the field gets re-rendered. This means that you’ll loose all custom added listeners (in your case a click-listener) and all other DOM manipulations.
Try the following thing:
1: Take your code and put it into a “In-Line (Snippet)”, which doesn’t run on page-load
2: Add the following code line to your previous page-load snippet: skuid.snippet.getSnippet(‘yourNewlyCreatedSnippetName’)(); -> this will execute your code on pageload and add the click-listener
3: Add a model action on “Row in Model updated” (you might want to select a specific field so the snippet doesn’t run every time something gets updated in the model) and run ‘yourNewliyCreatedSnippetName’
Your snippet now will be executed on page-load and each time the field gets updated which should solve your issue.
If this also fails, I would suggest to write a custom field renderer (just ask for an example if you need one).
Keep us posted 🙂
Cheers
+8Thanks for the tip. I didn’t know you can do skuid.snippet.getSnippet(‘yourNewlyCreatedSnippetName’)().
So basically you will have to do this on every model row update on the page I assume?
If I use out of box action on Model, it always works.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.