Thread Details
  • State Not Answered
  • Replies 3 replies
  • Subscribers 353 subscribers
  • Views 1393 views
  • Users 0 members are here
Forum Actions
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

Parents Reply Children
  • 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