Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2016, 11:40
Интересующийся
Отправить личное сообщение для Jigan2 Посмотреть профиль Найти все сообщения от Jigan2
 
Регистрация: 13.03.2015
Сообщений: 29

аякс подгрузка без перезагрузки
Здравствуйте! Подскажите пожалуйста в моей проблеме. Есть скрипт:
(function ($) {
        var $categoryProducts = $('#ajax-content');
        $('body').on('click', 'a', function(e){
            console.log($(this).attr('href'));
			e.preventDefault();
            History.pushState(null, document.title, $(this).attr('href'));
        });
 
        function loadPage(url) {
          $('#container').css({opacity: 0.5});
		  setTimeout(function() {
           //$categoryProducts.load(url + " #ajax-content > *",function(){
			  //$('#container').css({opacity: 1});
           //});
		   
		   	$.ajax({
               url:     url + '&ajax=1',
			   dataType : "html",
			   type: 'get',
			   cache: false,
               success: function(data){
                   $categoryProducts.html(data);
				   $('#container').css({opacity: 1});
               }
            });
		 },1000);  
        }
 
        History.Adapter.bind(window, 'statechange',function(e){
            var State = History.getState();
            loadPage(State.url);
        });
})(jQuery);

Он подгружает контент без перезагрузки страницы, но он подгружает полностью всю страницу (вместе с head), а мне нужно получить только нужный контент. Как это сделать без использования php?

При использовании для подгрузки:
$categoryProducts.load(url + " #ajax-content > *",function(){
			  $('#container').css({opacity: 1});
           });


вместо:
$.ajax({
               url:     url + '&ajax=1',
			   dataType : "html",
			   type: 'get',
			   cache: false,
               success: function(data){
                   $categoryProducts.html(data);
				   $('#container').css({opacity: 1});
               }
            });


Все подгружается как надо, но не работают скрипты в подгружаемом контенте. Подскажите может нужно что то включить что бы при получении $.ajax данных они как то склеивались с уже существующим или удалялось все лишнее. Или подскажите почему не работают скрипты при использовании .load() и как их заставить заработать. Не знаю как объяснить поэтому спрашивайте объясню подробнее. Помогите уже 4 дня бьюсь, гугл не объясняет или я не знаю как искать.
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2016, 11:32
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Jigan2,
Сообщение от Jigan2
Все подгружается как надо, но не работают скрипты в подгружаемом контенте.
А где находятся скрипты в подгружаемом контенте?
Ведь в варианте load вы грузите не все, что отдает сервер, а только #ajax-content
Ответить с цитированием
  #3 (permalink)  
Старый 04.04.2016, 13:01
Интересующийся
Отправить личное сообщение для Jigan2 Посмотреть профиль Найти все сообщения от Jigan2
 
Регистрация: 13.03.2015
Сообщений: 29

Сообщение от Dilettante_Pro Посмотреть сообщение
Jigan2,

А где находятся скрипты в подгружаемом контенте?
Ведь в варианте load вы грузите не все, что отдает сервер, а только #ajax-content
Скрипты находятся в том файле который подгружается в #ajax-content
Ответить с цитированием
  #4 (permalink)  
Старый 04.04.2016, 13:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Jigan2,
http://api.jquery.com/load/
Цитата:
 Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

$( "#a" ).load( "article.html" );
However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

$( "#b" ).load( "article.html #target" );


Таким образом, при load с указанием селектора скрипт не просто не работает, а удаляется из загружаемого контента.
Как вариант выхода из ситуации - грузить без селектора страницу, в которой размещено только нужное
Ответить с цитированием
  #5 (permalink)  
Старый 04.04.2016, 14:18
Интересующийся
Отправить личное сообщение для Jigan2 Посмотреть профиль Найти все сообщения от Jigan2
 
Регистрация: 13.03.2015
Сообщений: 29

Спасибо я уже нагуглил про это
Ответить с цитированием
  #6 (permalink)  
Старый 04.04.2016, 14:21
Интересующийся
Отправить личное сообщение для Jigan2 Посмотреть профиль Найти все сообщения от Jigan2
 
Регистрация: 13.03.2015
Сообщений: 29

А почему тогда такой срабатывает?
<script type="text/javascript">
alert('работает');
</script>

А такой уже нет
<script type="text/javascript">
$(function(){
alert('работает');
});
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2016, 14:25
Интересующийся
Отправить личное сообщение для Jigan2 Посмотреть профиль Найти все сообщения от Jigan2
 
Регистрация: 13.03.2015
Сообщений: 29

В общем я решил эту проблему посредством php т.е. при использовании аякс подгрузке php отделяет не нужный контент, а если пользователь впервые грузит страницу то отдаю весь контент т.е. header, footer
И вместо load() использую
$.ajax({
               url:     url + '&ajax=1',
			   dataType : "html",
			   type: 'get',
			   cache: false,
               success: function(data){
                   $categoryProducts.html(data);
				   //$('#container').css({opacity: 1});
               }
            });
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2016, 14:30
Интересующийся
Отправить личное сообщение для Jigan2 Посмотреть профиль Найти все сообщения от Jigan2
 
Регистрация: 13.03.2015
Сообщений: 29

Сообщение от Dilettante_Pro Посмотреть сообщение
Jigan2,
http://api.jquery.com/load/
Цитата:
 Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

$( "#a" ).load( "article.html" );
However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

$( "#b" ).load( "article.html #target" );


Таким образом, при load с указанием селектора скрипт не просто не работает, а удаляется из загружаемого контента.
Как вариант выхода из ситуации - грузить без селектора страницу, в которой размещено только нужное
А как можно удалить не нужный контент при подгрузке без селектора например удалить header, footer
Ответить с цитированием
  #9 (permalink)  
Старый 04.04.2016, 14:43
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Jigan2 Посмотреть сообщение
А почему тогда такой срабатывает?
<script type="text/javascript">
alert('работает');
</script>

А такой уже нет
<script type="text/javascript">
$(function(){
alert('работает');
});
</script>
И первый и второй работают (я попробовал), только при load без селектора - с селектором в загруженном коде их просто не будет.


Цитата:
В общем я решил эту проблему посредством php т.е. при использовании аякс подгрузке php отделяет не нужный контент, а если пользователь впервые грузит страницу то отдаю весь контент т.е. header, footer
И вместо load() использую
И правильно - load удобнее использованием селекта, который в этом варианте не нужен
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгрузка контента, без перезагрузки панели cyber_bober Элементы интерфейса 2 14.12.2012 13:37
Как можно сделать подгрузку и смену изображения без перезагрузки страницы с другого Евгений Болгов jQuery 11 21.10.2010 18:18
Подскажите как в VLC плеере переключать канал без перезагрузки страницы? mff Events/DOM/Window 0 10.05.2010 17:28
Подгрузка контента в определённый DIV при нажатии на ссылку, без перезагрузки страниц Flashton Events/DOM/Window 0 10.03.2010 19:53
Подгрузка информера без перезагрузки страницы splean Общие вопросы Javascript 6 13.03.2009 15:31