Загрузить содержимое файла php при нажатии на ссылку
Здравствуйте Уважаемые форумчане!
Не судите меня строго за мои идеи и домыслы, я в этом новичок. На странице есть вывод категорий и товаров в таком виде:
<div class="row category" id="content">
<div class="subcats">
<?php foreach ($categories as $category_1) { ?>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="tac"><a href="<?php echo $category_1['href']; ?>"><?php echo $category_1['name']; ?></a></h2>
<hr>
<?php if ($category_1['children']) { ?>
<div>
<?php foreach ($category_1['children'] as $category_2) { ?>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<h3 class="category-item-name"><a href="<?php echo $category_2['href']; ?>"><?php echo $category_2['name']; ?></a></h3>
<hr class="category-item-line">
<?php if ($products_all[ $category_2['category_id'] ]) { ?>
<ul class="tov-cat">
<?php foreach ( $products_all[ $category_2['category_id'] ] as $product ) { ?>
<li><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
<?php if ($category_2['children']) { ?>
<ul class="3">
<?php foreach ($category_2['children'] as $category_3) { ?>
<li><a href="<?php echo $category_3['href']; ?>"><?php echo $category_3['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Пытаюсь поместить его в отдельный файл и загружать по запросу при нажатии на ссылку. Делаю так, помещаю этот код в отдельный файл uploadContent.php А вместо прежнего кода вставляю этот:
<div>
<script type="text/javascript">
$(document).ready(function(){
$('#getContent').click(function(){
$.ajax({
url: "/uploadContent.php",
type: "GET",
cache: false,
beforeSend: function() {
$('#divContent').html('Получаем контент');
},
success: function(html){
$("#divContent").html(html);
}
});
return false;
});
});
</script>
<a href="#" id="getContent">Развернуть</a>
<div id="divContent"></div>
</div>
Скрипт срабатывает, подгружаються стили, а вот категорий и товаров нет. Подскажите пожалуйста как победить данную проблему? Спасибо! |
Содержимое РНР файла можно получить только в том случае, если на сервере не выполняется РНР код. Если РНР работает, то клиент получит не содержимое РНР файла, а результат работы РНР интерпретатора.
|
Спасибо! Понял!
Подскажите еще один момент! Как изменить этот скрипт чтоб он сворачивался при нажатие на ссылку второй раз и менялось Развернуть/Свернуть. |
Какой скрипт? Вообще два приведенных кода совершенно различны - первый, это серверный код, второй клиентский, и нельзя заменить вторым первый, как вы пишете.
В среде jQuery много методов анимации, для свернуть/развернуть в том числе. А что именно "Развернуть/Свернуть" вам нужно, это кроме вас никто не будет знать пока вы не представите код? |
При нажатии на кнопку Развернуть, контент загружается в блок <div id="divContent"></div>, кномпа меняет название на Свернуть. При нажатии на кнопку Свернуть контент (содержимое файла uploadContent.php) удаляется из блока <div id="divContent"></div>
Где-то так. |
Ищите на форуме, этого добра на его страницах столько, хоть брусчатку от Лондона до Парижа укладывай.
|
Мне бы подправить существующий, который уже подгружает контент с файла:
<script type="text/javascript">
$(document).ready(function(){
$('#getContent').click(function(){
$.ajax({
url: "/katprod/",
type: "GET",
cache: false,
beforeSend: function() {
$('#divContent').html('Получаем контент');
},
success: function(html){
$("#divContent").html(html);
}
});
return false;
});
});
</script>
<div class="col-md-12 col-sm-12 col-xs-12"><a href="#" id="getContent">Развернуть</a></div>
<div class="col-md-12 col-sm-12 col-xs-12" id="divContent"></div>
|
|
Цитата:
|
max1985,
Сделать две ссылки - одну Развернуть (видимая), другую Свернуть (спрятанная), с вызовами по нажатию соответствующих функций. При нажатии на ссылку прятать нажатую и показывать другую. |
Dilettante_Pro,
лучше менять текст на одной ссылке и slideToggle() как по ссылке. |
Цитата:
<script type="text/javascript">
$(document).ready(function(){
$('#getContent').click(function(){
$(this).toggleClass('opened').toggleClass('closed').next().slideToggle();
if($(this).hasClass('opened')) {
$(this).html('Скрыть');
$.ajax({
url: "/katprod/",
type: "GET",
cache: false,
beforeSend: function() {
$('#divContent').html('Получаем контент');
},
success: function(html){
$("#divContent").html(html);
}
});
}
else {
$(this).html('Развернуть');
}
return false;
});
});
</script>
<div class="col-md-12 col-sm-12 col-xs-12"><a href="#" id="getContent">Развернуть</a></div>
<div class="col-md-12 col-sm-12 col-xs-12" id="divContent"></div>
Теперь надо скрыть контент при повторном нажатии Попробовал сделать так:
else {
$(this).html('Развернуть');
$("#divContent").remove();
}
Но тогда второй раз контент не загружаеться |
Указал класс дива, из загруженного контента и все получилось
else {
$(this).html('Развернуть');
$(".category").remove();
}
Если код не корректный просьба указать на ошибки. Спасибо! |
max1985, почитайте о псевдоселкторах, через которые можно прописать тексты на кнопке. Останется скриптом менять состояние элемента slideToggle() и переключать класс кнопки toggleClass().
|
кнопка получаем контент load ajax jquery
max1985,
$(function() {
var btn = $("#getContent"),
div = $("#divContent"),
title = ["Развернуть", "Скрыть", "Получаем контент"];
btn.on("click", function(event) {
event.preventDefault();
var text = div.text().trim();
if (text) {
text = title[+div.is(":hidden")];
div.slideToggle(300);
btn.text(text)
} else if (text != title[2]) {
div.text(title[2]);
$.ajax({
url: "/katprod/",
type: "GET",
cache: false,
success: function(html) {
div.html(html);
btn.text(title[1]);
}
})
}
})
});
|
Спасибо рони все работает как надо! Единственное не могу присвоить иконку для кнопки закрыть в виде <i class="fa fa-chevron-up" aria-hidden="true"></i>
|
max1985,
$(function() {
var btn = $("#getContent"),
div = $("#divContent"),
title = ["Развернуть", "Скрыть ", "Получаем контент"];
btn.on("click", function(event) {
event.preventDefault();
var text = div.text().trim();
if (text) {
var hidden = div.is(":hidden")
text = title[+hidden];
div.slideToggle(300);
btn.text(text);
hidden && btn.append('<i class="fa fa-chevron-up" aria-hidden="true"></i>')
} else if (text != title[2]) {
div.text(title[2]);
$.ajax({
url: "/katprod/",
type: "GET",
cache: false,
success: function(html) {
div.html(html);
btn.text(title[1]).append('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
}
})
}
})
});
|
Спасибо рони, немного подправил, вот так вообще в идеале:
<script type="text/javascript">
$(function() {
var btn = $("#getContent"),
div = $("#divContent"),
title = ["Развернуть", "Скрыть ", "Получаем контент"];
btn.on("click", function(event) {
event.preventDefault();
var text = div.text().trim();
if (text) {
var hidden = div.is(":hidden")
text = title[+hidden];
div.slideToggle(300);
btn.text(text).append(' <i class="fa fa-chevron-down" aria-hidden="true"></i></a>');
} else if (text != title[2]) {
div.text(title[2]);
$.ajax({
url: "/katprod/",
type: "GET",
cache: false,
success: function(html) {
div.html(html);
btn.text(title[1]).append(' <i class="fa fa-chevron-up" aria-hidden="true"></i>');
}
})
}
})
});
</script>
<div class="col-md-12 col-sm-12 hidden-xs"><span class="opener"><a href="#" id="getContent">Развернуть <i class="fa fa-chevron-down" aria-hidden="true"></i></a></span></div>
<div class="row"><div class="col-md-12 col-sm-12 .hidden-xs" id="divContent"></div></div>
|
| Часовой пояс GMT +3, время: 18:12. |