Динамически чередующийся DOM работал нормально, пока я не добавил Chosen и не начал делать их при загрузке страницы. Теперь, когда я проверяю свою страницу, многократно обновляя ее, иногда она загружается правильно, а иногда нет. Большинство связанных ответов на вопросы требуют проверки того, что документ загружен или jquery для готовности, и я попробовал все перестановки (в настоящее время обе). Я ссылаюсь на внешние. js файлы и. css. Может ли содержимое вызовов функций быть настолько интенсивным, что я должен окружить больше операций проверками ready ()? Может ли это помочь ввести задержку перед выполнением операций на DOM?
выдержка из всего, что, я думаю, будет уместно:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="semanticWeb.rep.concept.CommonNoun" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://harvesthq.github.io/chosen/chosen.css">
<script type="text/javascript" src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<Script>
var theForm;
<%ArrayList<CommonNoun> commonNouns =(ArrayList<CommonNoun>)request.getAttribute("AllCommonNouns"); %>
<%System.out.println("commonNouns: " + commonNouns);%>
function addInheritanceElement() {
<% for(int i = 0; i<commonNouns.size(); i++) {%>
$('<Option>')
.attr('value', "<%=commonNouns.get(i).getID()%>")
.text('<%=commonNouns.get(i).getName()%>')
.appendTo($("#superType"));
<% } %>
$(".chosen-select").chosen();
}
function testSelectLoading() {
var newOptions = {
'red' : 'Red',
'blue' : 'Blue',
'green' : 'Green',
'yellow' : 'Yellow'
};
var selectedOption = 'green';
var select = $('<select>').appendTo(theForm);
var options;
if(select.prop) {
options = select.prop('options');
}
else {
options = select.attr('options');
}
$('option', select).remove();
$.each(newOptions, function(val, text) {
options[options.length] = new Option(text, val);
});
}
</Script>
</head>
<body>
<article>
<Form id="myForm">
<label for="superType">Inherit from Superclass: </label>
<Select multiple data-placeholder="Must select one or more Common Nouns..." tabindex='5' class="chosen-select" id="superType" style="width: 300px;" >
</Select>
</Form>
</article>
<script>
// $(document).ready(addInheritanceElement());
$(window).on("load", function() {
theForm = document.getElementById("myForm");
$( document ).ready(addInheritanceElement());
$( document ).ready(testSelectLoading());
});
</script>
</body>
</html>