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

У меня есть эти три тега 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>

с кнопкой отправки, которая вызывает функцию отправить (параметр) в 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" );*/
            })
        };

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

@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 относительно строки, полученной от контроллера. (т.е.) если УСПЕХ, должен отображаться первый div, если ПРЕДУПРЕЖДЕНИЕ, должен отображаться второй div, а если ОПАСНОСТЬ, третий.

Есть ли способ этого достичь?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
99
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Почему бы не дать id всем трем 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()


            })

Да. Отличная идея. Но не помогло Аману! div не отображается!

Mike 01.05.2018 19:45

@Mike Посмотрите, что jsfiddle.net/tLhoj51w работает, как ожидалось. Если это не работает для вас, проверьте значение, которое вы получаете в переменной сообщения. Для правильной работы должно быть УСПЕХ, ПРЕДУПРЕЖДЕНИЕ или ОПАСНОСТЬ.

Aman jaura 01.05.2018 19:59

ой. да! Вот в чем проблема. Спасибо, Аман. Хороший обходной путь с использованием идентификатора div в имени строки результата. Ваше здоровье.

Mike 01.05.2018 20:15

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

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

Мой ответ совпадает с тем, что написал Аман Джаура; если я заменю $("#alert_"+message).show() Aman на $('.alert.alert-' + message + '.alert-dismissible').show(), он будет работать так же, как код Aman; Итак, та же идея, но в моем ответе есть менее полный пример; Ответ Амана - лучший ответ

landru27 01.05.2018 21:28

Да. Собственно ландру. Даже ваш код работал нормально. Это была неправильная строка моего возвращаемого типа. Принял ответ Амана просто потому, что он был немного более ясным.

Mike 03.05.2018 16:44

Другие вопросы по теме