У меня есть страница PHP, у которой есть div, у div есть PHP, который включает этот файл:
<?php include('mySql.php'); include('Classes.php'); $targetPage = "blogOutput.php"; $noOfPosts = getNumberOfPosts(); $adjacents = 3; ?> <link rel="stylesheet" type="text/css" href="Styles/Miniblog.css" /> <script src="Scripts/jQuery.js"></script> <script type="text/javascript"> var page = 1; $(".Button").click(onClick()); $(document).ready(onClick()); function onClick() { alert('called'); $("#posts").load("miniBlog.php", function(response, status, xhr) { if (status == "error") { var msg = "Error!: "; alert(msg); } }); page++; } </script> <div class="PostTitle"> <h2>What's New!?</h2> </div> <div id="posts"> </div> <a class="BlogButton" href="">Next</a> Мне нужна функция «onclick» для вызова без обновления страницы и сброса переменной «page» в javascript. Пока что все, что мне удалось сделать, это запустить сценарий один раз. Я тоже ошибаюсь, потому что это не загрузка какого-либо контента. Вот страница:
<?php echo "I'm here!"; if (isset($_POST['offset'])) { $offset = $_POST['offset']; $posts = getPosts($offset); } ?> <div class="BlogPost"> <h3><?php echo $posts[0]->Title; ?></h3> <p><?php echo $posts[0]->Body; ?></p> <p class="Date"><?php echo $posts[0]->Date; ?></p> </div> <div id="divider"></div> <div class="BlogPost"> <h3><?php echo $posts[1]->Title; ?></h3> <p><?php echo $posts[1]->Body; ?></p> <p class="Date"><?php echo $posts[1]->Date; ?></p> </div>
Итак, чтобы уточнить: я не уверен, почему мой вызов ajax не работает, и я не знаю, как загрузить только содержимое div, а не обновлять всю страницу. Благодаря!
Вы не можете видеть содержимое, загруженное AJAX, потому что страница перезагружается, как только вы нажимаете на якорь. Отключите событие привязки с помощью preventDefault() и это должно исправить его.
<script type="text/javascript"> var page = 1; $(document).on('click','.BlogButton',function(e){ // stop page from reloading e.preventDefault(); $("#posts").load("miniBlog.php", function(response, status, xhr) { if (status == "error") { var msg = "Error!: "; alert(msg); } }); page++; }); </script>
Не вызывайте функцию в параметре метода click . Вы должны поместить ссылку на функцию обработчика.
var handler = function onClick () {...} $("whatever").click(handler);
Измените свой код на
var page = 1; $(document).ready(function(){ $(".Button").click(onClick); onClick(); };
Используйте это вместо кода
var page = 1; $(document).on('click','.Button',function(){ $("#posts").load("miniBlog.php", function(response, status, xhr) { if (status == "error") { var msg = "Error!: "; alert(msg); } }); page++; });
Контентная доза не выглядит слишком огромной. Нельзя просто спрятать div (с содержимым, уже присутствующим в нем) и показать его onclick.