Forums - Thread Details
  • State Not Answered
  • Replies 3 replies
  • Subscribers 321 subscribers
  • Views 1136 views
  • Users 0 members are here
Related

How to add jQuery UI to create view

Sven Waldinger

Hi all,

I'm having troubles to include jQuery UI autocomplete (https://jqueryui.com/autocomplete) functionality to SugarCRM.

I'm trying to extend the Lead Create View at  /custom/modules/Leads/clients/base/views/create/create.js on the "department" input field.
The Code below is what I tried, but only Alert 1 is shown and the autocomplete and the Alert 2 does not work. There is no error message. Also no effect if I change alert() to a console.log()

({
    extendsFrom: 'CreateView',

    initialize: function(options) {

        this.myAutoCompleteLogic();       
        this._super('initialize', [options]);
      
    },

    myAutoCompleteLogic : function() {
        alert("Alert 1 - myAutoCompleteLogic is called");
        var availableWords = [
            "ActionScript",
            "AppleScript",
            "Asp",
            // ... more Words
        ];

        // doesn't work
        $("input[name='department']").autocomplete({
            source: availableWords 
        });

        // doesn't work
        $("input[name='department']").click(function() {
            alert( "Alert 2 - Handler for .click() called." ); 
        });
    },
});

This is the Source code of the department input element:

<input type="text" name="department" value="" maxlength="100" class="inherit-width" aria-label="Department">

Do you know how to solve this?
Am I at the right file or do I have to place my code at any other file?


Many thanks 

Stay Healthy and Best Regards

Sven

  • 0

    The HTML hasn't been rendered yet when initialize gets called on the Sidecar controller. You'll want to defer those calls until you know the DOM is available. (For example, after render() function is called on controller.)

    App Ecosystem @ SugarCRM

  • 0 in reply to Matt Marum

    Hi Matt Marum, 
    thank you for your help.
    I changed my code to this, but it still doesn't work:

    _render: function() {
        this._super("_render");
        this.myAutoCompleteLogic();
    },

    I now also checked with a find for all input elements in myAutoCompleteLogic():

    var allListElements = $( "input" );
    console.log($( "#tabContent" ).find( allListElements ));

    var allListElements = $( "input" );
    console.log($( 'span[sfuuid="38"]' ).find( allListElements ));

    but got an unexpected result.

    The Console Log output:

    Console Log output

    In the first console log, there were only two inputs (with type=checkbox) found - but on the page are much more (see image of tabContent below.

    In the second log nothing is found - the span itself is found.

    Even if I search through the "prevObject" Tree, I am able to find find the other input fields by hand, but the code don't work.

    Any Idea why?

    tabContent Source Code from Chrome Developer Tools:

    Source Code

    Many Thanks

    Sven

  • 0 in reply to Sven Waldinger

    You could still be running into some sort of race condition. I'd recommend deferring calling your autocomplete functionality until UI thread is available after rendering process is done.

    See https://underscorejs.org/#defer 

    App Ecosystem @ SugarCRM