Я опубликовал это ранее, но он был неправильно помечен как дубликат Можно ли вставлять скрипты с помощью innerHTML? , что не является моей проблемой.Я не пытаюсь запустить какой-либо JavaScript с помощью innerHTML, я пытаюсь запустить JavaScript, который находится в файле PHP с именем Ajax / XmlHttp.Я использую innerHTML в этом JS, но я не пишу больше JS в этом.Так что это не дубликат этого вопроса, и я пытаюсь повторить его сейчас.
Не уверен, что здесь происходит.Сначала я объясню организацию своих файлов, а затем войду в код.
Приложение - Позволяет пользователю выбирать различные атрибуты (например, год или имя) и просматривать изображения соответствиярезультаты из базы данных.
Files- У меня есть файл gallery.php, содержащий серию элементов HTML-форм, действующих как селекторы для получения отфильтрованных результатов из базы данных.Всякий раз, когда селектор установлен или изменен, файл отправляет новый запрос в файл get.php, который использует Ajax для обновления результатов без загрузки новой страницы.Все это прекрасно работает.Моя следующая задача - создать модальный раздел, где я могу щелкнуть изображение и просмотреть увеличенную версию, которую я планирую сделать с помощью JavaScript и CSS, но моя промежуточная цель - просто изменить текст в нижней части результатов с * 1017.* снова с использованием JavaScript, просто в качестве первого шага.Но, похоже, я не могу заставить работать какой-либо JavaScript, написанный на get.php.
Код-
Это gallery.php:
<?php
include_once("./../php/navbar.php");
?>
<html>
<head>
<link href="/css/siteTheme.css" rel="stylesheet">
<style>
.attributes span {
margin-right: 1rem;
}
</style>
<script>
function changeParams() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("test").innerHTML = this.responseText;
}
};
year = document.getElementById("years_select").value;
nameFirst= document.getElementById("nameFirst_select").value;
/* Ton of other getElementById statements here that I'm excluding to keep things shorter */
url = "get.php?year="+year+......;
xmlhttp.open("GET", url, true);
xmlhttp.send();
} /* End function */
</script>
</head>
<body>
<div class="content">
<h1>Gallery</h1>
<form>Details:
<!-- -------------------- Year -------------------- -->
<select onchange="changeParams()" name="years" id="years_select">
<option value="All">Year</option>
<?php
include("/var/www/admin.php");
$conn = mysqli_connect($dbServername, $publicdbUsername, $publicdbPass, $dbName);
if (!$conn) {
die('Could not connect: ' . mysqli_error($conn));
}
$sql = "select year from db group by year order by year desc";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
echo "<option value=" . $row['year'] . ">" . $row['year'] . "</option>";
}
mysqli_close($conn);
?>
</select>
<!-- A bunch of other selectors are created here following the same pattern as above of getting results from a DB -->
<!-- -------------------- Searchbar -------------------- -->
<input type="text" size="50" onkeyup="changeParams()" name="search" id="search" placeholder="Search"></input>
</form>
<div id="test">Choose some filters to see some results!</div>
</form>
</div> <!-- Ends content div -->
</body>
</html>
Это get.php:
<html>
<head>
<style>
/* Bunch of CSS that's not relevant here */
</style>
<script type="text/javascript">
console.log(".....");
var parts = document.querySelectorAll("div.imgContainer");
console.log("Found something:", parts);
parts.addEventListener("click", function(){
document.getElementById("anID").innerHTML = "Test...";
});
</script>
</head>
<body>
<?php
include("/var/www/admin.php");
$year = $_GET['year'];
//Bunch of other variables set here following the same logic, getting data from gallery.php
$conn = mysqli_connect($dbServername, $publicdbUsername, $publicdbPass, $dbName);
if (!$conn) {
die('Could not connect: ' . mysqli_error($conn));
echo '$conn';
}
$sql = 'select * db';
/* ---------- Creating SQL statement ---------- */
$clauses = 0;
if ($year != "All") {
if ($clauses == 0) {
$sql = $sql . ' where year = "' . $year . '" and';
$clauses = $clauses + 1;
} else {
$sql = $sql . ' year = "' . $year . '" and';
}
} /* Bunch of other if statements to get set information and add to sql statement as such */
// Need to chop of the last ' and' from the sql statement
$sql = substr($sql, 0, -4);
$sql = $sql . ' order by year desc';
$result = mysqli_query($conn, $sql);
$num_results = mysqli_num_rows($result);
if ($num_results == 0 or $clauses == 0) {
echo "<p>No matches to your query. Try refining your search terms to get some results.</p>";
} else {
echo "<p>" . $num_results . " results matched your query.</p>";
echo "<div class=results>";
//echo "<div>";
echo '<script type="text/javascript">
function modalFunction() {
document.getElementById("anID").innerHTML = "test";
}
</script>';
while ($row = mysqli_fetch_array($result)) {
$pic = $row['pathToPic'];
$wwwImg = substr($pic, 13);
//echo "<span id=aCard><img src=" . $wwwImg . " height ='250px'>";
//echo "<span class=text>" . $row['fullCardInfo'] . "</span></span>";
echo "<div class=fullContainer><div class='imgContainer'><img class=image src=" . $wwwImg ."></div><p class=text>" . $row['fullInfo'] . "</p></div>";
} // End while of results
echo "</div>";// End results div//</div>";
//echo '<div class="modal"><p id="anID"></p></div>';
} // End else of "if results"
mysqli_close($conn);
?>
<script>
</script>
<div>
<p id="anID">This in a div</p>
</div>
<!--<span>
<p id="anID">This in a span</p>
</span>-->
</body>
</html>
Извините, если это было грязно, я вырезал кучу вещей, которые просто получают / выбирают / фильтруют некоторые данные.Все, что работает, и все переменные, которые там оставлены, указаны в моем полном коде.
Но проблема, с которой я сталкиваюсь, заключается в написании JavaScript на get.php для изменения текста в тегах <p id="anID">.Я пробовал JS в нескольких различных областях get.php, от тегов <head> до его повторения в тегах <script> в PHP, до чистых тегов <script> после выполнения операторов PHP (я думаю,Я оставил их в нескольких разных местах).
Проблема в том, что я ничего не делаю, чтобы изменить текст в тегах <p>, на которые я ссылаюсь.Кроме того, операторы console.log в заголовке get.php, похоже, тоже не вызываются.Они не стреляют независимо от того, где я их размещаю в get.php.Console.log прекрасно работает в gallery.php, так что это не проблема с моим браузером или чем-то еще.
В долгосрочной перспективе я буду добавлять селекторы запросов JS, чтобы при нажатии на изображение появлялось большее изображение, носейчас я просто пытаюсь заставить ЛЮБОЙ JavaScript работать в get.php, и я изо всех сил пытаюсь это сделать.Я не вижу, как это дублирует предложенный повтор, поскольку я не пытаюсь запустить JavaScript через innerHTML здесь.