Update image rotator .xml config file without refresh

Question

I have a 3D model being rendered on my site through an image rotator .xml config file. This feature works but I am attempting to render a completely different .xml in place of the previous file through a JS on change event.

I have done a fair bit of reading in order to solve this issue, although I have not found an answer. I have already tried to make the JQuery script into a function as seen below:

function updateModel(xml_file_path) {
    console.log('updating room model...');
    console.log('xml_file_path: ' + xml_file_path);

    // clear past model
    $("#wr360PlayerId").empty();

    jQuery('#wr360PlayerId').rotator({
        licenseFileURL: 'license.lic',
        configFileURL: '/static/360_assets/' + xml_file_path,
        graphicsPath: '/static/img/basic',
        zIndexLayersOn: false,
        responsiveBaseWidth: 600,
        responsiveMinHeight: 0,
        googleEventTracking: false,
    });
    console.log('rendering: ' + xml_file_path);
}

// clears the old model then updates the configFileURL to the new model

This was successful in clearing the previous model although when I inspect the new model the images used by the image rotator are not being loaded and nothing is displayed.

wr360 documentation

I've also read through the documentation for wr360 above and found a few different ways of loading the image rotator on my site. I've gone through each and attempted to make it update using similar methods as JQuery but each had their own oddities that were difficult to overcome.

There's not much to code to this as for most of it is created dynamically on page load, but I'll try to provide all code necessary below:

js

function updateModel(xml_file_path) {
    console.log('updating room model...');
    console.log('xml_file_path: ' + xml_file_path);

    // clear past model
    $("#wr360PlayerId").empty();

    jQuery('#wr360PlayerId').rotator({
        licenseFileURL: 'license.lic',
        configFileURL: '/static/360_assets/' + xml_file_path,
        graphicsPath: '/static/img/basic',
        zIndexLayersOn: false,
        responsiveBaseWidth: 600,
        responsiveMinHeight: 0,
        googleEventTracking: false,
    });
    console.log('rendering: ' + xml_file_path);
}

$(document).ready(function(){
    $('#rooms').on('change', function() {
        updateModel(room.xml_path);
        console.log('model updated');
    });
});
// truncated for simplicity

html

<div id="wr360PlayerId" class="wr360_player" style="background-color:#FFFFFF;">
</div>

The xml file path is getting passed correctly (checked by the console.log('xml_file_path: ' + xml_file_path);) it just doesn't render the second rotator.

$('#rooms') is a select field, and room.xml_path is the selected rooms .xml file path. With this being said, ideally, the on change event would show the selected model and if the selection changes again it should render the new model (instead of nothing like it currently does). Either I am missing something or it is impossible to update a model without refreshing the page, either way, any help is appreciated!

Answer 1

You can actually use, apiObj.reload(xml_path); to simply reload the image rotator with a new xml file path.