Topic: Reusing Transfer Plugin

jamie priority asked 5 months ago


I have modal that use click on and it shows the data from database. it also shows a Transfer Plugin. My problem is when i close the modal and reopen with a different ID, i get duplicate Transfer boxes.

How can i empty the current Transfer Plugin and reuse it for the next set of content in the modal?

at the moment code look something like:

function getstuff(){ //get Data from fetch and do stuff then let opts = { dataSource : data1, dataTarget : data2 } const transferEl = document.getElementById('transfer-facilities'); const instanceTransfer = new Transfer(transferEl,opts) }


kpienkowska staff answered 5 months ago


I've created a snippet with static data where a single modal is triggered via more than one button and data-attr passes info about what data are supposed to be shown. Data are set on show and removed on hidden.

You need to implement a similar solution if you want to use a single transfer plugin.

https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4064811#js-tab-view


jamie priority answered 5 months ago


thats more or less what i have( ithink), in the getCategories function that is called i do the following to initialise the transfer module.

            const opts = {
                titleSource: 'Add All',
                titleTarget: 'Remove All',
                dataSource: dataSource,
                dataTarget: dataTarget,
                search: true,
                pagination: true,
                elementsPerPage: 10,
            } 
            const instanceTransfer = new Transfer(transferEl, opts)
        })

then on the modal close I have

closeEditModal.addEventListener('hidden.mdb.modal', (e) => {
    instanceTransfer.dispose();
})

if i put the
const instanceTransfer = new Transfer(transferEl) outside of the function at the start of my scripts. how do i then reuse it in the function block?


kpienkowska staff answered 5 months ago


Unfortunately, the snippet doesn't work. I do not see the edit button in it that the modal was supposed to open with and you did not change the code responsible for downloading data from the API to a set of some sample data with which the snippet would work. Modal provides you with two methods - opened and hidden. On opened, you should complete the appropriate data for dataSource and dataTarget and initialize the transfer plugin, and on hidden event you should call the dispose method. using these two events will ensure you always load the appropriate data.


jamie priority answered 5 months ago


yes different set of data. I have create a snippet so you can get a feel of how it goes together. https://mdbootstrap.com/snippets/standard/sutherland-west/4059288

So I have a datatable with a edit button that opens the modal, passes in sectionid, section name fields. it also goes to my api and gets the json data for that particular section. i look through the json and create the arrays needed for the dataSource & dataTargets of the Transfer Module. When user closes module and then reopens by clicking on a different button on the datatable, same process again....


kpienkowska staff answered 5 months ago


If you want to have "fresh" Transfer Plugin use the method dispose on modal close and for new modal init new Transfer Plugin?

By the next set of content do you mean new, different data?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.2.0
  • Device: win 10
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: No