Wie style HTML-Elemente nach Ajax Antwort

Question

Ich habe Ajax Formular mit Passwort ändern Funktionalität. Die Funktionalität funktioniert gut. Ich zeige eine kleine Benachrichtigung auf der Seite, wenn das Ändern des Passworts mit span Element erfolgreich ist. Ich möchte ein anderes Styling zeigen, wenn sich die Antwortnachricht ändert. Es zeigt das gleiche Styling für Erfolg und Misserfolg.

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); 
} 

}); 

Hier ist mein Controller-Code

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

$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']); 
     } 

Was ich tun möchte ist, wenn die Antwortnachricht Falsches Passwort enthält. Ich möchte eine andere Klasse in Ajax Benachrichtigung hinzufügen und wenn die Antwortnachricht ist Passwort geändert. Ich sollte password-success Klasse hinzufügen

Answer 1

Sie können Wert von data in Ajax Erfolgsfunktion überprüfen und dann auf der Grundlage dieser fügen Sie verschiedene CSS-Klasse.

<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); 
} 

Answer 2

Balancing der Logik auf der Vorder- und Rückseite Ende erfordert Anstrengung zu duplizieren. Stattdessen warum nicht nur einen Blick aus dem Backend zurückkehren und nur .replace() oder nisten sie und .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 
    ])-> 
]); 

Dann können Sie die vie bei auth/password/partials/response machen verwenden verwenden. Innerhalb davon, bauen Sie Ihre HTML:

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

Und dann eine lang Datei auth genannt erstellen, wenn es nicht existiert. Dann ein mehrdimensionales Array wie folgt hinzu:

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

schließlich in Ihrer JavaScript Antwort. nur das Element ersetzen:

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

Answer 3

Return entweder Erfolg wahr/falsch wie folgt aus:

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']); 
    } 

dann data.success verwenden, um die CSS-Klasse zu entscheiden, wie diese zu verwenden:

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); 
} 

oder geben Sie den Namen der Klasse wie folgt ein:

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']); 
    } 

und es in einer Zeile wie diese verwenden:

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