Автоматическое заполнение текстовых полей на основе выбранного элемента из другого collection_select в Rails 3

#javascript #jquery #ajax #database #ruby-on-rails-3

#javascript #jquery #ajax #База данных #ruby-on-rails-3

Вопрос:


Привет, люди

Я пытаюсь разобраться в этом, но все еще не могу этого сделать.

У меня есть приложение rails 3, я работаю со счетами и платежами. В форме для платежей у меня есть collection_select, где я отображаю все номера счетов (извлеченные из базы данных postgres), и что я пытаюсь сделать, так это при выборе счета автоматически заполнять другие текстовые поля (поставщик, адрес и т.д.) Без перезагрузки страницы в той же форме.

Я знаю, что должен использовать ajax, js, jquery, но я новичок в этих языках, поэтому я не знаю, как и с чего начать

надеюсь, вы сможете мне помочь … спасибо

Ответ №1:

Что вам нужно сделать, так это направить вызов ajax на контроллер, который ответит json, содержащим информацию. затем вы будете использовать jquery для заполнения различных полей.

В ваших маршрутах:

 get "invoice/:id/get_json", :controller=>"invoice", :action=>"get_json"
  

В вашем invoice_controller:

 def get_json
  invoice = Invoice.find(params[:invoice_id])
  render :text => invoice.to_json
end
  

В вашей модели счета (если метода to_json по умолчанию недостаточно):

 def to_json
  json = "{"
  json  = "id:'#{self.id}'"
  json  = ",date_created:'#{self.date}'"
  ...      //add other data  you want to have here later
  json  = "}"
end
  

В вашем файле javascript,

 $("#invoice_selecter").change(function(){  //calls this function when the selected value changes
  $.get("/invoice/" $(this).val() "/get_json",function(data, status, xhr){  //does ajax call to the invoice route we set up above
    data = eval(data);  //turn the response text into a javascript object
    $("#field_1").val(data.date_created);  //sets the value of the fields to the data returned
    ...
  });
});
  

Вероятно, вы столкнетесь с несколькими проблемами, я бы настоятельно рекомендовал загрузить и установить fire bug, если вы не используете Google Chrome .. и если вы используете, убедитесь, что используете инструменты разработки. Я полагаю, что вы можете открыть их, щелкнув правой кнопкой мыши и нажав «Проверить элемент». Благодаря этому вы должны иметь возможность отслеживать ajax-запрос, а также то, удалось ли ему выполнить и прочее.

Комментарии:

1. Вы когда-нибудь смотрели на код, который написали 4 года назад, и приходили в ужас от того, что вы делали раньше?