Modals not working on VM child product pages

[flippertricks]

Hello,

I really hope someone can help. I have a few RegularLabs modals links in my VM parent product long & short descriptions. These work fine on the parent product page but when the child product details are loaded after selecting different options (I've tried either inheriting the child descriptions from the parent product, or copying the descriptions across to the child) the links open in the browser window instead of as popups.

The product variations are created using Breakdesigns 'Custom Fields For All' and 'Stockable Custom Fields' plugins. I asked their support and they replied:

"You need to initialize your modals after the ajax call that updates your page.
The same that happens when you load the page through your browser.

The file that updates your page after selecting the variants is this: components/com_virtuemart/assets/js/dynupdate.js
Function: Virtuemart.updateContent
Put any js at the end of the success clause

Unfortunately i am not aware of what js need to be called as this is not related with our plugin."

I've found the file, and RegularLabs have provided this code:

Code Select Expand

RegularLabs.Modals.init();

I tried inserting it here (the snippet is most of the way down):

Code Select Expand


Virtuemart.updateContent = function(url, callback) {

        if(Virtuemart.isUpdatingContent) return false;
        Virtuemart.isUpdatingContent = true;
        urlSuf='tmpl=component&format=html&dynamic=1';
        var glue = '&';
        if(url.indexOf('&') == -1 && url.indexOf('?') == -1){
glue = '?';
        }
        url += glue+urlSuf;
$(this).vm2front("startVmLoading");
$.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
var title = $(data).filter('title').text();
$('title').text(title);
var el = $(data).find(Virtuemart.containerSelector);
if (! el.length) el = $(data).filter(Virtuemart.containerSelector);
if (el.length) {
Virtuemart.container.html(el.html());

Virtuemart.updateCartListener();
Virtuemart.updateDynamicUpdateListeners();

if (Virtuemart.updateImageEventListeners) Virtuemart.updateImageEventListeners();
if (Virtuemart.updateChosenDropdownLayout) Virtuemart.updateChosenDropdownLayout();
if (typeof vm2tabs === 'function') {
vm2tabs($("#ui-tabs .tabs"));
}
//Virtuemart.product($("form.product"));

if(Virtuemart.recalculate) {
$("form.js-recalculate").each(function(){
if ($(this).find(".product-fields").length && !$(this).find(".no-vm-bind").length) {
var id= $(this).find('input[name="virtuemart_product_id[]"]').val();
Virtuemart.setproducttype($(this),id);
}
});
}
}
Virtuemart.isUpdatingContent = false;
if (callback && typeof(callback) === "function") {
callback();
}
$(this).vm2front("stopVmLoading");
RegularLabs.Modals.init();
            },
           
error: function(datas) {
alert('Error updating page');
Virtuemart.isUpdatingContent = false;
$(this).vm2front("stopVmLoading");
},
statusCode: {
404: function() {
Virtuemart.isUpdatingContent = false;
$(this).vm2front("stopVmLoading");
alert( "page not found" );
}
}
        });


but I don't know js or php and I'm unsure if it's really the correct position for the snippet in the file, or the correct syntax? RegularLabs have suggested I need to ask VM if this is the correct position so I thought I'd try this forum first. Is anyone able to help me with this?

Many thanks in advance! :-)

----------------------------------
UPDATE:

FYI - Even modals invoked using a class for a simple anchor tag (eg class="modal_link") don't work on the child details.

Also, BreakDesigns have suggested a different location for the js snippet, but unfortunately this hasn't worked either:

Code Select Expand


Virtuemart.updateContent = function(url, callback) {

        if(Virtuemart.isUpdatingContent) return false;
        Virtuemart.isUpdatingContent = true;
        urlSuf='tmpl=component&format=html&dynamic=1';
        var glue = '&';
        if(url.indexOf('&') == -1 && url.indexOf('?') == -1){
glue = '?';
        }
        url += glue+urlSuf;
$(this).vm2front("startVmLoading");
$.ajax({
            url: url,
            dataType: 'html',
            success: function(data) {
var title = $(data).filter('title').text();
$('title').text(title);
var el = $(data).find(Virtuemart.containerSelector);
if (! el.length) el = $(data).filter(Virtuemart.containerSelector);
if (el.length) {
Virtuemart.container.html(el.html());

Virtuemart.updateCartListener();
Virtuemart.updateDynamicUpdateListeners();

if (Virtuemart.updateImageEventListeners) Virtuemart.updateImageEventListeners();
if (Virtuemart.updateChosenDropdownLayout) Virtuemart.updateChosenDropdownLayout();
if (typeof vm2tabs === 'function') {
vm2tabs($("#ui-tabs .tabs"));
}
//Virtuemart.product($("form.product"));

if(Virtuemart.recalculate) {
$("form.js-recalculate").each(function(){
if ($(this).find(".product-fields").length && !$(this).find(".no-vm-bind").length) {
var id= $(this).find('input[name="virtuemart_product_id[]"]').val();
Virtuemart.setproducttype($(this),id);
}
});
}
RegularLabs.Modals.init();
}
Virtuemart.isUpdatingContent = false;
if (callback && typeof(callback) === "function") {
callback();
}
$(this).vm2front("stopVmLoading");
            },
           
error: function(datas) {
alert('Error updating page');
Virtuemart.isUpdatingContent = false;
$(this).vm2front("stopVmLoading");
},
statusCode: {
404: function() {
Virtuemart.isUpdatingContent = false;
$(this).vm2front("stopVmLoading");
alert( "page not found" );
}
}
        });
        Virtuemart.isUpdatingContent = false;
    }