Base solution for your next web application
Open Closed

Passing additional parameters for use by ModalManager #3499


User avatar
0
alukaszewski created

Is it possible to pass additional parameters using ModalManager, such as "myParam" below. I wish to pass an id so that the .js loaded as specified by the scriptURL can access this value.

var _MyCustomModal = new app.ModalManager({
    viewUrl: abp.appPath + 'Mpa/MyCustomModal',
    scriptUrl: abp.appPath + 'Areas/Mpa/Views/Common/Modals/_MyCustomModal.js',
    modalClass: 'MyCustomModal',
    myParam: '16777328'
});

5 Answer(s)
  • User Avatar
    0
    alirizaadiyahsi created

    Hi,

    There is no built-in solution, but you can add this option to ModalManager.js. And also, you can send parameter with Url to server-side. For example:

    var _MyCustomModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Mpa/MyCustomModal?myParam=16777328',
        ...
    
  • User Avatar
    0
    alukaszewski created

    Ah, good idea thanks.

    I had previously not been using the modalManager to show modals, instead including modal html and code on the page or loading from another controller - with that method I could throw a value into a field on the modal before modal.shown and then have the modal execute code based on the value in that field during modal.shown. With modalManager, the modal DOM elements are not available until modal Manager.open but I don't want modal code to execute until I have first established an id value.

  • User Avatar
    0
    alukaszewski created

    Bah, this does not appear to work with modals/modalManager. The parameters passed in the URL are not available when the modal loads. There must be a way to extend modal Manager - I can see an 'Args' I wonder what those are?

  • User Avatar
    1
    alukaszewski created

    I think I solved this, by adding myParams to new modalManager modal;

    var _myCustomModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/Modals/MyCustomModal',
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/Common/Modals/_MyCustomModal.js',
            modalClass: 'MyCustomModal',
            myParams: { "param1": "16777328", "param2": "XX1XX1XX2" }
        });
    

    I added some extra functionality to ModalManager.js;

    I include myParams in ModalManager.js _normalizeOptions;

    return function (options) {
    
                _normalizeOptions(options);
    
                var _$modal = null;
                var _modalId = options.modalId;
                var _modalSelector = '#' + _modalId;
                var _modalObject = null;
                var _myParams = options.myParams;
    

    I then have an extra custom Api call which returns my parameters;

    getMyParams: function () {
                        return _myParams
                    },
    

    Then in _MyCustomModal.js I can use;

    var myParams = _modalManager.getMyParams();
                var myParam1 = myParams.param1;
    

    before I run any other code such as DataTables or AmChart.

  • User Avatar
    0
    alirizaadiyahsi created

    Great. This is the best way to achieve what you want to do.