Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2017, 20:01
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Не работает $.get метод jQuery
Всем привет. Народ, есть вот такая вот страничка:

http://trikolor-orenburg.ru/products.html

Я хочу на ней по щелчку по ссылке "Подгрузить данные" - чтобы на эту страницу внутрь блока с классом wrapper подгружалось содержимое страницы row.html

Вот код страницы http://trikolor-orenburg.ru/products.html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="private">
		<title></title>
        <script src="assets/js/jquery.js"></script>
        
        <link rel="stylesheet" href="assets/css/uikit.css" />
        <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.css">
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.bxslider.css">
        

        
        <!--<script src="assets/js/jquery-3.2.0.min.js"></script>-->
        
        <script src="assets/js/uikit.min.js"></script>
        <script src="assets/js/uikit-icons.js"></script>
        <script src="assets/js/jquery.fancybox.js"></script>
        <script src="assets/js/jquery.bxslider.js"></script>
        <script>
        	$(document).ready(function(){
                
                $('.wrapper a').click(function(){
                    var content;
                    //$(this).fadeOut();
                    $.get('row.html', function(data){
                        content = data;
                        $('.wrapper').append(content);
                    });      
                });

                /*
                slider = $('.bxslider').bxSlider({
				  pagerCustom: '#bx-pager'
				});

        		$('.trigger').fancybox();

        		$('.trigger').on('click', function(){
        			slider.reloadSlider();
        		});
        		
                
        		$('form').submit(function(e){
        			var $form = $(this);

        			$.ajax({
        				type: $form.attr('method'),
        				url: $form.attr('action'),
        				data: $form.serialize()
        			}).done(function(result){
        				alert('Сообщение успешно отправлено!');
        				//Тут надо сделать так, чтобы модальное окно само закрывалось после отправки сообщения
        				$('#modal1').fadeOut('slow', function(){
        					
        				});

        			}).fail(function(result){
        				alert('Ошибка при отправке сообщения!' + result);
        			});

        			//отмена действия по умолчанию для кнопки submit
        			e.preventDefault();
        		});

        		//Делаем поле телефона обязательным для заполнения
        		$('input[name=phone]').on('input keyup',function(e){
        			if($(this).val()=='')
        				$('form input[type=submit]').prop('disabled',true);
        			else
        				$('form input[type=submit]').prop('disabled',false);	
        		});*/

        	});

			
        </script>
</head>
<body>
...
<div class="wrapper">
    <div class="block">
        Данные
    </div>
    <div class="block">
        Данные
    </div>
    <a href="#">Подгрузить данные</a>
</div>

</body>
</html>


$.get нормально работает, и добавляет в блок с классом wrapper содержимое row.html только если не подгружать к странице 2 css файла:

uikit.css и custom.css

Если в разделе head закомментировать их подключение - то всё нормально добавляется.
Проблема в том, что эти 2 css файла мне нужны, без них никак. Подскажите, есть ли способ, как это можно вылечить?
Ответить с цитированием
  #2 (permalink)  
Старый 08.04.2017, 20:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

То есть какие-то косяки со стилями, а вывод Не работает $.get?
Ответить с цитированием
  #3 (permalink)  
Старый 08.04.2017, 20:19
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Нууу, не знал как тему назвать )
Ответить с цитированием
  #4 (permalink)  
Старый 08.04.2017, 20:20
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Ну вдруг подскажет кто, каким это образом стили могут конфликтовать с js-кодом
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2017, 21:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от fenix_63
добавляет в блок с классом wrapper содержимое row.html только если не подгружать к странице 2 css файла
Оно и с ними загружается, но скрыто. И все потому, что элемент id="hidden-row" в стилях, в файле custom.css в строке 211 указан как скрытый по умолчанию. А при загрузке содержимого ничто не меняет это определение на обратное, здесь:

$.get('row.html', function(data){
content = data;
$('.wrapper').append(content);
});

Вы ненужную переменную var content; определяете, а сделать блок видимым даже и не думаете.


$.get('row.html', function(data){
     $(dat).appendTo('.wrapper').find('#hidden-row').show();
});


Отладчик в браузере для чего?
Ответить с цитированием
  #6 (permalink)  
Старый 09.04.2017, 12:39
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Да, точно, спасибо большое! Я недоглядел
Ответить с цитированием
  #7 (permalink)  
Старый 09.04.2017, 12:47
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Теперь правда другая проблема вылезла. Пользователь нажимает ссылку "Загрузить ещё" - блок с необходимой информацией подгружается, ссылку "Загрузить ещё" я удаляю, и добавляю точно такую же ссылку - но после только что добавленного блока данных, но новая, добавленная ссылка уже функционалом необходимым не обладает.

Странно, DOM-дерево вроде бы обновилось, но jQuery почему то функционал отрабатывать не хочет.

Вот фрагмент кода:
...
$('.wrapper a:last, .wrapper #load a').click(function(){
                    
                    $.get('row.html', function(data){
                        
                        $('.wrapper #load').remove();
                        $(data).appendTo('.wrapper').find('#hidden-row').css({"display":"flex"});
                        $('<div id="load"><a href="javascript:void(0);">Загрузить ещё</a></div>')
                        .appendTo('.wrapper');
                        
                    });      
                });
...


Страница всё таже: http://trikolor-orenburg.ru/products.html
Ответить с цитированием
  #8 (permalink)  
Старый 09.04.2017, 13:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Ничего странного - элемент которому был определен обработчик удален, а вновь добавляемый, это уже другой элемент. Зачем удалять его, какой в этом смысл?
Ответить с цитированием
  #9 (permalink)  
Старый 09.04.2017, 16:45
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Нужно было, чтобы ссылка "Загрузить ещё" всегда была в самом конце под только что добавленным блоком. Пробовал не удалить элемент, а перенести его - не получилось, поэтому попробовал через удаление и добавление.
Ответить с цитированием
  #10 (permalink)  
Старый 09.04.2017, 16:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от fenix_63
Нужно было, чтобы ссылка "Загрузить ещё" всегда была в самом конце под только что добавленным блоком.
Для этого достаточно иметь соответствующую структуру HTML с учетом добавления.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает jQuery doox911 Библиотеки/Тулкиты/Фреймворки 3 17.01.2014 15:51
Метод JQuery $.post работает через раз Dimaz AJAX и COMET 3 22.11.2012 17:52
jQuery Click() не работает на объекте, созданном Ajax vovabigov jQuery 13 09.09.2012 14:25
Метод $.get в jquery Vahe jQuery 10 22.05.2011 13:32
Не работает анимация jquery hugi jQuery 1 30.08.2010 20:25