Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
DronNaTrone
0 / 0 / 0
Регистрация: 25.10.2014
Сообщений: 8
#1

заполнение div блока из файла html - JavaScript

12.01.2016, 13:54. Просмотров 1430. Ответов 4
Метки нет (Все метки)

доброго времени суток. имеется два DIV блока (A и B). в блоке А ссылки (не кнопки). как заставить при клике на ссылку из DIV блока А загрузить информацию в DIV блок B из заранее подготовленного файла .html не перезагружая при этом всю страницу? iframe не подходит так как объемы могут быть разными.

это пример с iframe который мне не подходит .

//DIV блок A

<a href="#" onclick="changediv('1.html');return false;>ссылка 1</a>
<a href="#" onclick="changediv('2.html');return false;>ссылка 2</a>

//DIV блок B

<div id="B"></div>

<script type="text/javascript">
function changediv(id) {document.getElementById('B').innerHTML
= '<iframe src="'+id+'" width=100% height=500px frameborder="0" scrolling="no" allowtransparency="true"> noresize';}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.01.2016, 13:54
Я подобрал для вас темы с готовыми решениями и ответами на вопрос заполнение div блока из файла html (JavaScript):

Как вставить в div код с другого файла HTML?
Собственно вот код из файла 404.html: &lt;h2&gt;404.HTML&lt;/h2&gt; &lt;p&gt;Тестовое окно&lt;/p&gt;...

Вписать код html страницы в <div></div>
Доброго времени суток :) Т.к. я профан в JS, а скорей новичок :) У меня на...

Скриншот блока div
Собственно , как реализовать следующие: Короче тема говорит сама за себя, как...

Обновление блока div
Подскажите, пожалуйста, как можно сделать обновление содержимого внутри div? ...

Перемещение div блока
Народ, помогите нужно чтобы при нажатии на кнопку перемещялся div блок. Как это...

Сворачивание и разворачивание блока div
Ребят, нужна помощь, в Ява я слабак. Это в head. &lt;script...

4
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
12.01.2016, 15:15 #2
Ну в качестве варианта вот так можно...

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        function includeFile (out) {
            var btns    = document.querySelectorAll ("[data-file]"),
                res     = document.querySelector (out),
                include = function (name) {
                    var xhr = new XMLHttpRequest ();
                    xhr.open ("GET", name);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) res.innerHTML = xhr.responseText;
                    }
                    xhr.send ();
                },
                f      = function () {
                    include (this.dataset["file"]);
                };
            [].forEach.call (btns, function (e) { e.addEventListener ("click", f); });
        }
        window.addEventListener ("load", function () {
            includeFile ("#result");
        });
HTML5
1
2
3
4
5
6
7
8
    <div>
        <!--<div data-file="АДРЕС ФАЙЛА">загрузить файл 1</div>-->
        <div data-file="p2.html">загрузить файл 2</div>
        <div data-file="p3.html">загрузить файл 3</div>
        <div data-file="files/p4.html">загрузить файл 4</div>
    </div>
    <div id="result">__</div>
    <!--<div id="result">БЛОК ВЫВОДА РЕЗУЛЬТАТА</div>-->
только придется на сервер закинуть все это, иначе не взлетит...
0
DronNaTrone
0 / 0 / 0
Регистрация: 25.10.2014
Сообщений: 8
12.01.2016, 17:56  [ТС] #3
может я плохо объяснил проблему.
есть меню которое находится в блоке div ссылочного типа:

<li><a href="#">SomeInfomation_1</a></li>
<li><a href="#">SomeInfomation_2</a></li>
<li><a href="#">SomeInfomation_3</a></li>

на каждую ссылку имеется соответствующий файл SomeInfomation_1.html, SomeInfomation_2.html, SomeInfomation_3.html
есть другой div блок на той же странице рядом с блоком меню, он пустой:

<div id="result"></div>

нужно что бы при нажатии ссылки меню, содержимое простого html перемещалось в блок div id="result", при нажатии другой ссылки блок div id="result" очищался/заменялся на содержимое другого простого html файла. Я не очень люблю/разбираюсь в JavaScript но мне казалось что это в одну строчку должно делаться.
0
arcmag
259 / 255 / 180
Регистрация: 27.06.2014
Сообщений: 665
12.01.2016, 20:18 #4

Цитата Сообщение от DronNaTrone Посмотреть сообщение
нужно что бы при нажатии ссылки меню, содержимое простого html перемещалось в блок div id="result", при нажатии другой ссылки блок div id="result" очищался/заменялся на содержимое другого простого html файла.
ну так я вам такой код для этого и дал, только вместо ссылок кликать надо по блокам <div> где в атрибуте data-file указывается адрес вашего html файла содержимое которого будет грузится в блок id="result" (можете и тег <a> использовать главное что бы был атрибут data-file)
HTML5
1
<a data-file="p2.html">загрузить файл 2</a>
Цитата Сообщение от DronNaTrone Посмотреть сообщение
Я не очень люблю/разбираюсь в JavaScript но мне казалось что это в одну строчку должно делаться.
может и делается, я вам сам написал этот скрипт если не нравится пишите сами, можете попробовать покопаться в jQuery там по моему есть возможность в "одну строчку" написать (хотя тащить только ради такой фигни эту библиотеку как мне кажется не оч...)
1
DronNaTrone
0 / 0 / 0
Регистрация: 25.10.2014
Сообщений: 8
13.01.2016, 15:44  [ТС] #5
никак ума не приложу как заменить мой вид ссылки
<li><a href="#">SomeInfomation_1</a></li>
на ваш
<a data-file="p2.html">загрузить файл 2</a>
он не кликабелен

Добавлено через 20 минут
если есть функция можно ли привести к виду
<a href="javascript:somefuction()">
с атрибутом имени файла или типа того. извините может вопросы тупые, но какой вопрос такой и хозяин

Добавлено через 18 часов 25 минут
решение

Javascript
1
2
3
4
5
6
7
8
<script type="text/javascript">
function getCont(url){
    $('#result').html();
    $.get(url,function(data){
            $('#result').html(data);
    });
};
</script>
HTML5
1
2
3
4
<a href="#" onclick="getCont('SomeInfomation_1.html');return false;">SomeInfomation_1</a>
<a href="#" onclick="getCont('SomeInfomation_2.html');return false;">SomeInfomation_2</a>
<a href="#" onclick="getCont('SomeInfomation_3.html');return false;">SomeInfomation_3</a>
<div id="result">тут результат клика</div>
2 arcmag, спасибо за помощь.
0
13.01.2016, 15:44
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.01.2016, 15:44
Привет! Вот еще темы с решениями:

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

Появление блока div при нажатии на ссылку
Доброго времени суток, помогите доделать функцию. Имеется функция, открывающая...

Перемещение DIV блока в зависимости от разрешения дисплея
Доброго времени суток, уважаемые гуру кодинга. Прошу сильно не пинать, я не...

Как скрыть скрипт внутри блока div
как скрыть скрипт внутри блока div? всю башку сломал помогите $(function(){ ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru