Reload js file after change product variant

English forums
1

Hi!
I have small issue… i made module which add additional tab with some content. Module loads js files. When product have variants and i change variant. JS file doesnt reload.

Any hints?

Thanks!

2

you need to load your js inside the template that will be reloaded

1 Like
3

even if js file is only for one module?
I’m using:
[{oxscript include=$oViewConf->getModuleUrl(“modulename”,“out/src/js/filename.js”)}]
in tmpl file from module (this is not block or overrided file).

Maybe it’s problem because of it is widget?

4

Yes sure. Or you could use delegation for handlers: Understanding Event Delegation | jQuery Learning Center

1 Like
5

So yesterday I try put js file and css to the base.tpl.
I pasted:
[{oxscript include=$oViewConf->getModuleUrl(“modulename”,“out/src/js/filename.js”)}]
and it’s still not working…
js file is loaded but not reload after ajax call (change tab on product details view or change variant).

@leofonic - could you paste any example from oxid how to do this? Delegation?

6 
$(document).ready(function(){

    variantstabResizeAction();

    $(window).resize(function(){
        variantstabResizeAction();
    });
    
});
    function variantstabResizeAction() {
        heightClose = '195px';
        $('.btn-toggle-variantstab').closest('.variantstab').each(function(index, element){
            $(element).attr('heightopen', $(element).outerHeight(true) + 20);
        });

        $('.variantstab').css('height', heightClose);

        $('.btn-toggle-variantstab').on('click',function(){
            if(!$(this).closest('.variantstab').hasClass('openvariants')) {
                $(this).closest('.variantstab').css('height', $(this).closest('.variantstab').attr('heightOpen'));
                $(this).closest('.variantstab').addClass('openvariants');
                $(this).find('i').toggleClass( "fa-rotate-180");
            } else {
                $(this).closest('.variantstab').css('height', heightClose);
                $(this).closest('.variantstab').removeClass('openvariants');
                $(this).find('i').toggleClass( "fa-rotate-180");
            }
        });

        /* Update hidden fields in form  */
        $('input[id*="amountToBasket_"]').on('change', function(){
            $('input[name="aproducts\['+$(this).attr('data-variant-id')+'\]\[amount\]"]').val($(this).val());
        });
    }

Call variantstabResizeAction() in Ajax again.

1 Like
7

Delegation is explained in the linked article, there is nothing oxid-specific about it. The problem you are facing is that external js-files in the ajax loaded content are not parsed but inline js is, that is why rubbercut suggests to call the function with inline js (oxscript add) rather than including an external file (oxscript include) in the ajax loaded content.

1 Like
8

Once more thanks for your help :slight_smile: It’s working! You made my day!

I know that “delegation” is not oxid specific solution - but implementation of this solution and life cycle of this proccess is hard to understand for me - at this moment.

Each time i have problem i try to find way by searching how oxid team made it. When i was searching this i found oxarticlevariant.js with js object oxArticleVariant with function ‘reload’. You think that is good/better way? It’s frustrating me that i don’t know how it’s work :wink:

p.s i didn’t catch rubbercut suggests about using ‘oxscript add’ instead of ‘oxscript include’

9

I think it’s equal, you can use js in ajax content or delegation (which is not always possible). The idea of delegation is that if you attach e.g. a click handler to all links with a special class, if new ones are loaded by ajax those do not have this handler because they didn’t exist when the handlers were set. But if you set the handler to an outer div that is not reloaded, and filter out all the matching links in there, this handler will continue to work for the elements that are loaded at a later time.

10

this is it! :slight_smile: thanks