DialogRunner - fix miq_observe functionality on selectpickers

app/assets/javascripts/dialog_field_refresh.js

@@ -7,12 +7,14 @@ var dialogFieldRefresh = {
     });
   },
 
-  initializeDialogSelectPicker: function(fieldName, fieldId, selectedValue, url) {
+  initializeDialogSelectPicker: function(fieldName, fieldId, selectedValue, url, triggerAutoRefresh) {
     miqInitSelectPicker();
-    $('#' + fieldName).selectpicker('val', selectedValue);
+    if (selectedValue !== undefined) {
+      $('#' + fieldName).selectpicker('val', selectedValue);
+    }
     miqSelectPickerEvent(fieldName, url);
-    $('#' + fieldName).on('change', function(){
-      dialogFieldRefresh.triggerAutoRefresh(fieldId, "true");
+    $('#' + fieldName).on('change', function() {
+      dialogFieldRefresh.triggerAutoRefresh(fieldId, triggerAutoRefresh || "true");
       return true;
     });
   },
@@ -44,7 +46,11 @@ var dialogFieldRefresh = {
   refreshDropDownList: function(fieldName, fieldId, selectedValue) {
     miqSparkleOn();
 
-    $.post('dynamic_radio_button_refresh', {name: fieldName, checked_value: selectedValue}).done(function(data) {
+    $.post('dynamic_radio_button_refresh', {
+      name: fieldName,
+      checked_value: selectedValue,
+    })
+    .done(function(data) {
       dialogFieldRefresh.addOptionsToDropDownList(data, fieldId);
       $('#' + fieldName).selectpicker('refresh');
       $('#' + fieldName).selectpicker('val', selectedValue);
@@ -55,20 +61,23 @@ var dialogFieldRefresh = {
     var dropdownOptions = [];
 
     $.each(data.values.refreshed_values, function(index, value) {
-      var option = '<option ';
-      option += 'value="' + value[0] + '" ';
+      var option = $('<option></option>');
+
+      option.val(value[0]);
+      option.text(value[1]);
+
       if (data.values.checked_value !== null) {
         if (value[0] !== null) {
           if (data.values.checked_value.toString() === value[0].toString()) {
-            option += 'selected="selected" ';
+            option.prop('selected', true);
           }
         }
       } else {
         if (index === 0) {
-          option += 'selected="selected" ';
+          option.prop('selected', true);
         }
       }
-      option += '> ' + value[1] + '</option>';
+
       dropdownOptions.push(option);
     });
 
@@ -81,29 +90,38 @@ var dialogFieldRefresh = {
   refreshRadioList: function(fieldName, fieldId, checkedValue, onClickString) {
     miqSparkleOn();
 
-    $.post('dynamic_radio_button_refresh', {name: fieldName, checked_value: checkedValue}, function(data) {
+    $.post('dynamic_radio_button_refresh', {
+      name: fieldName,
+      checked_value: checkedValue
+    }, function(data) {
       var radioButtons = [];
 
       $.each(data.values.refreshed_values, function(index, value) {
-        var radio = '<input type="radio" ';
-        radio += 'id="' + fieldId + '" ';
-        radio += 'value="' + value[0] + '" ';
-        radio += 'name="' + fieldName + '" ';
+        var radio = $('<input>')
+          .attr('id', fieldId)
+          .attr('name', fieldName)
+          .attr('type', 'radio')
+          .val(value[0]);
+
+        var label = $('<label></label>')
+          .addClass('dynamic-radio-label')
+          .text(value[1]);
+
         if (data.values.checked_value === value[0].toString()) {
-          radio += 'checked="" ';
+          radio.prop('checked', true);
         }
 
         if (data.values.read_only === true) {
-          radio += 'title="';
-          radio += __("This element is disabled because it is read only");
-          radio += '" disabled=true ';
+          radio.attr('title', __("This element is disabled because it is read only"));
+          radio.prop('disabled', true);
         } else {
-          radio += onClickString;
+          radio.on('click', new Function(onClickString));
         }
-        radio += '/> ';
-        radio += $('<label></label>').addClass('dynamic-radio-label').text(value[1]).prop('outerHTML');
-        radio += ' ';
+
         radioButtons.push(radio);
+        radioButtons.push(" ");
+        radioButtons.push(label);
+        radioButtons.push(" ");
       });
 
       $('#dynamic-radio-' + fieldId).html(radioButtons);

app/helpers/application_helper/dialogs.rb

@@ -86,7 +86,7 @@ def drop_down_options(field, url)
     extra_options = {
       "data-miq_sparkle_on"  => true,
       "data-miq_sparkle_off" => true,
-      "data-miq_observe"     => {:url => url}.merge(auto_refresh_options(field)).to_json
+      # data-miq_observe functionality is handled by dialogFieldRefresh.initializeDialogSelectPicker here
     }
 
     add_options_unless_read_only(extra_options, tag_options, field)

app/views/report/_menu_form1.html.haml

@@ -69,7 +69,6 @@
                   "data-miq_sparkle_on" => true,
                   :remote               => true,
                   "data-method"         => :post,
-                  :remote               => true,
                   :id                   => 'folder_discard',
                   "data-method"         => :post,
                   'data-click_url'      => {:url => "#{url}?pressed=discard_folders"}.to_json}

app/views/shared/dialogs/_dialog_field.html.haml

@@ -50,8 +50,7 @@
                        drop_down_options(field, url).merge(:multiple => true))
 
         :javascript
-          miqInitSelectPicker();
-          miqSelectPickerEvent('#{field.name}', '#{url}');
+          dialogFieldRefresh.initializeDialogSelectPicker('#{field.name}', '#{field.id}', undefined, '#{url}', '#{field.trigger_auto_refresh}');
 
       - else
         - value = wf.value(field.name) || ''

app/views/shared/dialogs/_dialog_field_radio_button.html.haml

@@ -17,12 +17,12 @@
 - if field.dynamic
   - if field.auto_refresh
     :javascript
-      var onClickString = 'onclick="dialogFieldRefresh.triggerAutoRefresh(\'#{field.id}\', \'#{field.trigger_auto_refresh}\');' + "#{j(remote_function(
+      var onClickString = 'dialogFieldRefresh.triggerAutoRefresh(\'#{field.id}\', \'#{field.trigger_auto_refresh}\');' + "#{j(remote_function(
         :with     => 'miqSerializeForm(\"dynamic-radio-#{field.id}\")',
         :url      => {:action => 'dialog_field_changed', :id => (@edit && @edit[:rec_id]) || 'new'},
         :loading  => 'miqSparkle(true);',
         :complete => 'miqSparkle(false);'
-      ))}" + '"';
+      ))}";
 
       dialogFieldRefresh.listenForAutoRefreshMessages("#{field.id}", function() {
         var checkedValue = $('input:radio[name="#{field.name}"]:checked').val();
@@ -34,12 +34,12 @@
     = button_tag(_('Refresh'), :id => "refresh-dynamic-field-#{field.id}", :class => "btn btn-default")
 
   :javascript
-    var onClickString = 'onclick="dialogFieldRefresh.triggerAutoRefresh(\'#{field.id}\', \'#{field.trigger_auto_refresh}\');' + "#{j(remote_function(
+    var onClickString = 'dialogFieldRefresh.triggerAutoRefresh(\'#{field.id}\', \'#{field.trigger_auto_refresh}\');' + "#{j(remote_function(
       :with     => 'miqSerializeForm(\"dynamic-radio-#{field.id}\")',
       :url      => {:action => 'dialog_field_changed', :id => (@edit && @edit[:rec_id]) || 'new'},
       :loading  => 'miqSparkle(true);',
       :complete => 'miqSparkle(false);'
-    ))}" + '"';
+    ))}";
 
     $('#refresh-dynamic-field-#{field.id}').click(function() {
       var checkedValue = $('input:radio[name="#{field.name}"]:checked').val();

spec/helpers/application_helper/dialogs_spec.rb

@@ -283,8 +283,7 @@
           expect(helper.drop_down_options(dialog_field, "url")).to eq(
             :class                 => "dynamic-drop-down-100 selectpicker",
             "data-miq_sparkle_on"  => true,
-            "data-miq_sparkle_off" => true,
-            "data-miq_observe"     => '{"url":"url","auto_refresh":true,"field_id":"100","trigger":"true"}'
+            "data-miq_sparkle_off" => true
           )
         end
       end
@@ -296,8 +295,7 @@
           expect(helper.drop_down_options(dialog_field, "url")).to eq(
             :class                 => "dynamic-drop-down-100 selectpicker",
             "data-miq_sparkle_on"  => true,
-            "data-miq_sparkle_off" => true,
-            "data-miq_observe"     => '{"url":"url"}'
+            "data-miq_sparkle_off" => true
           )
         end
       end

spec/javascripts/dialog_field_refresh_spec.js

@@ -118,8 +118,14 @@ describe('dialogFieldRefresh', function() {
 
     it('triggers the auto refresh when the drop down changes', function() {
       dialogFieldRefresh.initializeDialogSelectPicker(fieldName, fieldId, selectedValue, url);
-      $("#"+fieldName).trigger('change');
+      $("#" + fieldName).trigger('change');
       expect(dialogFieldRefresh.triggerAutoRefresh).toHaveBeenCalledWith(fieldId, 'true');
     });
+
+    it('triggers autorefresh with "false" when triggerAutoRefresh arg is false', function() {
+      dialogFieldRefresh.initializeDialogSelectPicker(fieldName, fieldId, selectedValue, url, 'false');
+      $("#" + fieldName).trigger('change');
+      expect(dialogFieldRefresh.triggerAutoRefresh).toHaveBeenCalledWith(fieldId, 'false');
+    });
   });
 });