Displaying a pop up message in javascript for my rails application -


question in rails application have method in user controller auto populate. fills in form new user when signing .when fill in emp_id text box looks @ employee table pulling data if id matches emp_id typed auto populate thier emp_first_name , emp_last_name. able have pop message when data returns has data but, im stuck on how make show message if no data exist perticular emp_id...

this controller

class usercontroller < applicationcontroller    def populate_form      @visual = visual.find_by_id(params[:emp_id])       if @visual.nil?        respond_to |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 

this view..

<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> 

here 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 valid employee id.');        } else  {          alert('your employee id has been found please fill in email , password fields click submit register.');        }      });}    );  }); 

.you can use different ajax callbacks check if json response failure , show error message.you can use blank placeholder showing alert messages..such as:-

use in controller show json error

class usercontroller < applicationcontroller    def populate_form      @visual = visual.find_by_id(params[:emp_id])       if @visual.present?         respond_to |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 

view file,with placeholder

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

js code,to show alert

 $('#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 email , password fields click submit register..</b></span>")                   } else {                       //alert('fail');                       $("#show_alert").html("<span class='text-danger     marginl10' ><b>fail employee id wasn't found please try again valid employee id.</b></span>").show();                   }        });      }    );  }); 

Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -