Можно ли создать "дочерный" html-файл?

[pudge]

Код главной страницы сайта и так немаленький,а мне предстоит его ещё увеличить.

 

На странице есть один елемент,задача которого - открывать вкладку с контентом,вот код одной из вкладок:

iMstup[0]="<div id='view1'><h1>Ололоша 1</h1></div>";

как видите в середине этой вкладки находится тестовый контент,но вот проблема в том что если закрывающий </div> опустить на следующюю строку то ВЕСЬ скрипт перестанет работать(непойму почему так).Вот весь скрипт целяком:

<script src="JS/jquery.min.js"></script> <script> 	var iMstup= new Array();iMstup[0]="<div id='view1'><h1>Ололоша 1</h1></div>";iMstup[1]="<div id='view2'><h1>Ололоша 2</h1></div>";   $('.tab').bind("click",function(){   var num = ["first","second","third"],   id = $(this).index(),   currentTemplate = iMstup[id];   $('#content').html(currentTemplate);    }) </script>

Я сначала хотел прописывать контент  в этой же вкладке iMstup[0]="<div id='view1'><h1>Ололоша 1</h1></div>"; напрямую,тоесть сотни строк html кода.Но потом осознал что будет очень сложно и неудобно работать с таким файлом и подумал "вот было бы здорово создать дочерний файл",ну на месте Ололоша 1 разместить ссылку на хтмл файл а в самом файле уже прописывать контент(тонны кода),ну как в Си.

 

Я пытался узнать у гугла "как создать дочерный html файл",но он посмотрел на меня как на дурачка и не выдал ниодной ссылки

 

Если нельзя осуществить что то подобное то хотябы скажите почему нельзя переносить закрывающий div на следующюю строку,а то писать это все в одной строке - сумашествие.

 

 

Зарание спасибо за ответы!!!

[SelenIT]

почему нельзя переносить закрывающий div на следующюю строку

Потому что синтаксис языка JavaScript не допускает незаэкранированных переносов строк в строковых значениях.

 

как создать дочерный html файл

К сожалению, никак, в HTML нет такого понятия. Но можно запрашивать HTML-файлы аяксом и вставлять их целиком в нужное место DOM страницы (напр. как в 3-м примере здесь).

[3d_max_9]

Если я правильно вас понял, то вы хотите инклудить в одну страницу какие то еще страницы с помощью js. В этом вам поможет ajax. 

http://ruseller.com/lessons.php?rub_id=28&id=569

[pudge]

Если я правильно вас понял, то вы хотите инклудить в одну страницу какие то еще страницы с помощью js. В этом вам поможет ajax. 

http://ruseller.com/lessons.php?rub_id=28&id=569

 

 

что то вы не то скинули...

 

мне просто нужно что бы часть кода страницы находился в отдельном файле,ну или хотябы в том же файле но в другом месте(в одну строку в скрипте писать.. я с ума сойду же

 

 

как создать дочерный html файл

К сожалению, никак, в HTML нет такого понятия. Но можно запрашивать HTML-файлы аяксом и вставлять их целиком в нужное место DOM страницы (напр. как в 3-м примере здесь).

 

 

 

что то несмог я понять как этот ваш пример поможет в данной ситуации

[spdif]

в одну строку в скрипте писать.. я с ума сойду же

then="пишите в несколько"+"строк";

[pudge]

вот что необходимо сделать,нужно что бы код контента находился вне строки скрипта,пусть рядом,пусть в отдельном файле(что осуществить нельзя как я понял из коментариев),любогде но не там где он находится на скрине.

 

Видите на скрине я выделил строку кода контента?вот таких строк там должны быть сотни,напечатать все их в одной строке можно но будет нереально неудобно и неприятно,это последний вариант.

 

В общем нужно кудато переместить код контента из строки скрипта.Или переделать функционал вкладок на другой где можно было бы переносить закрывающий див на следующие строки...

 

Все тему можно закрывать,один хороший человек показал мне что нужно вконце строки обратный слеш поставить и можно переносить(и все будет работать).

[Int]

Ну так посоветовали же аяксом запрашивать содержимое файла и вставлять.

[Vin]

<iframe>?

[pudge]

Ну так посоветовали же аяксом запрашивать содержимое файла и вставлять.

 

 

да посоветовали,но я несмог понять по тем статьям как это работает так как слишком много лишнего в примерах помоему....(

[Николя223]

прочитай про jquery $.get() или ещё прощё load

 

там всего то в одну строку

 

$("#elem").load("/htmlpage.html")

 

но если не ошибаюсь - нужно с кодировкой потом поработать. у меня с ie8 и 9 проблемы были при таких запросах - если появятся нужно в .htaccess пару строк дописать 

[pudge]

прочитай про jquery $.get() или ещё прощё load

 

там всего то в одну строку

 

$("#elem").load("/htmlpage.html")

 

но если не ошибаюсь - нужно с кодировкой потом поработать. у меня с ie8 и 9 проблемы были при таких запросах - если появятся нужно в .htaccess пару строк дописать 

 

 

напомню что я же не разбираюсь в яваскрипте перечитал ваш пример несколько раз http://jquery-docs.ru/ajax/load/#results не смог понять как нужно это использовать,единственное что более менее понятно так это где описывались результаты,но опять же не смог испробовать изза того что в строке моего скрипта 

iMstup[0]="<div id='view1'> </div>";

нельзя использовать двойных кавычек так как перестает работать весь скрипт...

[Николя223]

ты опять не понял)) 

