Message Boards

Back

Custom select. Issues with event 'change'

Toggle
Hello,
 
We are using a “custom select” like the one used in the demo (http://lr7.themeray.com/web/unify-real-estate/home) and we have some issues with the event 'change'
 
This is the code of our 'liferay module' (jsp)
 

   <div class="col-md-3 g-px-0">
    <select id="supVisWmsEst" class="js-custom-select w-100 h-100 u-select-v1 g-min-width-150 g-brd-left-none--md g-brd-gray-light-v3 g-color-blue g-font-avenir-next-bold g-color-primary--hover g-pt-12 g-pb-13" data-close-icon="fa fa-angle-up" data-open-icon="fa fa-angle-down" data-placeholder='<liferay-ui:message key="dirserv72.tab.vis.wms.est" arguments="<%= numServVisWmsEst%>"/>'>
            <option></option>
            <option class="g-brd-none g-color-blue g-font-avenir-next-bold g-color-white--hover g-color-white--active g-bg-primary--hover g-bg-primary--active" value="0">
                        <liferay-ui:message key="dirserv72.tab.vis.wms.est" arguments="<%= numServVisWmsEst%>"/> 
            </option>
            <c:forEach items="${srvVisWmsEstSuperList}" var="superorganoest">
            <option class="g-brd-none g-color-blue g-font-avenir-next-bold g-color-white--hover g-color-white--active g-bg-primary--hover g-bg-primary--active" value="${superorganoest[1]}">${superorganoest[0]} (${superorganoest[2]})</option>
            </c:forEach>
    </select>
   </div>


We are calling the event 'change' in the 'main.js' of the module:
 
$(document).ready(function(){
            $("#supVisWmsLoc").on("change", function() {cargaTabla("supVisWmsLoc", "LOCAL", this.value);});
});

 
 
The problem is that when we enter the web page, the event 'change' doesn’t work. Nevertheless, if you refresh the webpage using F5, the event 'change' works perfectly.
We have tried to call the event in several places ('portlet-normal.ftl', 'main.js' of the theme, in the jsp) and in many ways ('$(document).ready(function(){', 'window.load'), but nothing is working.
 
I attached the complete code of the jsp and main.js in case you want to look at it in detail.
https://www.idee.es/resources/css/errorJS.zip
 
We would appreciate if you can help us with this. 
Thank you.

Kind regards,
Laura Alemany.
0 (0 Votes)

RE: Custom select. Issues with event 'change'
Answer
10/5/20, 5:20 AM as a reply to Laura.
Hi,

Did you bought the Unify Real-estate Theme ?

Regards,
0 (0 Votes)

RE: Custom select. Issues with event 'change'
Answer
10/5/20, 7:31 PM as a reply to sabri ben salem.
Hello, 

Yes, I bought the Unify Real-estate Theme.

Regards,
0 (0 Votes)

RE: Custom select. Issues with event 'change'
Answer
10/5/20, 10:46 PM as a reply to Laura.
Hi,

You need to add your code inside :

123
Liferay.on('allPortletsReady',function() {

});
and after the init select box  like this : 

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
Liferay.on('allPortletsReady',function() {


(function loop() {

setTimeout(function () {

    if($.HSCore != undefined && $.HSCore.components.HSGoTo != undefined){

     // initialization of header

if($('#js-header') != undefined && $.HSCore.components.HSHeader != undefined)

$.HSCore.components.HSHeader.init($('#js-header'));


if($('.hamburger') != undefined && $.HSCore.helpers.HSHamburgers != undefined)

$.HSCore.helpers.HSHamburgers.init('.hamburger');


    // initialization of HSMegaMenu component

if($('.js-mega-menu') != undefined && $('.container') != undefined)

    $('.js-mega-menu').HSMegaMenu({

     event: 'hover',

       pageContainer: $('.container'),

       breakpoint: 991

    });

   

    //Scroll up

if($('.js-go-to') != undefined  && $.HSCore.components.HSGoTo != undefined)

$.HSCore.components.HSGoTo.init('.js-go-to');


        //dropdown  menu

if($('[data-dropdown-target]') != undefined && $.HSCore.components.HSDropdown != undefined)

$.HSCore.components.HSDropdown.init($('[data-dropdown-target]'), {

          afterOpen: function () {

            $(this).find('input[type="search"]').focus();

          }

     });


// initialization of custom select

if($('.js-custom-select') != undefined && $.HSCore.components.HSSelect != undefined)

$.HSCore.components.HSSelect.init('.js-custom-select');

// your code here
$("#supVisWmsEst").on("change", function() {cargaTabla("supVisWmsEst", "ESTATAL", this.value);});


    }else{

     console.log("HSCore undefined");

    loop()

    }

  }, 1000);

}());

});

Regards,
+1 (1 Vote)

RE: Custom select. Issues with event 'change'
Answer
10/6/20, 1:13 AM as a reply to sabri ben salem.
Thank you very much, 

Now everything is working emoticon

Regards,
Laura
0 (0 Votes)