为我的rails应用程序显示javascript弹出消息

Displaying a pop up message in javascript for my rails application

本文关键字：消息 javascript 显示 我的 rails 应用程序      更新时间：2023-09-26

问题是在我的rails应用程序中，我的用户控制器中有一个方法可以自动填充。当新用户注册时，这会为他们填写一个表格。当他们填写我的emp_id文本框时，它会查看我的员工表，我就是从中提取这些数据的。如果一个id与他们键入的emp_id匹配，它会自动填充他们的emp_first_name和emp_last_name。当数据返回有数据时，我可以有一个弹出消息，但我一直在想，如果不存在特定emp_id的数据，如何让它显示消息。。。

这是我的控制器

class UserController < ApplicationController
  def populate_form
    @visual = Visual.find_by_id(params[:emp_id])

    if @visual.nil?
      respond_to do |format|
        format.json { render json: @user, status: :unprocessable_entity, flash[:error] => "Error No ID found." }   
        #This didn't work no message displays..
      end
    else

      @emp_first_name = @visual.first_name
      @emp_last_name = @visual.last_name
        render :json => {
           :emp_first_name => @emp_first_name,
           :emp_last_name => @emp_last_name
        }
     end
   end

这是我的看法。。

<div class='row form-group'>
  <div class='col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5 text-right'>
    <%= f.text_field :emp_id, tabindex: 1, id: 'emp_id', autofocus: true, placeholder: t( 'login_label' ), class: 'form-control' %>
  </div>
</div>
<div class='row form-group'>
  <div class='col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5 text-right'>
    <%= f.text_field :emp_first_name, tabindex: 1, id: 'emp_first_name', autofocus: true, placeholder: t( 'emp_first' ), class: 'form-control' %>
  </div>
</div>
<div class='row form-group'>
  <div class='col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5 text-right'>
    <%= f.text_field :emp_last_name, tabindex: 1, id: 'emp_last_name', autofocus: true, placeholder: t( 'emp_last' ), class: 'form-control' %>
  </div>

这是我的app.js

 $(document).ready(function(){
   $('#emp_id').change(function() {
     var url = "/user/populate_form?emp_id="+$(this).val();
     $.getJSON(url, function(data) {
       if(!(data.emp_first_name === undefined))
         $('#emp_first_name').val(data.emp_first_name);
       if(!(data.emp_last_name === undefined))
         $('#emp_last_name').val(data.emp_last_name);
       if('#emp_first_name' === null) {
         alert('Fail employee ID wasn't found please try again with a valid employee ID.');
       } else  {
         alert('Your employee ID has been found please fill in the email and password fields then click submit to register.');
       }
     });}
   );
 });

。您可以使用不同的ajax回调来检查json响应是否失败，然后显示错误消息。您可以用空白占位符来显示警报消息。。例如：-

在控制器中使用它来显示json错误

class UserController < ApplicationController
  def populate_form
    @visual = Visual.find_by_id(params[:emp_id])

    if @visual.present?
        respond_to do |format|
            @emp_first_name = @visual.first_name
            @emp_last_name = @visual.last_name
             render :json => {
                 :emp_first_name => @emp_first_name,
                 :emp_last_name => @emp_last_name
                              }
    else       
            format.js { render :json => "id not present", :status => 400 }
            format.html { render :json => "id not present" , :status => 400 }
         end    
     end
   end

查看文件，带有占位符

<div id="show_alert" style="display:none;"></div>

js代码，显示警报

 $('#emp_id').change(function() {
       var url = "/user/populate_form?emp_id="+$(this).val();
       $.getJSON(url, function(data) {
         if(!(data.emp_first_name === undefined))
         $('#emp_first_name').val(data.emp_first_name);
         if(!(data.emp_last_name === undefined))
         $('#emp_last_name').val(data.emp_last_name);
          }).done(function (response) {
                  if (response.success == 'success') {               
                      //alert('success');    
                        $("#show_alert").html("<span class='text-success marginl10' ><b>Your employee ID has been found please fill in the email and password fields then click submit to register..</b></span>")
                  } else {
                      //alert('fail');
                      $("#show_alert").html("<span class='text-danger     marginl10' ><b>Fail employee ID wasn't found please try again with a valid employee ID.</b></span>").show();
                  }
       });
     }
   );
 });

控制器：

class UserController < ApplicationController
  def populate_form
    @visual = Visual.find_by_id(params[:emp_id])

    unless @visual.present?
      render json: {user: @user, status: :unprocessable_entity, error: 404}
    else

      @emp_first_name = @visual.first_name
      @emp_last_name = @visual.last_name
        render :json => {
           :emp_first_name => @emp_first_name,
           :emp_last_name => @emp_last_name
        }
  end
end

js:

$(document).ready(function(){
   $('#emp_id').change(function() {
     var url = "/user/populate_form?emp_id="+$(this).val();
     $.getJSON(url, function(data) {
       if( !( data.emp_first_name === undefined ))       $('#emp_first_name').val(data.emp_first_name);
       if( !( data.emp_last_name.length === undefined )) $('#emp_last_name').val(data.emp_last_name);
       if( (data.error * 1) == 404) {
         alert("Fail employee ID wasn't found please try again with a valid employee ID.");
       } else  {
         alert("Your employee ID has been found please fill in the email and password fields then click submit to register.");
       }
     });
   }
   );
 });
相关文章：