vTiger and jQuery phone mask

Question

I have a phone mask that works but when I add the jQuery to vTiger header, the contact page doesn't paint.

In Header.tpl I have the js reference:

<script type="text/javascript" src="include/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="include/jquery/jquery.maskedinput.min.js"></script>

When I put the needed code in the header.tpl file, the page with the targeted phone field freezes.

<script type="text/javascript">
jQuery(function($){
   $("#phone").mask( "999-999-9999", { placeholder : "_" } );
   });
</script>

Any ideas as to why the page won't paint is appreciated.

Answer 1

You should override getHeaderScripts method in Edit.php file in your module to add your library, add Mask Plugin in Contacts module, better to not modify original template files, only override:

class Contacts_Edit_View extends Vtiger_Edit_View {
    function getHeaderScripts(Vtiger_Request $request) {
            $headerScriptInstances = parent::getHeaderScripts($request);

            $jsFileNames = array(
                'modules.Contacts.resources.Mask'
            );

            $jsScriptInstances = $this->checkAndConvertJsScripts($jsFileNames);
            $headerScriptInstances = array_merge($headerScriptInstances, $jsScriptInstances);
            return $headerScriptInstances;
        }
}