javascriptphpangularjsangular-xeditable

angular $http post return on success


Hi Everyone I have the following due to some situation on one of my projects. I'm working with angular-xeditable, it has a method onbefore save which should returns a string in case I want the from to maintain opened(editable) and true in case I want to form to be closed(not editable).

Now the problem, below you will find my code for one angular function

self.validateBeforeSave = function(data, id){
          var current_id = id;
          $http.post('data/functions.php', {
                action : 'updateQuotasDisease',
                sqlPeriod : data.period,
                sqlDiseaseCode : data.disease_code,
                sqlTargetCountry : data.target_country,
                sqlTargetSpecialty : data.target_specialty,
                sqlChartsAmount : data.charts_amount,
                sqlAmount : data.amount,
                sqlStatus : data.status
              })
              .success(function(response) {
                if(response == 'quota-exists'){
                  $("#"+current_id).css("background-color", "#ffc4c4");
                  swal("That quota already exists!", "", "error");
                  return "error-msg";
                }
                else{
                  $("#"+current_id).css("background-color", "#ffffff");
                  return true;
                }
              })
              .error(function(response) {
                console.log('Error: ' + response);
            });


        };

This code is being called from this HTML, but basically what matters is the need of a return from previous functions of true or "string", you can find onbeforesave="$ctrl.validateBeforeSave($data, line.id)" from there I'm calling the previous function.

<table class="table general-tables table-responsive" ng-show="$ctrl.VisibleQuotasDisease">
                <thead>
                    <tr>
                        <th>Actions</th>
                        <th>Period</th>
                        <th>Disease code</th>
                        <th>Target country</th>
                        <th>Target specialty</th>
                        <th>Charts amount</th>
                        <th>Amount</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="line in $ctrl.quotasDisease" id="{{line.id}}">
                        <td style="white-space: nowrap">
                            <!-- onaftersave="$ctrl.saveRowDisease($data, line.id, line) validateBeforeSave"  -->
                            <form editable-form name="rowform" onbeforesave="$ctrl.validateBeforeSave($data, line.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == line">
                                <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-xs btn-primary">
                                    <i class="fa fa-2x fa-save"></i>
                                </button>
                                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-xs btn-default">
                                    <i class="fa fa-2x fa-close"></i>
                                </button>
                            </form>
                            <div class="buttons" ng-show="!rowform.$visible">
                                <button class="btn btn-xs btn-warning" ng-click="rowform.$show()">
                                    <i class="fa fa-2x fa-edit"></i>
                                </button>
                                <button class="btn btn-xs btn-danger" ng-click="$ctrl.removeRowDisease($index, line)">
                                    <i class="fa fa-2x fa-trash-o"></i>
                                </button>
                            </div>  
                        </td>
                        <td>
                            <span editable-text="line.period" e-class="period-inputs" e-name="period" e-form="rowform" e-maxlength="7" e-required>
                                {{line.period}}
                            </span>
                        </td>
                        <td>
                            <span editable-text="line.disease_code" e-name="disease_code" e-form="rowform" e-maxlength="2" e-required>
                                {{line.disease_code}}
                            </span>
                        </td>
                        <td>
                            <span editable-text="line.target_country" e-name="target_country" e-form="rowform" e-maxlength="2" e-required>
                                {{line.target_country}}
                            </span>
                        </td>
                        <td>
                            <span editable-text="line.target_specialty" e-name="target_specialty" e-form="rowform" e-maxlength="4" e-required>
                                {{line.target_specialty}}
                            </span>    
                        </td>
                        <td>
                            <span editable-text="line.charts_amount" e-name="charts_amount" e-form="rowform"  e-onkeypress="return onlyInt(event)" e-required>
                                {{line.charts_amount}}
                            </span>
                        </td>
                        <td>
                            <span editable-text="line.amount" e-name="amount" e-form="rowform"  e-onkeypress="return onlyInt(event)" e-required>
                                {{line.amount}}
                            </span>
                        </td>
                        <td>
                            <span editable-text="line.status" e-name="status" e-form="rowform"  e-onkeypress="return onlyInt(event)" e-required>
                                {{line.status}}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>

Finnaly I want to do the question how can I do a return from inside the success section of $http post or how can I workaround to solve this situation.

Thanks in advance.

Just as another piece of code here the php function that I'm calling

if($request -> action == 'updateQuotasDisease'){
        $period_sql = $request -> sqlPeriod; 
        $disease_code_sql = $request -> sqlDiseaseCode;
        $target_country_sql = $request -> sqlTargetCountry; 
        $target_specialty_sql = $request -> sqlTargetSpecialty;
        $charts_amount_sql = $request -> sqlChartsAmount; 
        $amount_sql = $request -> sqlAmount;
        $status_sql = $request -> sqlStatus;

        $existing_record = connDB() -> getOne("SELECT count(*) FROM quota_period WHERE period_field = '$period_sql' AND disease_code_numeric = '$disease_code_sql' AND targeted_country = '$target_country_sql' AND targeted_specialty_numeric_code = '$target_specialty_sql' AND amount = $amount_sql AND patient_cases_amount = $charts_amount_sql AND status = $status_sql;");
        if($existing_record < 1){
            connDB() -> query("UPDATE quota_period SET period_field = '$period_sql', disease_code_numeric = '$disease_code_sql', targeted_country = '$target_country_sql', targeted_specialty_numeric_code = '$target_specialty_sql', patient_cases_amount = $charts_amount_sql, amount = $amount_sql, status = $status_sql WHERE period_field = '$period_sql' AND disease_code_numeric = '$disease_code_sql' AND targeted_country = '$target_country_sql' AND targeted_specialty_numeric_code = '$target_specialty_sql';");
        }
        else{
            echo "quota-exists";
        }
    }

Solution

  • First of all, your return is returning only to success call/caller. It can't be caught outside from success.

    The second thought is from the ajax call. http post from angular was written to be always asynchronous. So, your function will never wait for the ajax request be completed.

    But you can use the $q module to make the function will "wait" and receive the result to return it.

    It's something like this:

    function() {
        var deferred = $q.defer();
    
        $http.post('data/functions.php', arguments);
        .success(function(response) {
            //your code
    
            //resolve the promise
            deferred.resolve('request successful');
        })
        .error(function(data,status,headers,config){
            //reject the promise
            deferred.reject('ERROR');
        });
    
        return deferred.promise;
    }
    

    You only may to ensured the result which you want from deferred.promise (which I don't know that).

    You can see a bit more in these links above:

    To then() or to success() in AngularJS

    How to $http Synchronous call with AngularJS

    how to make synchronous http request in angular js