CODEWITHSUNDEEP
jqueryhtmlcssajaxlaravel
Naveen Kumar
Naveen Kumar

Reputation: 1626

How to style html elements according to ajax response

I have ajax form with change password functionality. The functionality works fine. I show a small notification in the page when the password changing is success with span element. I want to show different styling when the response message changes. It shows the same styling for both success and failure response.

var dataString = 'old_pass='  +old_pass+ '&new_pass='  +new_pass+ '&re_pass='  +re_pass; 

     $.ajax({

      type : "post",
      url : 'change_password',
      data : dataString,
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      cache : false,
      success : function(data){

         $('#password_notify').addClass('password-success').text(data.msg).fadeOut(2000);
         $('#change_pass_form').find('input:password').val('');

},
       error : function(data){
         alert(data.msg);
}

});

Here is my controller code

if (\Hash::check($pass_data['current_pass'],\Auth::user()->password )) {

$user = new User();
    if($user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']])){
      return response()->json(['msg'=>'Password Changed']);
    }
     }

    else{
       return response()->json(['msg'=>'Wrong Password']);
        }

What i want to do is when the response message contains Wrong Password. I want to add a different class in ajax notification and if the response message is Password Changed. I should add password-success class to it

Upvotes: 0

Views: 1827

Answers (3)

Nawed Khan
Nawed Khan

Reputation: 4391

Return either Success true/false like this:

if($user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']])){
  return response()->json(['success'=>true, 'msg'=>'Password Changed']);
}
 }

else{
   return response()->json(['success'=>false, 'msg'=>'Wrong Password']);
    }

then use data.success to decide which css class to use like this:

if(data.success == true){
   $('#password_notify').addClass('password-success').text(data.msg).fadeOut(2000);
}
else{
   $('#password_notify').addClass('password-failed').text(data.msg).fadeOut(2000);
}

or return the name of class like this:

if($user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']])){
  return response()->json(['cssclass'=>'password-success', 'msg'=>'Password Changed']);
}
 }

else{
   return response()->json(['cssclass'=>'password-failed', 'msg'=>'Wrong Password']);
    }

and use it in one line like this:

$('#password_notify').addClass(data.cssclass).text(data.msg).fadeOut(2000);

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50798

Balancing the logic on both the front and back end requires duplicating effort. Instead, why not just return a view from the backend and just use .replace() or nest it and use .html()

$succes = $user->where('id',\Auth::user()->id)->update(['password'=>$pass_data['new_pass']]);
return response()->json([
    'html' => view()->make('auth.password.partials.response', [
        'success' => $success
    ])->
]);

Then you can make the vie at auth/password/partials/response. Inside of it, build out your HTML:

<div id="password-nofify" class="{{ isset($success) ? 'password-success' : 'password-error' }}">
    @trans('auth.password.'. isset($success) ? 'success' : 'failure')
</div>

And then create a lang file called auth if it doesn't exist. Then add an multidimensional array like this:

//resources/lang/en/auth
return [
    'password' => [
        'success' => 'Password Changed',
        'failure' => 'Wrong Password
    ]
]

Finally, in your JavaScript response. just replace the element:

$('#password_notify').replace(data.html).fadeOut(2000);

Upvotes: 2

Hemal
Hemal

Reputation: 3760

You can check value of data in ajax success function and then based on that add different css class.

<style>
.password-success
{
    background-color:green
}
.password-error
{
    background-color:red
}
</style>

if(data.msg=="Password Changed")
{
    $('#password_notify').addClass('password-success').text(data.msg).fadeOut(2000);
}
else
{
    $('#password_notify').addClass('password-error').text(data.msg).fadeOut(2000);
}

Upvotes: 0

Related Questions