Question

我在Rhodes-application中使用JQuery Mobile。

我有两个选择节点。一个是项目，另一个是属于某个项目的活动。当用户选择某个项目时，我向我的控制器发出AJAX调用。在我的控制器中，我获得所有活动并将其转换为选项节点。我将选项作为字符串返回给我的AJAX调用。这一切都很好，但我只面临一个错误（我希望在我的代码中）。

例如我有：项目AAA;活动A，B，C 项目BBB;活动D，E，F

当我选择项目AAA时，他会显示活动“做出你的选择”，A，B和C.例如我选择B.之后我选择项目BBB。 AJAX调用加载“做出你的选择”，D，E和F.但在我看来，B活动仍然存在。但是，当我问AJAX时，他说我选择了“做出你的选择”，而不是我的B活动。我错过了哪一部分？

查看

<div data-role="fieldcontain">
      <label for="registration[project_id]" class="fieldLabel" id="label_project_id"><%= Localization::Registrations[:project] %></label>
      <select id="registration[project_id]" name="registration[project_id]" onchange="javascript: changedProject(this.options[this.selectedIndex].value);">
            <option value="-1"><%= Localization::Registrations[:make_choice] %></option>
            <% @projects.each do |project| %>
              <option 
                  value="<%= project.object %>"
                  <%= "selected" if project.object == @registration.project_id %>>
                <%= project.name %>
              </option>
            <% end %>
      </select>
</div>

<div id="activity_container" data-role="fieldcontain">
      <label for="registration[activitynumber_id]" class="fieldLabel" id="label_activitynumber_id"><%= Localization::Registrations[:activity] %></label>
      <select id="registration[activitynumber_id]" name="registration[activitynumber_id]">
            <option value="-1"><%= Localization::Registrations[:make_choice] %></option>
      </select>
</div>

<script type="text/javascript">
function changedProject(project_id) {
      $.ajax({
          url: "/app/Registration/load_activities",
          dataType: "text",
          data: ({ project_id: project_id }),
          success: function(data) {
            addOptionStringToDropdownlist(data);             
            return true;
          },
          error: function (request, status, error) {
            alert(request.responseText + '\n\n' + error);
          }
      });
}

function eraseDropdownlist() {
      $('#registration\\[activitynumber_id\\]').empty();
      $('#registration\\[activitynumber_id\\]').append( new Option('<%= Localization::Registrations[:make_choice] %>', '-1', true, true) );
}

function addOptionStringToDropdownlist(data) {
      eraseDropdownlist();
      $('#registration\\[activitynumber_id\\]').append(data);
      $("#activity_container").trigger('create');
}
</script>

控制器

def load_activities
    result_options = ""
    project_id = @params['project_id']
    activitynumber_id = @params['activitynumber_id'].nil? ? "" : @params['activitynumber_id'] 
    activities = ProjectActivities.find(
      :all,
      :conditions => {'projectId' => project_id}
      )
    activities.each do |activity|
      selected = activitynumber_id == activity.object ? " SELECTED " : ""
      result_options += "<option value='" + activity.object + "'" + selected + ">" + activity.name + "</option>"
    end
    render :string => result_options
end

我还试图将“activity-container”-div留空，并在选择项目后将html插入div中。然后一切正常，但它没有显示原生选择框。

<div id="activity_container" data-role="fieldcontain">
</div>

<script type="text/javascript">
function addOptionStringToDropdownlist(data) {
      var create = '<label for="registration[activitynumber_id]" class="fieldLabel" id="label_activitynumber_id"><%= Localization::Registrations[:activity] %></label>'; 
      create += '<select id="registration[activitynumber_id]" name="registration[activitynumber_id]">';
      create += '<option value="-1"><%= Localization::Registrations[:make_choice] %></option>';
      create += data;
      create += '</select>';  
      $('#activity_container').html(create);
      $("#activity_container").trigger('create');
    }
</script>

Screenshot

使用JQuery Mobile动态加载列表框

0 个答案: