How to show flash message instead of alert box in popup from? - php

Question

My code displays an alert box in my popup form but I want to display the flash message in my popup form:
My Ajax:
$('#password_change_form').submit(function(e) {
e.preventDefault();
var saveThis = this;
$.ajax({
type: "POST",
url: "/changepassword",
data: $(saveThis).serialize(),
success: function(data) {
$('#password_change_form')[0].reset();
alert(data);
},
});
}),
My Controller:
$current_password = $user->password;
if(md5($request_data['password']) == $current_password) {
$user_id = $user->id;
$obj_user = User::find($user_id);
$obj_user->password = md5($request_data['new_password']);
$obj_user->save();
$success_output = '<div class="alert alert-success">Password changed</div>';
} else {
$errors_output = '<div class="alert alert-danger">Wrong old password</div>';
$error = array(
'error' => $errors_output
);
echo json_encode($error);
}
$success = array(
'success' => $success_output
);
echo json_encode($success);
Here I want to show the success message in my popup form:
<div class="modal fade common_modal" id="change_password" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3>Změna hesla</h3>
</div>
<div class="modal-body">
<form role="form" id="password_change_form"
class="common_form_style popup_form">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{{ csrf_field() }}
<span id="form_output"></span>
<div class="form-group">
<label for="password" style="width:100%">Původní heslo </label>
<input id="password" type="password" class="form-control" name="password">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div class="form-group">
<label for="new_password" style="width:100%">NovÄ› heslo</label>
<input id="new_password" type="password" class="form-control" name="new_password">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span class="help-block" style="color:#737373;font-size:14px;float:right;margin-right: 30px;font-weight: 100 !important;">MinimálnÄ› 8 znaků, jedno velké a malé písmeno a Äíslo</span>
</div>
<div class="form-group">
<label for="heslo znovu">Potvrzení heslo</label>
<input id="password_confirmation" type="password" class="form-control" name="password_confirmation">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div class="submit-btn text-center">
<input type="submit"class="btn btn-default chci" value="Uložit" id="submit_form">
</div>
<div style="margin-top:10px;" id="success-messages"></div>
</div>
<div class="col-md-12 pull-right"></div>
</div>
</form>
I Want to display a success message but currently there is alert in my popup form. The alert screen shot:

Answer 1

Please change to this js code.
$(document).ready(function() {
$('#form').submit(function(e) {
e.preventDefault();
var saveThis = $(this);
$.ajax({
type: "POST",
url: "./index.php",
data: $(saveThis).serialize(),
success: function(data) {
var obj = $.parseJSON(data);
// I don't know where you want to show messages.
// In this case, outputting to id="form_output" element.
$('#form_output').html(obj.success);
}
});
});
});