4 Replies Latest reply on Apr 30, 2013 11:14 AM by DecisionPoint Keith Gable

    RhoElements Select Not Rendering Correctly With Ajax Call

      We have a page with two select dropdown boxes. The selection of the first dropdown is supposed to trigger an ajax call to populate the second dropdown based upon the initial selection. We have a javascript function defined for the 'onchange' event of the first dropdown. This function makes the ajax call to populate the second dropdown. This function works fine. However, the first select dropdown does not render the selected option until focus is manually pulled away from the first dropdown. Removing the ajax call fixes the rendering problem, so it's definitely the existence of the ajax call that is causing the issue. We have tried putting focus on a different object programmatically when processing the response from the ajax call, thinking this would trigger the dropdown to render properly, but this did not work.

       

      Has anyone else encountered this scenario and, if so, found a work-around?

       

      Thanks

      -tom

        • Re: RhoElements Select Not Rendering Correctly With Ajax Call
          Kutir Mobility

          Hi Thomas

           

          I tried this scenario with an application, its working fine for me.

          I am sharing the code, hope this will help  you .

           

          index.html.erb

          <select name="filter_task1" id="filter_task1" class="select_filter1">           

            <option selected="T" value="T" style="font-family: Tahoma;">TamilNadu</option>

            <option value="K" style="font-family: Tahoma;">Kerala</option>

          </select>

          <div id="second_filter">

            <select name="filter_task" id="filter_task" class="select_filter">           

            </select>

          </div>

           

          index.js

          <script type="text/javascript">

                  function filterTasks() {

                      var option_selected = $("option:selected", this).val();

                      var jqxhr = $.post('/app/District/get_district', {

                          filter_value: option_selected

                        }, function(data) {

                           $("#second_filter").html(data).trigger('create')

                        });

                    }

           

                    $(document).ready(function() {

                      $('#filter_task1').live("change",filterTasks);

                    });

           

          </script>

           

          district_controller

          def get_district

              if @params['filter_value'] == 'T'

                @district = ["Chennai","Coimbatore"]

              elsif @params['filter_value'] == 'K'

                @district = ["Ernakulam","Trivandrum"]

              end

          end

           

          get_district.erb

          <select name="filter_task_district" id="filter_task_district" class="filter_task_district"> 

            <% @district.each do |district| %>

                      <option value="<%= district%>" style="font-family: Tahoma;"><%= district %> </option>

            <% end %>           

          </select>

           

          I am using rhoelements 2.2.1.13

           

           

          Thanks

          Surendran S

          Kutir Mobility

          • Re: RhoElements Select Not Rendering Correctly With Ajax Call
            DecisionPoint Keith Gable

            If you are using jQuery Mobile, you probably need to make jQuery Mobile re-render their controls. If I remember correctly, you trigger the "create" event on the select. So, $("#myselect").trigger("create");

             

            We switched to Bootstrap a while back. It's much simpler and thus things like this happen less often