0 Replies Latest reply on Jun 27, 2014 1:05 AM by Aaron Anderson

    databinding to dynamically created elements

    Aaron Anderson Newbie

      I am attempting to autobind a ValueListBox to a select element decorated with chosen jquery plugin. http://harvesthq.github.io/chosen/ If I do not enable the chosen plugin the binding works perfectly fine. However with chosen enabled the model is not being updated with the value selected in chosen. Chosen generates a parallel div and renders a select like input and once a value is chosen it updates the original select. Perhaps the autobinding functionality is listening for click events while chosen directly updates the select. I thought I could manually bind it but the DataBinder class requires a Widget and since the chosen input is dynamically rendered in JavaScript this isn't an option. In my submit event listener I could just directly read the selected value from the DOM but I was wondering if there was a better alternative that still utilized the binding functionality?



       private DataBinder<Project> projectBinder;
       private ValueListBox<Client> client = new ValueListBox<Client>(new ClientRenderer());
          protected void onLoad() {
          public static native void initJS()/*-{
        $wnd.$(function($) {
        allow_single_deselect : true,
        width : '80%'


      <div class="form-group">
                              <label for="client">Client</label>
                              <div >
                                  <select class="chosen-select" id="client" data-placeholder="Choose a Client..." style="display: none;"><option value="Client1">Client1</option><option value="Client2">Client2</option><option value=""></option></select><div class="chosen-container chosen-container-single chosen-container-active" style="width: 80%;" title="" id="client_chosen"><a class="chosen-single" tabindex="-1"><span>Client1</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result" data-option-array-index="0">Client1</li><li class="active-result" data-option-array-index="1">Client1</li></ul></div></div>