Click event only runs once when updateRow is added

  • 1
  • Problem
  • Updated 2 years ago
  • Solved
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);
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 Points 2k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Christine Jessen

Christine Jessen

  • 670 Points 500 badge 2x thumb
Hi 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
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
Jill,

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
(Edited)
Photo of jili@heidrick.com

jili@heidrick.com

  • 2,032 Points 2k badge 2x thumb
Thanks 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.
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
Yes and yes it works with the out of the box model actions ;)