search

sebfz1 / wicket-jquery-ui

jQuery UI & Kendo UI integration in Wicket
http://www.7thweb.net/wicket-jquery-ui/
Other
93 stars 58 forks source link

Multiselect duplicates itself with ajax changes #296

Closed VaclavC closed 6 years ago

VaclavC commented 6 years ago

Hello,

I'am trying to change MultiSelect with Ajax calls. Relevant part of code:

        // In component constructor
        MultiSelect<Count> select;
        selectInst = new MultiSelect<Count>("select", selectedValues, fieldValuesModel);
        selectInst.setOutputMarkupId(true);
        // Update with ajax
        fieldValuesModel.detach();
        selectInst.updateModel();

        target.add(selectInst);

It updates the select content fine, but with each ajax call a new "nested" select is created on pages. It ends up with something likes this:

<div class="k-widget k-multiselect k-header" deselectable="on" style="" title="">
   <div class="k-multiselect-wrap k-floatwrap" deselectable="on">
      <ul role="listbox" deselectable="on" class="k-reset" id="select1c_taglist"></ul>
      <input class="k-input k-readonly" style="width: 25px" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="select1c_taglist select1c_listbox" aria-disabled="false" aria-activedescendant="01d02b02-8fe8-4159-8b64-1dfbc0d324c9" aria-busy="false"><span deselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span>
   </div>
   <div class="k-widget k-multiselect k-header" deselectable="on" style="" title="">
      <div class="k-multiselect-wrap k-floatwrap" deselectable="on">
         <ul role="listbox" deselectable="on" class="k-reset" id="select1c_taglist"></ul>
         <input class="k-input k-readonly" style="width: 25px" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="select1c_taglist select1c_listbox" aria-disabled="false" aria-activedescendant="295fd0c2-01a4-42c1-b806-4ccdd9c60a1a" aria-busy="false"><span deselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span>
      </div>
      <div class="k-widget k-multiselect k-header" deselectable="on" style="" title="">
         <div class="k-multiselect-wrap k-floatwrap" deselectable="on">
            <ul role="listbox" deselectable="on" class="k-reset" id="select1c_taglist"></ul>
            <input class="k-input k-readonly" style="width: 25px" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-owns="select1c_taglist select1c_listbox" aria-disabled="false" aria-activedescendant="03771670-b1a2-4e88-8f7d-28576f36eb7b" aria-busy="false"><span deselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span>
         </div>
         <select name="select" id="select1c" multiple="multiple" size="8" data-role="multiselect" style="display: none;" aria-disabled="false">
            <option value="0">alchymie (2)</option>
            .... more options ...
         </select>
         <span style="font-family: Ubuntu; font-size: 14.6667px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 19.2167px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
      </div>
      <span style="font-family: Ubuntu; font-size: 14.6667px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 19.2167px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
   </div>
   <span style="font-family: Ubuntu; font-size: 14.6667px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 19.2167px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
</div>

This example is after two ajax calls.

If I try to replace whole panel containing MultiSelect instead of onloy changing model, it works at first glance, but after inspection I realized, that similar orphan nodes are created in document tree....

Where may be the problem?

sebfz1 commented 6 years ago

Hi, yes this is because in several widgets there is a difference between the original html and the rendered/transformed one. In other words, that's when there is a difference between the elementand the wrapper. https://docs.telerik.com/kendo-ui/api/javascript/ui/widget

The purpose of the default MultiSelect is to be static. In order to get the dynamic part, you will preferably use the lazy version (com.googlecode.wicket.kendo.ui.form.multiselect.lazy.MultiSelect<T>) and use #refresh(AjaxRequestTarget target) to reload the data-model.

VaclavC commented 6 years ago

I'll try it in that way. Thank you for clarification.