HTML и AJAX

@PaFanja · Регистрация: 08.09.2015

Студворк — интернет-сервис помощи студентам

Вообщем, столкнулся со след. проблемой. При попытке загрузки контента по ссылке с помощью AJAX с файла page1.html(в нем есть только section с информацией) в основной файл pageMain.html (загружаю инфу тоже в section), ничего не происходит. Не могу найти причину (хотя все же думаю на скрипт, но так как JQuery не знаю проверить это точно не могу). Делал все по аналогии как тут http://igor-26yu.narod.ru/ajaxlinki/index5.html, только вместо div использую section
Код pageMain

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href = "stylesheet.css"
/>
 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 
 
<script type="text/javascript">
    $( function ready() {
 
 $('#p1').click( function(eventObject) 
 {eventObject.preventDefault();$('#outInfo').load( "page1.html #Info1");});
 $('#p2').click( function(eventObject) 
 {eventObject.preventDefault();$('#outInfo').load( "page2.html #Info2");} );
 });//END
</script>
 
<title>
My First Page
</title>
</head>
<body>
<!--Голова страницы-->
<header>
Информация в header
</header>
<!--навигация-->
<navi>
<a href="" id = "p1">Info 1</a><br>
<a href="" id = "p2">Info2</a><br>
</navi>
<!-- section для вывода -->
<section id="outInfo">
?
</section>
</body>
</html>

Код page1.html

Кликните здесь для просмотра всего текста

HTML5

<section id="Info1">
 
<article>
Info number 1
</article>
</section>

@Unick · 09.09.2015, 00:47

Сообщение от PaFanja

не знаю проверить это точно не могу

все можете, откройте консоль и посмотрите ошибки
ctrl+shift+i
А в хроме во вкладке network можно посмотреть, улетел ли запрос и что он вернул (да и в других браузерах как-то можно глянуть)

@BANO · 09.09.2015, 01:01

Unick, я обычно f12 использую, это точно во всех браузерах работает

@Unick · 09.09.2015, 01:23

Не по теме:

Сообщение от BANO

Unick, я обычно f12 использую, это точно во всех браузерах работает

ну если на винде, то да) попробуй на маке f12)) там только cmd+alt+i

@BANO · 09.09.2015, 14:44

Не по теме:

Unick, я ну unix системах вообще мало работал

можно в контекстном меню нажать посмотреть код элемента(исследовать элемент, изучить ...)

Добавлено через 15 секунд

Не по теме:

Unick, я ну unix системах вообще мало работал

можно в контекстном меню нажать посмотреть код элемента(исследовать элемент, изучить ...)

@ChikaNaPripeve · 09.09.2015, 17:41

необходимо не load использовать , советую clear().append(переменная,страница);
а вообще у вас не вижу тут ajax запроса.

@Programmer_ · 09.09.2015, 21:03

index.html

HTML5

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href = "stylesheet.css"/>
 <!--script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script-->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript">
    /*$( function ready() {
 
 $('#p1').click( function(eventObject) 
 {eventObject.preventDefault();$('#outInfo').load( "page1.html #Info1");});
 $('#p2').click( function(eventObject) 
 {eventObject.preventDefault();$('#outInfo').load( "page1.html #Info2");} );
 });*/
 
 
 $(document).ready(function(){
        $('.ajaxNav a').on('click' , function(e){
            e.preventDefault();
            var href = $(this).attr('href');
                if(href.indexOf('#') != -1){
                    var uriArr = href.split('#') ,
                    str = uriArr[0] + ' #' + uriArr[1];                 
                      $('#outInfo').load( str.toString() ); 
                
                }
            
        });
 });
 
</script>
 
<title>
My First Page
</title>
</head>
<body>
<!--Голова страницы-->
<header>
Информация в header
</header>
<!--навигация-->
<nav class="ajaxNav">
<a href="page1.html#Info1" id = "p1">Info 1</a><br>
<a href="page1.html#Info2" id = "p2">Info2</a><br>
<a href="page1.html" id = "p2">Info2</a><br>
</nav>
<!-- section для вывода -->
<section id="outInfo">
?
</section>
</body>
</html>

page1.html

HTML5

<section id="Info1">
 
<article>
Info number 1
</article>
</section>
 
<section id="Info2">
 
<article>
Info number 2
</article>
</section>

Работает.
P.S. Эт не совсем AJAX ))
http://api.jquery.com/jquery.ajax/

@BANO · 09.09.2015, 23:03

Сообщение от Programmer_

P.S. Эт не совсем AJAX ))

это аякс, просто обёрнутый

@Programmer_ · 10.09.2015, 00:06

Сообщение от BANO

это аякс, просто обёрнутый

Ну я не в том смысле ))) Видимо не так выразился )

@Unick не Администратор ^_^ 988 / 222 / 23 Регистрация: 03.05.2009 Сообщений: 1,493 Записей в блоге: 1
	09.09.2015, 00:47	2
	Сообщение от PaFanja не знаю проверить это точно не могу все можете, откройте консоль и посмотрите ошибки ctrl+shift+i А в хроме во вкладке network можно посмотреть, улетел ли запрос и что он вернул (да и в других браузерах как-то можно глянуть) 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	09.09.2015, 01:01	3
	Unick, я обычно f12 использую, это точно во всех браузерах работает 0

@Unick
	09.09.2015, 01:23 #4
	Не по теме: Сообщение от BANO Unick, я обычно f12 использую, это точно во всех браузерах работает ну если на винде, то да) попробуй на маке f12)) там только cmd+alt+i 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	09.09.2015, 14:44	5
	Не по теме: Unick, я ну unix системах вообще мало работал можно в контекстном меню нажать посмотреть код элемента(исследовать элемент, изучить ...) Добавлено через 15 секунд Не по теме: Unick, я ну unix системах вообще мало работал можно в контекстном меню нажать посмотреть код элемента(исследовать элемент, изучить ...) 0

@ChikaNaPripeve 2 / 2 / 0 Регистрация: 18.04.2013 Сообщений: 50
	09.09.2015, 17:41	6
	необходимо не load использовать , советую clear().append(переменная,страница); а вообще у вас не вижу тут ajax запроса. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	09.09.2015, 23:03	8
	Сообщение от Programmer_ P.S. Эт не совсем AJAX )) это аякс, просто обёрнутый 0

@Programmer_ 88 / 88 / 34 Регистрация: 22.05.2012 Сообщений: 404
	10.09.2015, 00:06	9
	Сообщение от BANO это аякс, просто обёрнутый Ну я не в том смысле ))) Видимо не так выразился ) 0

Опции темы