HTML5 Data Bindings Formatter Support Product Page
Solved
Filtered datasource not working with bootstrap’s selectpicker class
Reported 26 Sep 2016 10:00:15
1
has this problem
26 Sep 2016 10:00:15 Peter Bartelt posted:
For my select fields I use bootstrap's „selectpicker“ class together with a dmxDataSet as a datasource. The problem is that the select field is not populated with the filtered data when this class is assigned.I also tried to use a dmxServer Connect datasource but that doesn’t work at all, even without assigning any filters.
This is my datasource:
<head>
…
jQuery.dmxDataSet(
{"id": "SachbearbeiterChgAG", "url": "dmxDatabaseSources/DS_SachbearbeiterChgAG.php", "data": {"B": "{{$URL.B}}", "chg_ag_neu": "{{$FORM.chg_ag_neu}}", "limit": "25"}, "dataSourceType": "database", "dataType": "jsonp", "preventInitialLoad": true}
);
…
</head>My form fields (first select works fine, the second one works only without the selectpicker class):
<body>
…
<select name="chg_ag_neu" class="selectpicker show-tick" id="chg_ag_neu" style="display: none;" data-style="btn-silver fnt-12 lh1 p-t-3 p-b-3 width-25p" data-width="258px" data-binding-repeat-children="{{AnwenderBetriebeAuftraggeber.data}}" data-binding-id="chg_ag_neu" >
<option value="{{ag}}">{{ag}} - {{bezkurz}}</option>
</select>
<select name="chg_ag_stelle" class="selectpicker show-tick" id="chg_ag_stelle" style="display: none;" data-style="btn-silver fnt-12 lh1 p-t-3 p-b-3 width-25p" data-width="258px" data-binding-id="chg_ag_stelle" data-binding-repeat-children="{{SachbearbeiterChgAG.data}}" >
<option value="{{sb_soz}}">{{sb_soz}} - {{sb_vorname}} {{sb_nachname}}</option>
</select>
…
</body>How can this be fixed?
Many thanks in advance.
Replies
Replied 26 Sep 2016 10:04:35
26 Sep 2016 10:04:35 Teodor Kuduschiev replied:
Hello Peter,
Now you should be only using Server Connect data sources, and not the ones created the "old" way using the Data Bindings.
Please create your data source the way i mentioned, and then provide a link to the page, where this happens so we can check what is wrong.
Now you should be only using Server Connect data sources, and not the ones created the "old" way using the Data Bindings.
Please create your data source the way i mentioned, and then provide a link to the page, where this happens so we can check what is wrong.
Replied 28 Sep 2016 06:43:45
28 Sep 2016 06:43:45 Peter Bartelt replied:
Hello Teodor,
thanks for your reply.
For security reasons I can't give access to our intranet. So, in order to follow your advice I built a new demo page from scratch and I fiddled around with Server Connect Datasources and select fields.
This was very helpful and now it is partially functional. But there is still a problem with the second select field as you can see here: test.softaktiv.de/.
Your further assistance would be very appreciated.
thanks for your reply.
For security reasons I can't give access to our intranet. So, in order to follow your advice I built a new demo page from scratch and I fiddled around with Server Connect Datasources and select fields.
This was very helpful and now it is partially functional. But there is still a problem with the second select field as you can see here: test.softaktiv.de/.
Your further assistance would be very appreciated.
Replied 29 Sep 2016 08:05:09
29 Sep 2016 08:05:09 Teodor Kuduschiev replied:
Hello Peter,
I see now - it is not just a css class but a jquery plugin.
I see you used "$('.selectpicker').selectpicker(refresh);" with th OnSuccess Behavior - better use it with the onafterrender event of the repeat region:
And make sure to take a look at this tutorial:
www.dmxzone.com/go/32616/dynamic-dependant-drop-down-lists/
I see now - it is not just a css class but a jquery plugin.
I see you used "$('.selectpicker').selectpicker(refresh);" with th OnSuccess Behavior - better use it with the onafterrender event of the repeat region:
<select name="select1_selectpicker" class="selectpicker show-tick" id="select1_selectpicker" style="display: none;" data-style="btn-silver fnt-12 lh1 p-t-3 p-b-3 width-25p" data-width="258px" data-binding-id="repeat1" data-binding-repeat-children="{{AGSB.data.Auftraggeber}}" onmouseover="MM_callJS('selectpickerRefresh();')" data-binding-repeat-onafterrender="$('.selectpicker').selectpicker(refresh);">And make sure to take a look at this tutorial:
www.dmxzone.com/go/32616/dynamic-dependant-drop-down-lists/
Replied 29 Sep 2016 15:49:15
29 Sep 2016 15:49:15 Peter Bartelt replied:
Hello Teodor,
thanks for your help! Using data-binding-repeat-onAfterRender="..." on the second select field was the solution. I didn't know this data-tag and it was not mentioned in the tutorial. May be I failed to notice it.
Anyway, I am happy with the answer and I have implemented it as follows:
thanks for your help! Using data-binding-repeat-onAfterRender="..." on the second select field was the solution. I didn't know this data-tag and it was not mentioned in the tutorial. May be I failed to notice it.
Anyway, I am happy with the answer and I have implemented it as follows:
<select name="select1_selectpicker" class="selectpicker show-tick" id="select1_selectpicker" style="display: none;" data-binding-id="repeat1" data-binding-repeat-children="{{AGSB.data.Auftraggeber}}" >
<option value="{{ag}}">{{ag}}</option>
</select>
<select name="select2_selectpicker" class="selectpicker show-tick" id="select2_selectpicker" style="display: none;" data-binding-id="repeat2" data-binding-repeat-children="{{AGSB.data.Sachbearbeiter}}" data-binding-repeat-onAfterRender="MM_callJS('selectpickerRefresh();')">
<option value="{{sb_soz}}">{{sb_ag}} {{sb_soz}} - {{sb_vorname}} {{sb_nachname}}</option>
</select> Replied 29 Sep 2016 17:38:01
29 Sep 2016 17:38:01 Teodor Kuduschiev replied:
The onafterrender event is added through the behaviors, included in the HTML5 Data Bindings Extended repeater extension. I just provided the code that it generated by it.