Forums - Thread Details
  • State Verified Answer
  • Replies 5 replies
  • Subscribers 319 subscribers
  • Views 2843 views
  • Users 0 members are here
Related

Add javascript in the onclick of a custom button

Stefano Mapelli

Hi,

I work with the 7.6 pro version of Sugar and I have added a custom button in the module Quotes that follows the old standard, the 6.7 version. 

I have added the button with this code in the detailviewdefs.php:

'buttons' => 
array (
  0 => 'EDIT',
  1 => 'SHARE',
  2 => 'DUPLICATE',
  3 => 'DELETE',
  4 => 
  array (
    'customCode' => '<form action="index.php" method="POST" name="Quote2Opp" id="form">

            <input id="apriConfiguratoreOfferta" title="apriConfiguratoreOfferta" class="btn" type="button" name="apriConfiguratoreOfferta" value="Apri Configuratore"
            onclick="
            var URL=document.URL;
            var idOfferta = URL.match(\'record=(.*)&\');
            alert(idOfferta[1]);
            sessionStorage.selectedQuoteId=idOfferta[1];
            var arg = \'/Dashboards\';
            var a=app.api.buildURL(arg);
            alert(a);
            function fun(){alert(\'Function call\')};
            fun();
            var homeURL = \'http://localhost/sugarcrm/#Home/3f7529b1-d575-6981-6097-574becea9c9e\';
            var win = window.open(homeURL, \'_self\');

            ">

in the onclick event of the button I want to do some stuff and one of these stuff is the use of a function but, when I declare it, Sugar shows me a 500 error in the browser and it doesn't load the Quotes page.

My problem is that I need to use the function declaration for the callback of an ajax request but in this manner I can't do this.

In the posted code, the error is shown when I insert the 'function fun()' declaration.

Can you help me? 

Thanks

Stefano

  • 0

    What happen if you remove function invocation, and have only function declaration or if you remove both lines?

    If you are getting error 500, that mean that you have apache server error, which is probably related to url that is not formatted correctly.

    Maybe you can try to use Immediately invoked function expression(IIFE). Have no idea if that would help.

    However, generally you shouldn't have so many lines in onclick html property, so I would rather create new button type and attach event listeners for onclick event, so it would allow you to add more custom code and it would be easier to maintain.

  • 0 in reply to Ivica Nedeljkovic

    Hi Ivica,

    thanks for the answer. Only if there aren't declarations of functions in the onclick code the page is loaded without error and the code is executed when I click on the button.

    My problem is that when I click on the button I want to do an ajax call with the callback function but I can't declare it in this code. This is the code that I want to exec in the onclick but function(data) causes the 500 error as all the declarations or IIFE that I want to use


    app.api.call('GET', url, null,
    {
    success: function (data)
        {
    alert(\'Success\');
    }
    });

    I know that it's better to reduce the lines of code in the onclick, but first of all I want to solve this problem.

    What do you think about this?

    Stefano

  • 0 in reply to Ivica Nedeljkovic

    Where and how can I declare a javascript function which can be used in my onclick?

  • 0 in reply to Stefano Mapelli

    Hi Stefano Mapelli

    In your custom/modules/<module-name>/metadata/detailviewdefs.php and add this code: 

    'templateMeta' => 
      array (
         'javascript' => ' 
           <script src="./include/javascript/jquery.min.js" type="text/javascript"></script>
           <script src="./custom/include/javascript/test.js" type="text/javascript"></script>
         ',
         'form' => 
          array (
            'buttons' => 
              array (
                0 => 'EDIT',
                1 => 'SHARE',
                2 => 'DUPLICATE',
                3 => 'DELETE',
                4 => 
                  array(
                   'customCode1' => '<input id="BillToValidateButton" title="Bill To Button" class="button" type="button" name="BillToButton" value="Bill To Validate" onclick="myButtonFunt();">',
                  ),
              ),
          ),
      ),


    Now in your custom/include/javascript/test.js file write all your script code to do so:

    $(document).ready(function(){ 
      function myButtonFunt(){ 
        console.log("Hi Friends am Triggered..");
      }
    });

    Once check with this approach and let me know if you found any issues.
    Hope this Helps

    Best Regards

    S Ramana Raju

  • 0 in reply to Ramana Raju Santhana

    Hi Ramana Raju Santhana,

    I have checked your solution but the result is 'myButtonFunt() is not a function'.

    During my numerous attempts I find my realy problem, it's the braces '{' and '}' of the functions.

    I need to escape the braces with '{ledelim}' for '{' and '{rdelim}' for '}' because the Smarty parser find the braces and parse it as a Smarty delimiter.

    I find my solution here Escaping Smarty Parsing | Smarty.

    Thanks to all for the help

    Best regards

    Stefano