Как мне загрузить веб-страницу в div при нажатии пользователем на ссылку?

#jquery #html

#jquery #HTML

Вопрос:

Я использую jquery и хочу, чтобы пользователь нажимал на ссылку и загружал ответ сервера (в данном случае подтверждение в одну строку) в тот же div, в котором находится ссылка. Я много раз повторял это и, похоже, не могу понять это правильно. Вот код, который у меня есть из другого поста на этом сайте, который был похож, но недостаточно близок для того, чтобы я мог его использовать…

 <a href="http://10.0.1.2:8888/?ACT=24amp;tag_id=8" class="load_link">Add to Watchlist*</a>

<script type="text/javascript">
(function($) {  
  $(function() {  
     $('.load_link').click(function() {  
        $(this).next('div').load(this.href);  
        return false;  
     });  
  });  
})(jQuery); 
</script>

Есть идеи, что я делаю не так?

Спасибо

Ответ №1:

Если привязка заключена внутри div, и вы хотите загрузить ответ в этот div, вы могли бы использовать .closest() метод:

 <div>
    <a href="http://10.0.1.2:8888/?ACT=24amp;tag_id=8" class="load_link">Add to Watchlist*</a>
</div>

и затем:

 $(this).closest('div').load(this.href);

если рядом с привязкой есть div:

 <a href="http://10.0.1.2:8888/?ACT=24amp;tag_id=8" class="load_link">Add to Watchlist*
<div></div>

тогда .next() метод должен сработать.

Ответ №2:

Если вы загружаете содержимое в содержащий div, ссылка заменяется.
Следовательно, добавьте span / div с в основной div, на который есть ссылка, и используйте этот дочерний span / div для загрузки содержимого.

например:

 <div>
    <span class="content"></span>
    <a href="http://10.0.1.2:8888/?ACT=24amp;tag_id=8" class="load_link">Add to Watchlist*</a>
</div>

<script type="text/javascript">
(function($) {  
    $(function() {  
         $('.load_link').click(function() {  
                $(this).siblings(".content").load(this.href);  
                return false;  
         });  
    });  
})(jQuery); 
</script>

Ответ №3:

Отправной точкой является установка Firebug и вход в сеанс отладки, чтобы вы могли пошагово выполнить код. Также вы хотите выполнить привязку к document.ready(), чтобы убедиться, что вы выполняете привязку после того, как DOM будет готов.