Waiting to execute javascript once page is fully loaded in Sugar 7

I need to hide a button in record view depending on the status

The problem I have is that the page needs to be fully loaded before I run the javascript to hide it

How can I do this?

I tried $( document ).ready(function() { but that doesnt work

Any ideas will be gratefull received

Sugar 7 is beginning to seriously depress me :(




Parents
  • Thanks

    I tried :

    $(document).on('load', function() {alert(1)})         
    $(window).load(function() {alert(2)})

    neither are triggered :(

    I think I may need to use $.when( to check if page is loaded but can't work out how at the moment

    This is incredibly frustrating 

    Is it only me that is finding doing the simplest things in sugar 7 is really difficult?

    I asked someone from Sugar and was pointed to the Adding Field Validation document but that is worse than useless for what I'm trying todo



  • Enrico

    I agree it is very useful for validation but it is not working for what I am trying todo which is hide a button depending on a value.

    Once I have got it working I will expand it to hide fields as well

    I tried adapting your code as follows

      myCustomLogicOn: function()    {
            
            if(this.model.get('phone_office') == '7777')
            {
                // log something on the console
                console.log('executing  my custom action');
                $('[name="validate_postal_code"]').hide();
              
            }
        },


    The function is executed but the button is not hidden

    I suspect it is running before the page is fully loaded

    I have proved that the code  $('[name="validate_postal_code"]').hide(); works by adding it to the click of another button 

    Am I missing something?


  • Felix

    Thanks that works to delete a button

    Really helpful

    I'd still like to know if there's a way to run the JavaScript when the page is fully loaded as hiding the button was an example

    I also need to add buttons using JavaScript, hide fields and other things

    Any ideas?


Reply Children
  • Hi Mike,

    You did capture my curiosity with this post and that's why I am still trying to understand as well. This is what I think is happening:

    First of all the render method on the record is called twice, one before actually showing page items and one just afterwards (still before the dropdown of menu items is generated on the page). Maybe some of Sugar core team can explain what is the reason so that we do understand more?

    Secondly, the "domready" concept I am not sure it applies fully. I have been surfing the web and reading around about backbone.js and jQuery "dom ready" interactions and many people have the same issue, not only with Sugar. The question is, when is the DOM ready for the browser? When the browser has loaded it, correct? But what has loaded? The first version of the page? The rendered view? What about the other elements/parts of the page that are getting changed subsequently? I think that's the key issue, the page changes, and from what I see, it looks like it renders in portions based on the view/layout part loaded.

    To test out my theory (that portions get loaded at different times), you can try adding the following to my example above, inside the _render method, just at the end of it, and comment out one hide at the time (and obviously repair and refresh your browser's cache):

           
            $(document).ready(
                    function()
                    {
                            $('.label-module').hide();
                            $('[data-original-title="Actions"]').hide();
                            $('[name="edit_button"]').hide();
                            alert('dom is ready');
                    }
            );
            
    What this does is trying to hide some parts of the page, and then showing an alert, so that you can see what happened until then.

    The example tries to hide:
    1. Module icon (the image on the top left that displays the initials of the module) (class is label-module)
    2. Edit Button (name is edit_button). This does not include the drop-down arrow on its right
    3. The drop-down arrow containing all the other buttons, and therefore your custom one too? (data-original-title is Actions)
    What you will see playing around withe the hide/shot that on the first alert message you do not yet have any of the above 3 items.

    On the second alert message instead, you have #1 and #2 that got loaded before the alert, and therefore get successfully hidden, #3, will load just after accepting the alert message, as it probably is another render (?) of another block of the page.

    This should help you understand the order of events.

    Depending on what you are trying to achieve, your options might be:
    • Trigger an action based on a field on the module's record view, after the record view is loaded (can use my example above)
    • Use Sugar Logic (but does not allow you to hide/show buttons)
    • Add custom validation with the example on the guide, provided by SugarCRM
    • Use Felix's code to show/hide the button as you wanted, by removing the meta of the buttons
    • Given that the dropdown of buttons seems to get loaded after the record view, the last option I can think of, is to extend/override record.php to add a new custom button (as I guess from what you mentioned you might already have done) and then when that loads, see if the conditions to display the button are met or not on the current model/record. Basically the "check logic" is on the action of the custom button, not on the record view. Having a look around, this exact example has been covered by my good friend from Synolia in France, Cedric, on this post: http://forums.sugarcrm.com/f6/7-1-0-custom-buttons-removing-them-depending-some-logic-89730/
    The best options from what I understand is your use case, of hiding/showing a button based on some values on the record view, seem to be Felix solution and/or Cedric's solution.

    Hope it all makes sense, and it gives you some more options on how to customise Sugar 7, at the end of the day we are all learning the new technologies Sugar 7 is based on... and hopefully I did not say anything silly either.
    This issue actually helped me understand more as well, so thank you Mike! :)

    Enrico Simonetti,
    InsightfulCRM Australia

    --

    Enrico Simonetti

    Sugar veteran (from 2007)

    www.naonis.tech


    Feel free to reach out for consulting regarding:

    • API Integration and Automation Services
    • Sugar Architecture
    • Sugar Performance Optimisation
    • Sugar Consulting, Best Practices and Technical Training
    • AWS and Sugar Technical Help
    • CTO-as-a-service
    • Solutions-as-a-service
    • and more!

    All active SugarCRM certifications

    Actively working remotely with customers based in APAC and in the United States

  • Thanks Enrico for the mention :-)

    You can find the full code here https://gist.github.com/cmourizard/8298641

    You are totaly right, the front-end of Sugar 7 is now that we say a Single Page Application and you need to forgot some concepts not really available here like "on document ready


  • Guys that is really helpful :)

    Works well 

    I can probably build on this to do the other things I want like creating buttons programaticly

    Certainly cheered me up about Sugar 7 which will last until I hit my next problem :)


  • Hello,

    I want to load a new js file on EditView.
    I have used jsgroupings to load my custom js and included it in sidecar.
    The problem is that the js is loaded much before the form elements are loaded.

    I also tried  $( document ).ready(function() { 
    but it doesnt seem to work.

    How do I solve this ?


  • This is very old, but I think what you're looking for is simply

    YAHOO.util.Event.onContentReady("datesedit",
    function () {

    // do stuff..

    });

    I'm also in the process of writing a field checker that will hide/show content depending on field values, so by changing "datesedit" to the id of your form you can enable validation only once that id element and all the child elements actually load.