Paul Gwamanda Paul Gwamanda - 5 months ago 27
AngularJS Question

Laravel /Angularjs Modal Save / Delete code does nothing on submit

I'm working on a laravel/angularjs app that uses a bootstrap modal to save/edit and delete records
I'm having a hard time understanding what i'm doing wrong, it does not save/edit the record and doesn't do anything when the submit button is clicked.

Below is my Modal code (I've shortened it), please tell me what you think is wrong?

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" 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>
<h4 class="modal-title" id="myModalLabel">@{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="AccountsForm" class="form-horizontal" novalidate="">
<div class="form-group">
<label for="account_name"
class="col-sm-3 control-label">Account Name</label>
<div class="col-sm-9">
<input type="text"
class="form-control "
id="account_name"
name="@{{account_name}}"
placeholder="Account Name"
value="account_name"
ng-model="account_name"
required="true">
<span class="help-inline"
ng-show="AccountsForm.account_name.$invalid && AccountsForm.account_name.$touched">Account number field is required
</span>
</div>
</div>
</div>
</div>
</div>




UPDATE
Adding app.controller JS code for saving/editing

//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "accounts";

//append account id to the URL if the form is in edit mode
$scope.id = id;
if (modalstate === 'edit'){
url = "accounts/" + id;}
$http({
method: 'POST'
}).success(function(response) {
console.log(response);
location.reload();
});
}

Answer

So the code should look like this:

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" 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>
        <h4 class="modal-title" id="myModalLabel">@{{form_title}}</h4>
    </div>
    <div class="modal-body">
        <form name="AccountsForm" class="form-horizontal" novalidate="">
            <div class="form-group">
                <label for="account_name"
                       class="col-sm-3 control-label">Account Name</label>
                <div class="col-sm-9">
                    <input type="text"
                           class="form-control "
                           id="account_name"
                           name="account_name"
                           placeholder="Account Name"
                           value="@{{account_name}}"
                           ng-model="account.account_name"
                           required="true">
                      <span class="help-inline"
                            ng-show="AccountsForm.account_name.$invalid && AccountsForm.account_name.$touched">Account number field is required
                      </span>
                </div>
           </div>
      </div>
  </div>

     //save new record / update existing record
    $scope.save = function(modalstate, id) {
    var url = API_URL + "accounts";

    //append account id to the URL if the form is in edit mode
    $scope.id = id;
    if (modalstate === 'edit'){
        url = "accounts/" + id;}
    $http({
        method: 'POST',
        url: url,
        data: $.param($scope.account),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }).success(function(response) {
        console.log(response);
        location.reload();
    });
}