CODEWITHSUNDEEP
javascripthtmlangularsweetalert
theProdigyLebron
theProdigyLebron

Reputation: 111

When using sweetalert, html drop down not reflecting the new entry

I have an HTML drop down and there are some entries in the drop-down already. Now if a user selects an option called "New Version", I open an alert box asking the versionName, and push that to the list of drop down items and that newly entered option is then selected as default option from the drop-down list. Now when I use regular javascript alert box, everything goes smoothly. The newly entered version is the chosen option from the drop-down. However, when I start using sweetalert, that behavior is not there anymore. What happens is when the user chooses "New Version", the sweetalert box opens, the user enters the new version name, presses ok, but the drop down still shows the selected value as "New Version" and I do not see the new version name within the drop down. I only see the new version within the drop down when I choose another option from the drop-down, that essentially "refreshes" the drop down and then I can see my new value.

Corresponding angular code (using javascript alert that works fine):

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {
        var newVersionName = prompt("Please provide the name of the new version");
        $scope.requestDetails.decisionVersion = newVersionName;
        $scope.dcnVersions.push(newVersionName);
    }
}

Sweetalert logic:

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {

        swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then(versionName => 
        this.updateDropDownList(versionName));  
    }
} 

 $scope.updateDropDownList = function(versionName) {
        $scope.requestDetails.decisionVersion = versionName;
        $scope.dcnVersions.push(versionName);

    }

html code:

<label class="col-sm-4 col-form-label">Version</label>
<div class="col-sm-2">
    <select required="required" ng-options="versionName for versionName in dcnVersions"  class="wd100" ng-model="requestDetails.decisionVersion" ng-change='onSetDecisionVersion()'>
        <option ng-selected="true" value="">Select</option>
    </select>
</div>

I have commented out the sweetalert portion of the code. The javascript alert box code is there and that works as expected. I am not able to figure out why the drop down doesn't reflect the newly entered version immediately with sweet alert. This is the CDN I am using for sweetalert: 

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Also, when I send this requestDetails.decisionVersion to the backend with the sweetalert logic, reguestDetails.decisionVersion reads the correct value but for whatever reason, the correct value is not reflected on the dropdown.

Upvotes: 3

Views: 671

Answers (1)

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6887

You need to use $timeout, as angular js has a different timing pattern.

Here is your working jsfiddle code: http://jsfiddle.net/4wm1k6qs/

var app = angular.module('sweetalert', []);

app.controller('sacontroller', function($scope, $timeout){
$scope.option = "Select One";
    $scope.options = ["Select One","a", "b", "New Version"];
  $scope.onOptionChange = function(){
  if($scope.option !== "New Version") return;
    onNewVersionSelect();
  }

  function onNewVersionSelect(){
   swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then((text) =>{
            $scope.options.push(text);
          $timeout(function(){
            $scope.option = text;
          })
        })
  }


});

The code is fine.. You need to use $timeout as like

$timeout(function(){
            $scope.option = text;
          })

Upvotes: 1

Related Questions