jQuery UI Widgets Forums Vue Problem with remounting component instance

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  JenkeNg 3 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • JenkeNg
    Participant

    I noticed that the id is randomly generated when the component is generated.

    
    created: function () {
      this.id = 'jqxGrid' + JQXLite.generateID();
      this.componentSelector = '#' + this.id;
    }
    

    Each time you manually mount a component, a different id is generated,

    
    {
                  type: "documentGroup",
                  width: "75%",
                  items: [
                    {
                      type: "documentPanel",
                      title: "",
                      contentContainer: "CenterPanel",
                      initContent: function () {
                        let maiGridComponent = Vue.extend(MainGrid);
                        new maiGridComponent({}).$mount("#mainGrid");
                      },
                    },
                  ],
                }
    

    but it causes a problem. The last time the event bound to the selector will not find the selector, and an error will be reported

    
    jqxcore.js?4485:15 Uncaught (in promise) Error: Invalid Selector - #jqxGridjqxa7ca78ce5665! Please, check whether the used ID or CSS Class name is correct.
        at init.b.fn.<computed> [as jqxGrid] (jqxcore.js?4485:15)
        at VueComponent.updatebounddata (vue_jqxgrid.vue?6f80:310)
        at eval (HandleMainGrid.vue?7a0d:349)
    

    See this example

    click ‘Create Grid’–>click ‘Render Data’–>click ‘Create Grid’ again


    Martin
    Participant

    Hello JenkeNg,

    The issue is that the gridContainer is replace with the JqxGrid the way you mount it and on the second time you create a grid it can not find it.
    I have modified you Example to destroy the previous grid and add <div id="gridContainer"> again.
    I think it is working fine now.

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com


    JenkeNg
    Participant

    Hi,Martin
    Thank you for your reply, useful.
    But now there is a new problem, do I know how to deal with it. Please see this example

    1、Click “My Page” in the menu bar to open the page
    It can be found that an operation on ribbon was performed in the mounted function

    2、Select dropdownlist
    You will find that you can’t operate this ribbon

    Where did I go wrong???


    Martin
    Participant

    Hello JenkeNg,

    I have tested your Example and it is working fine. The dropdownlist successfully change the ribbon’s selected item.
    I have only removed the line where you select a ribbon’s item at the end of the mounted hook. The jqxRibbon is not fully initialized there yet.

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

    Problem with remounting component instance #113771

    JenkeNg
    Participant

    No, you should do it like this
    1、open”My Page”
    You can select the ribbon normally when you open this page for the first time

    2、close “My Page”

    3、open “My Page” again
    This ribbon will not work


    Martin
    Participant

    Hello JenkeNg,

    Then, I would suggest you to use a class selector for the ribbon, like this:
    $('.jqx-ribbon').jqxRibbon("selectAt", ribbonIndex);

    I have updated the Example and it is working fine.

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

    Problem with remounting component instance #113793

    JenkeNg
    Participant

    Hi,Martin
    Thank you for your answer, perfect solution!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.