jQuery динамическая загрузка страницы - другой javascript не работает, и как мне импортировать js для конкретной страницы?
Ладно, значит, это будет глупо!
ПРИМЕЧАНИЕ. Это будет для настольного приложения Windows, на котором запущены sqlite и mongoose, поэтому время загрузки не так важно (для меня пока), и соединение с нелокальным сервером не будет.
Я искал по всему и не смог найти ничего, что было бы специфично для моей ситуации, большинство, кажется, загружается в iframe или использует ту платформу, которую предоставляет css-tricks.com
Я использую свой собственный (sorta) фреймворк. Я использую библиотеки начальной загрузки 3, jquery 2.1.4, jqueryui 1.12.1 и Bootstrap-select v1.12.1.
В index.php весь контент будет динамически загружен в оболочку div# и будет выполнять функцию заголовка загрузки всех страниц. Это скелет моего index.php. В sidebar.html ссылки имеют атрибут pagetoload, jquery отлавливает событие click и загружает данные в div#wrapper.
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Каждая страница, которая будет динамически загружаться, в идеале должна содержать минимальный php и содержать только необходимый html/css/js для этой страницы. Моя проблема, например, после загрузки одной страницы, такой как мой dbviewer.php (которая содержит js и выдает предупреждение об асинхронной загрузке) и перезагрузки home.php в контейнер, javascript больше не работает. Javascript для каждой страницы являются встроенными тегами.
Я попытался сложить весь javascript для каждой динамической страницы в index.php, чтобы он загружался при запуске, но возникает проблема, что он все равно не будет работать. Каков наилучший способ заставить эту динамическую загрузку работать при модульности каждой страницы. Я пытался исследовать это, но появляются только такие вещи, как использование хэштегов.
Если вам нужно больше кода из моих файлов, пожалуйста, напишите, я думаю, что я объяснил это достаточно для того, чтобы вы поняли, поскольку за пределами index.php не происходит ничего слишком дикого. Просто сценарии внутри каждой динамической страницы, которые в основном взаимодействуют с элементами dom с помощью jquery.
1 ответ
Я оставляю этот ответ, потому что он помог вам, а также может быть полезным в качестве общего практического правила для любого разработчика, который может оказаться в подобной ситуации.
Поэтому при разработке приложения вы должны отделить все ресурсы javascript, css в главном файле, чтобы разместить их при первой загрузке страницы. (может быть, это событие лучше для производительности)
Все остальные файлы, созданные сервером (php, node.js и т. д.) файлы, которые вы структурируете, являются источником данных только для тех страниц, на которые пользователи нажимают или получают доступ... или, по крайней мере, пытаются...
после этого вы должны вызвать
$.ajax().callback
Функция на веб-интерфейсе, чтобы сделать работу на каждой странице. Такие как эффекты страницы, манипулирование данными и т. Д. Обратный вызов очень важен, потому что именно тогда данные действительно были загружены!
ура, к