http://jsfiddle.net/nikolya223/3ttmZ/1/

Edited November 9, 2013 by Николя223

[pudge]

ты опять не понял)) 

http://jsfiddle.net/nikolya223/3ttmZ/1/

 

 

ниробит((( 

 

и вообще,разве class в divе должен ссылать на что то кроме .css?Я думаю проблема в этом,там нужно же указать на скрипт а не на ксс...

[Николя223]

я тебе пример привел) на css код внимание не обращай - он левый, забыл удалить
 
jquery разрешает обращаться к элементу как угодно. хоть по id хоть по классу хоть по тегу, атрибуту...
в данном случае происходит загрузка страницы в элемент с классом (лучше бы это был один), можно вместо класса id поставить не суть...
 

[pudge]

ну не знаю,я вот так осуществил ваш пример и он не работает(((

 

 

<script src="JS/jquery.min.js"></script>

<script>
var iMstup= new Array();

iMstup[0]="<div id='view1'><div class=page2></div></div>";

$(".page2").load("/page2.html")

iMstup[1]="<div id='view2'><h1>Ололоша 2</h1></div>";

$('.tab').bind("click",function(){
var num = ["first","second","third"],
id = $(this).index(),
currentTemplate = iMstup[id];
$('#content').html(currentTemplate);
})
</script>

единственное отличие от оригинала(вашего примера)в том что я убрал все двойные кавычки со строки с divом так как скрипт перестает работать если появятся лишние двойные кавычки в строке...

 

З.Ы. код не выделил кодом изза того что нельзя выделять нужные строки цветом/жирностью или подчеркиванем

З.З.Ы.может я в дочерном файле что то не так сделал?ну если в файле page2.html будет написано только "Здесь появиться другая часть"(и ничего больше),то оно не покажет этот текст...

Edited November 9, 2013 by pudge

[Николя223]

помниться мне у тебя страница на локалке, а не на хостинге... на локалке аякс не работает

если на хосте - посмотри в консоле - f12 последний таб  console.  если там красный текст есть кидай сюда

[pudge]

помниться мне у тебя страница на локалке, а не на хостинге... на локалке аякс не работает

 

 

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

 

Но что то я не понял почему это он не может работать на локалке?

[Vin]

Но что то я не понял почему это он не может работать на локалке?

Потому что AJAX предполагает работу по протоколу HTTP.

[pudge]

помниться мне у тебя страница на локалке, а не на хостинге... на локалке аякс не работает

если на хосте - посмотри в консоле - f12 последний таб  console.  если там красный текст есть кидай сюда

 

 

теперь тестю в инете а не на локалке,но всеравно не работает,вот содержимое файла page2.html:

<html>dddddddds</html>

что не так?и да,в консоли я не работал поэтому не понял на что смотреть там...

[Switch74]

Делаем два файлика index.html и add.htm

расширение роли не играет, просто

html - это будет полный нормальный файл в котором будет полноценный doctype и head

htm - сокращенные только с нужной нам информацией без doctype и head

это для удобства и понимания

 

в html у нас должна быть кнопочка, которой вызывается функция подгрузки второго файла, и место, в которое должна попасть информация из подгружаемого файла.

<a class="add">add</a><div id="add"></div><script>$('.add').click(function(){$('#add').load('add.htm');});</script>

и за одно советую разобраться с $post - очень полезная и более функциональная функция

[pudge]

 

 

Всеравно не работает.Вот код целяком,напомню что этот контент нужно вставлять в скрипт,может изза этого проблема?хотя по обычному же вставляются картинки,ссылки и т.д.

 

 

<script>

var iMstup= new Array();

iMstup[0]="<div id='view1'><a class=add>add</a><div class=add></div></div>";

iMstup[1]="<div id='view2'><h1>Ололоша 2</h1></div>";

$('.tab').bind("click",function(){

var num = ["first","second","third"],

id = $(this).index(),

currentTemplate = iMstup[id];

$('#content').html(currentTemplate);

})

</script>

<script>

$('.add').click(function(){

$('#add').load('add.htm');

});

</script>

 

 

Красным я выделил то место куда должен загружатся контент с файла add.htm,напомню что содержимое этого файла следующее:

<html>dddddddds</html>

может чегото в загружаемом файле нехватает?

Edited November 19, 2013 by pudge

[Switch74]

вот у вас есть в скрипте
iMstup[0]="<div id='view1'><a class=add>add</a><div class=add></div></div>";

именно в скрипт вы ни как не вставите

 

вы можете вставить данные из add.htm в #view1 после того как выведите переменную iMstup[0] в потоке на странице

[Николя223]

во первых замени click на live("click",function(){  }) или on("click",function)

 

во вторых ты вставляешь в элемент с id = add - такова не вижу.

 

если нужно вставить в кликнутый элемент то пробуй 

$(this).load('add.htm');

Edited November 20, 2013 by Николя223

[pudge]

вот у вас есть в скрипте

iMstup[0]="<div id='view1'><a class=add>add</a><div class=add></div></div>";

именно в скрипт вы ни как не вставите

 

вы можете вставить данные из add.htm в #view1 после того как выведите переменную iMstup[0] в потоке на странице

 

я не понял концовку поста(подчеркнуто)

во первых замени click на live("click",function(){  }) или on("click",function)

 

во вторых ты вставляешь в элемент с id = add - такова не вижу.

 

если нужно вставить в кликнутый элемент то пробуй 

$(this).load('add.htm');

 

Сначала попробвал так:

 

<script>

$('.add').live("click",function(){

$('#add').load('add.htm');

});

</script>

 

потом попробовал 

 

<script>

$('.add').live("click",function(){

$(this).load('add.htm');});

</script>

 

Не работает,но меня насторожил пост  от Switch74,    iMstup[0]="<div id='view1'><a id=add>add</a><div class=add></div></div>"; почему это нельзя в скрипт его вставить?ведь текст,ссылки,елементы я могу спокойно вставлять в этот скрипт,почему же нельзя вставить ссылку на файл?

[Николя223]

он пишет, что в сначала вывести нужно, а затем вставлять

 

по поводу всего действа вцелом - так яснее?

 

  http://jsfiddle.net/sfD2y/

Edited November 20, 2013 by Николя223

[pudge]

он пишет, что в сначала вывести нужно, а затем вставлять

 

по поводу всего действа вцелом - так яснее?

 

  http://jsfiddle.net/sfD2y/

Чесно?не очень.

 

Во первых,ваш код не работает в опере(а многие пользуются оперой).

 

Во вторых все как то до ужаса намудрено помоему,изначальная суть темы: запускать часть кода в отдельном файле,что бы все содержимое этого файла грузилось на главной странице без всяких дополнительных прокликиваний и т.д.,а тут что бы получить контент из файла нужно вроде ещё кликать(так я понял из вашего примера #25)