Загрузка динамического внешнего контента в раздел другого по клику

Question

Попытка загрузить внешний php-файл в другой onClick. Iframes не будут работать, так как размер содержимого изменяется со складными панелями. Это оставляет AJAX. Мне дали кусок кода

HTML

<a href="#" id="getData">Get data</a>
<div id="myContainer"></div>
JS

$('#getData').click(function(){
    $.get('data.php', { section: 'mySection' }, function(data){
       $('#myContainer').html(data);
    });
});
PHP:

<?php
    if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>

Я проверил это здесь http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php и получил самые неожиданные результаты. Он, конечно, загружает нужное количество предметов, как сказано в нижней панели сафари, но я вижу три небольших календаря, и это все. Кто-нибудь может увидеть, где я допустил ошибку?

Answer 1

Перво-наперво, вы хотите, чтобы бит jQuery был внутри функции готовности $(document).ready(function(){..}.На вашей тестовой странице в верхней части уже есть готовая функция, содержащая строку $('a[rel*=facebox]').facebox(), поэтому вы можете поместить туда код.

Во-вторых, вы хотите предотвратить переход ссылки надействие по умолчанию, которое заключается в загрузке URL '#'.Вы делаете это с помощью метода preventDefault().

Я протестировал и подтвердил, что следующий код должен работать для вас:

<script type="text/javascript">
  $(document).ready(function(){
    $('#getData').click(function(event){
      event.preventDefault();
      $.get('test.php', { cat: 16 }, function(data){
        $('#myContainer p').html(data);
      });
    });
});</script>

Вы можете найти более подробную информацию и примеры jQuery'sполучить здесь функцию .

Answer 2

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ этот урок может вам помочь