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?

       

       

      @Inject
       @AutoBound
       private DataBinder<Project> projectBinder;
      
      
       @DataField("client")
       @Bound
       private ValueListBox<Client> client = new ValueListBox<Client>(new ClientRenderer());
      
      
      ...
      
      
      
      
          @Override
          protected void onLoad() {
              initJS();
          }
      
      
          public static native void initJS()/*-{
        $wnd.$(function($) {
      
      
        $('.chosen-select').chosen({
        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>
                              </div>
                          </div>