Показать тег div, соответствующий строке, полученной от контроллера

Question

У меня есть три тега div в моем html.

<div class="alert alert-success alert-dismissible" role="alert" style="display: none;">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Success!</strong> Data inserted into OVERRIDE table.
</div>
<div class="alert alert-warning alert-dismissible" role="alert" style="display: none;">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Heads up!</strong> Few roles failed. SourceIDs of $uploadResult$ policies mentioned in UI are already present. 
</div>
<div class="alert alert-danger alert-dismissible" role="alert" style="display: none;">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Snap!</strong> All sourceIDs are already present in OVERRIDE table. 
</div>

с кнопкой отправки, которая вызывает submit (параметр) функцию в js. Это делает,

$scope.submit = function(employees) {
           $http({
                'url' : '/updateOverride',
                'method' : 'POST',
                'headers': {'Content-Type' : 'application/json'},
                'data' : $scope.employees
            }).success(function(employees){
                $scope.marketForm.texts.push({'text' : employees.text});
                /*$scope.responseMap = employees;*/

               /* document.getElementById('msgTimeout').style.display = "block";
                $( "#msgTimeout" ).load(window.location.href + " #msgTimeout" );*/
            })
        };

Теперь у меня есть этот метод контроллера, который возвращает одну из 3 строк УСПЕХ , ПРЕДУПРЕЖДЕНИЕ или ОПАСНОСТЬ .

@RequestMapping(value = "/updateOverride", method = RequestMethod.POST, consumes=MediaType.APPLICATION_JSON_VALUE)
    @ResponseStatus(HttpStatus.OK)
    public @ResponseBody Map<String, Object> addNewElement(@RequestBody String overrideData) throws JsonParseException, JsonMappingException, IOException{
        System.out.println(overrideData);
        DBController dbController = new DBController();
        Map<String, Object> resultMap = new HashMap<String, Object>();
        String insertResult = dbController.mapJSONObject(overrideData);
        System.out.println("\nInsert result:: -> "+insertResult + "\n");
        resultMap.put("updateOverride", insertResult);
        return resultMap;
    }
}

Я хочу отобразить соответствующий тег div относительно строки, полученной от контроллера. (т.е.) если SUCCESS , должен отображаться первый div, если WARNING , должен отображаться второй div, а если DANGER , третий.

Есть ли способ, которым это может быть достигнуто?

Answer 1

Просто создайте строку, которая включает тип div, который вы хотите отобразить, используйте эту строку в качестве селектора CSS, а затем используйте ваш любимый механизм манипулирования DOM (jQuery и т. Д.), Чтобы изменить атрибут display с none к тому, что подходит для вашей страницы.

selector = ".alert.alert-" + type + ".alert-dismissible"
$(selector).Show(...)

Answer 2

Почему бы не дать идентификатор всем трем div, как

<div id="alert_success" class="alert alert-success alert-dismissible" role="alert" style="display: none;">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Success!</strong> Data inserted into OVERRIDE table.
</div>
<div id="alert_warning" class="alert alert-warning alert-dismissible" role="alert" style="display: none;">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Heads up!</strong> Few roles failed. SourceIDs of $uploadResult$ policies mentioned in UI are already present. 
</div>
<div id="alert_danger" class="alert alert-danger alert-dismissible" role="alert" style="display: none;">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>Snap!</strong> All sourceIDs are already present in OVERRIDE table. 
</div>

Тогда в случае успеха функция обратного вызова

success(function(employees){
                $scope.marketForm.texts.push({'text' : employees.text});
                $(".alert").hide();
                var message = employees.text.toLowerCase(); // **assuming SUCCESS**
                $("#alert_"+message).show()


            })