從另一個模型在選擇軌道上的現有記錄填充新表單上的文本字段

Question

我有一個包含現有記錄的DefaultTemplate模型。 我有另一個Template模型，其中我有一個帶有DefaultTemplate記錄的 collection_select。

我想要做的是，一旦用戶選擇這些選項之一，其相關數據（例如內容和類型）應自動填充到新模板的 text_fields 中，以便可以保存它們。

我已經研究並發現我可以使用 JQuery 和 Ajax 調用來做到這一點，但是我不知道從哪里開始？ 我根據 Rails 3 中另一個 collection_select 中的選定項目引用了Auto populate text_fields ，它回答了我想要的，但這個人自己發現代碼很糟糕。 我將不勝感激任何幫助。 謝謝

Answer 1

解決了！！

好的，所以在撓頭2天后，我發現答案很簡單。 只是我太害怕甚至不敢嘗試 ajax，我從來沒有真正關注過它。 以防萬一有人在尋找同樣的東西，這里是對我有用的解決方案。

application.js 文件

$(function($) {
    $("#email_template_id").change(function() {
        var selected_id = $("#email_template_id").val()
        if (selected_id == '')
        {
          $('#email_template_email_subject').val('')
        }
        else {
          $.ajax({
            type: "GET",
            url: "/default_email_templates/" + selected_id + ".json",
            dataType: 'json',
            success: function(data){
              $('#email_template_email_subject').val(data.email_subject)
            }
          });
        }
    });
});

查看（在_form.html.erb的 _form.html.erb 中，其中 DefaultEmailTemplate 是其值應出現在選擇中的模型）

<%= form_for(@email_template) do |f| %>
   <div class="field">
     <%= f.label :default_email_template_id, "Template Type" %>
     <%= f.collection_select(:id, DefaultEmailTemplate.all, :id, :email_type, {prompt: "Select one"}, {:data => {remote: true}}) %>
   </div>
   <div class="field">
     <%= f.label :email_subject %>
     <%= f.text_field :email_subject %>
   </div>
   <div class="actions">
    <%= f.submit %>
   </div>
 <% end %>

我們可以通過簡單地一個接一個地傳遞參數來減少 ajax 代碼，但是，我不太清楚這一點，並且還沒有真正嘗試過。 請發布有關代碼的任何建議。 謝謝。

PS：也許我看起來不正常，但是當我這樣做時，這些對我幫助很大

如何執行 Ajax GET 請求以從 Rails 獲取數據並將其傳遞給 javascript（谷歌地圖）？

在軌道上的 ajx 中傳遞 text_field 值

Answer 2

 public JsonResult FillTask(int projectID) { List<tbltask> task = new List<tbltask>(); task = te.getTasks(projectID); model.Tasks = task; model.task = task.Select(x => new SelectListItem { Value = x.TaskId.ToString(), Text = x.TaskName }).ToList(); //var tasks = model.Tasks.Where(c => c.ProjectId == project); return Json(model, JsonRequestBehavior.AllowGet); }

 <script type="text/javascript"> $(document).ready(function () { $("#tblprojects").change(function() { var projectID = $('#tblprojects').val(); if(projectID>0){ FillTask(projectID) } }); }); function FillTask(projectID) { $.ajax({ url: '@Url.Action("FillTask", "TimeEntry")', type: "GET", dataType: "JSON", data: { 'projectID': projectID}, success: function (data) { $(data.task).each(function() { //this refers to the current item being iterated over var option = $('<option />'); option.attr('value', this.Value).text(this.Text); $('#task').append(option); }); } }); } </script>

只有當我單擊該項目的項目任務詳細信息加載到另一個下拉列表中時，我才綁定與該項目相關的任務，它使用 ajax 和 jquery 稱為級聯下拉列表！ 傑森方法也