У меня есть эти три тега 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">×</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">×</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">×</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, а если ОПАСНОСТЬ, третий.
Есть ли способ этого достичь?
Почему бы не дать 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">×</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">×</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">×</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()
})
@Mike Посмотрите, что jsfiddle.net/tLhoj51w работает, как ожидалось. Если это не работает для вас, проверьте значение, которое вы получаете в переменной сообщения. Для правильной работы должно быть УСПЕХ, ПРЕДУПРЕЖДЕНИЕ или ОПАСНОСТЬ.
ой. да! Вот в чем проблема. Спасибо, Аман. Хороший обходной путь с использованием идентификатора div в имени строки результата. Ваше здоровье.
Просто создайте строку, которая включает тип 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; Итак, та же идея, но в моем ответе есть менее полный пример; Ответ Амана - лучший ответ
Да. Собственно ландру. Даже ваш код работал нормально. Это была неправильная строка моего возвращаемого типа. Принял ответ Амана просто потому, что он был немного более ясным.
Да. Отличная идея. Но не помогло Аману! div не отображается!