fadeIn php script с jQuery onClick button

Question

У меня есть PHP-скрипт с меткой first_page.php. На этой странице, я в настоящее время есть DIV, который выглядит следующим образом:

<div id="status"> 
    <h3>To view a list of all rooms statuses, select the link below.</h3> 
    <a href="response_data.php" class="button">Show Status</a> 
</div> 

И ссылки на нужную страницу, response_data.php. То, что я действительно хотел бы иметь, - это кнопка, которая находится на first_page.php, и когда эта кнопка нажата, загрузите страницу response_data.php с помощью .fadeIn().

Я попытался запустить этот сценарий jQuery, не повезло. Вот что я пробовал. Я изменил мой HTML, чтобы выглядеть следующим образом:

<button id="button">Click here to show data</button> 
    <div id="data" style="display: none;"> 
<?php include 'response_data.php' ?> 
</div> 


$('#button').click(function() { 
    $('#data').fadeIn(1000); 
}); 

Выше, я добавил кнопку и DIV, который я хотел FadeIn. В div хранится php-скрипт, поэтому я хотел, чтобы div затухал php-скрипт. Я установил данные CSS для отображения. Когда я нажимаю кнопку, ничего не происходит. Он действительно работает, но данные Div исчезают, не нажав кнопку. Затем кнопка остается. Я бы хотел, чтобы он не автоматически нажимал, а также как-то скрывал кнопку после первого щелчка.

Answer 1

Часть jQuery в порядке. Я настоятельно рекомендую проверить, действительно ли у вашего div#data есть текст.

Чтобы сделать это, вы можете попробовать что-то вроде:

console.log($('#data').text().length > 0 ? 'Text found' : 'Could not find text'); 

Кроме того, чтобы скрыть кнопку после того, как она была нажата просто использовать hide() метод:

$('#button').on('click', function() { 

    $('#data').fadeIn(1000); 
    $(this).hide(); 

}); 

Примечание: Вы можете также использовать метод fadeOut() или метод remove(), если вы хотите удалить кнопку из DOM.