Как добавить именно тот блок?

Question

[zuraavl]

Пытаюсь сделать так, чтобы по клику на ссылку в ее родителя добавлялся определенных блок из отдельного .html файла. Вроде все получается, но добавляется не отдельный блок а полностью все, что есть.
Код такой:

$('.list-item a').click(function (){
    event.preventDefault();
    var link = $(this);
    var here = link.parent();
    var target = link.attr('href');
    $.get('programs/programs.html',function(data){
    $(target).html( data );
    here.append(data);
    
    });
  });

И еще уточнение - как сделать чтобы удалить все что добавилось при новом клике?

Answer 1

[Константин Громов]

Замените

$.get('programs/programs.html', function(data) {
  $(target).html(data);
  here.append(data);
});

на

$.get('programs/programs.html', function(data) {
  here.append($(data).find(target));
});

С таким подходом у вас легко может возникнуть дублирование айдишников, например, при повторном клике по той же ссылке.

Comments

[zuraavl]

можете посоветуете где посмотреть как правильно делать?

[Константин Громов]

zuraavl: Либо блокировать повторный клик, если он не подразумевается логикой страницы, либо заменить id на class в href и на вспомогательной странице.

[zuraavl]

нет, там история такая что программ много, ссылки с разными #id и когда этот id добавляется все ссылки исчезают.

Answer 2

[Алексей]

По вашему коду видно что при нажатии на ссылку загрузится ВЕСЬ файл programs/programs.html. Нет кода выделяющий его блок.

Варианта 2
1. Парсер - который по регулярному выражению, будет выделять блок. Например обрамлять код

<!-- CODE BLOCK NAME --> 

<!-- /CODE BLOCK NAME -->

2. Обращаться к php который отдаст запрошенное.

Удаление загруженного.
Обрамить загруженное чем угодно div, span,.... содержащее class="loaded" (например). При нажатии на кнопку сделать удаление всех элементов loaded.

Comments

[zuraavl]

про удаление понял, спасибо. По парсеру или php, точно знаю что есть такая функция в jq, брать контент из определенного блока

[Алексей]

Ну в принципе можно загрузить все в невидимый контейнер, а потом присвоить here.append( $(selector).html() );

Answer 3

[Վիտալի Լագունով]

1. Первый вариант (самый простой) — создать в programs.html блок <script id="tab_name" type="text/html">, загрузить programs.html с помощью $.get(...) и выпарсить содержимое блока, например, с помощью data.indexOf('<script id="tab_name" type="text/html">') и data.indexOf('</script>'). Есть и другие варианты парсинга (см. другие ответы). Требует CORS или одинаковый домен.
   
   PS. Блок <script type="text/html"> не будет выведен в programs.html при его прямом открытии. Также возможные ошибки синтаксиса внутри <script> не повлияют на корректность programs.html.
   
   Дополнительно: это не имеет отношения к вопросу, но описанный способ также удобен тем, что позволяет перед выводом обработать data с помощью шаблонизатора. Например, так можно 10 раз вывести <div>test</div> (синтаксис будет зависеть от шаблонизатора, который Вы выберете):

   <%for (var i = 0; i < 10; i++) {%> <div>test</div> <%}%>

   
   
2. Второй вариант – подгрузить programs.html в качестве iframe и, используя postMessage, передать из programs.html содержимое #tab_name с помощью document.getElementById('tab_name').innerHTML. Не требует CORS. Это решение также можно совместить с шаблонизатором.
   
   
3. Третий вариант — html-импорт, но он не поддерживается в старых браузерах habrahabr.ru/post/230751
   
   
4. Четвёртый вариант — создать серверный скрипт, который будет парсить programs.html и выдавать ответ нужном формате, например JSONP. Не требует CORS. Можно совместить с шаблонизатором.
   

Comments

[zuraavl]

в ссылках #first, #second, оно у меня считывает этот атрибут и по идее нужно сказать чтобы добавлял блок с id #first или там #second

[Վիտալի Լագունով]

zuraavl: ничего не понял. Разбил свой ответ на пункты, ответ должен стать понятнее.

Answer 4

[Alex]

Как-то так

$.get('programs/programs.html',function(data){
    var $resp = $(data);
    $(target).html( $resp.find('.selector') );
    here.append($resp.find('.selector'));
});