Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 05.06.2018, 06:03   #1
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию Не срабатывают события при подгрузки через php

Здравствуйте, такая проблемка), если подгружать в index.html разметку из php файл то чекбоксы этой разметки не работают, НО прекрасно работают если их разместить непосредственно в index.php.

Код:
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Жалюзи</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!--<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>-->
	<link rel="stylesheet" type="text/css" href="css/checkbox.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
    <script type="text/javascript" src="js/jaluzi.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script type="text/javascript" src="bootstrap4/js/bootstrap.min.js"></script>	
</head>
<body>
<div class="container-fluid" style="margin-left: 10;">

<!-- Блок кнопок выбора таблиц изделий -->
<div id="tkani" class="row rounded border-primary">
	<div class="col text-center" style="padding-bottom: 10px;">
	<h1 class="h4 font-weight-bold">Выбираем ткани</h1>
	<button type="button" id="rol_but" class="btn btn-outline-primary active">Рулонки</button>
	<button type="button" id="ver_but" class="btn btn-outline-primary">Вертикалки</button>
	<button type="button" id="gor_but" class="btn btn-outline-primary">Горизонтальные</button>
	<button type="button" id="rim_but" class="btn btn-outline-primary">Римские</button>
	<button type="button" id="zeb_but" class="btn btn-outline-primary">Зебра</button>
	</div>
</div>


<div id="filter" class="row rounded border-primary">
 <div class="col-12 text-center" style="margin-bottom:15px;">
   <h1 class="h4 font-weight-bold filter_title"></h1>
 </div>
<div class="row text-center filter_content" style="width: 600px;"></div>// сюда выводим чекбоксы из filter_rol.php
</div>

<div id="block-tovar-grid" class="row rounded border-primary">
<div class="col-12 text-center"><h1 class="h4 font-weight-bold tkani_title"></h1></div>
<div class="col-12 text-center res" style="overflow: auto; height: 600px;">// сюда выводим таблицы с тканями
 </div>
 </div>
 </div>
</body>
Файл parameter_rol.php-через этот файл вызываем подгрузку filter_rol.php
PHP код:
<?php    
switch ($_POST['filtr_content']){
    case 
rol_but:
    include 
'filter_rol.php';
    break;
    
    case 
ver_but:
    echo 
'<h5 style="margin: auto; color:#007bff;"> Пока пусто</h5>';
    break;
    
    case 
gor_but:
    echo 
'<h5 style="margin: auto; color:#007bff;"> Пока пусто</h5>';
    break;
    
    case 
rim_but:
    echo 
'<h5 style="margin: auto; color:#007bff;"> Пока пусто</h5>';
    break;
    
    case 
zeb_but:
    echo 
'<h5 style="margin: auto; color:#007bff;"> Пока пусто</h5>';
    break;
    
    default:
    echo 
'id кнопки не найдено';
    break;
}     
 
?>
Файл filter_rol.php-тут разметка html
PHP код:
<?php
echo'
<div class="col-6 text-center border-primary" style="border-right: 2px solid;">
    <form name="prosvet">
    <h1 class="h5 font-weight-bold font-italic">Прозрачность</h1>
    <input id="svet" name="a" type="checkbox" style="opacity: 0; position: absolute;">
    <label for="svet" name="svetpro">
    <img class="pro" src="/images/3.png"/>
    <p>Свет 50%</p>
    </label>
    <input id="svet_bo" name="b" type="checkbox" align="left" style="opacity: 0; position: absolute;">
    <label for="svet_bo" name="svetpro" class="pl-3 mt-2">
    <img class="pro" src="/images/4.png" />
    <p>Black-Out 100%</p>
    </label>
</form>
</div>
<div class="col-6 text-center font-italic">
<form name="categori">
   <h1 class="h5 font-weight-bold">Категории</h1>
  <input type="checkbox" name="cat" id="box-1">
  <label for="box-1"><p>0 категория</p></p></label>

  <input type="checkbox" name="cat" id="box-2">
  <label for="box-2"><p>1 категория</p></label>

  <input type="checkbox" name="cat" id="box-3">
  <label for="box-3"><p>2 категория</p></label>
  
  <input type="checkbox" name="cat" id="box-4">
  <label for="box-4"><p>3 категория</p></label>
  
  <input type="checkbox" name="cat" id="box-5">
  <label for="box-5"><p>4 категория</p></label>
  
  <input type="checkbox" name="cat" id="box-6">
  <label for="box-6"><p>5 категория</p></label>
</form>
</div>
'
;?>
Файл jaluzi.js- тут обработчики для кнопок и чекбоксов
Код:
$(document).ready(function() {
	
$('[name="prosvet"] input[type=checkbox]').click(function() { //функция выбора ткани по чекбоксу
  var str = $('[name="prosvet"] input:not([type="checkbox"])').serialize();
  var str1 = $('[name="prosvet"] input[type="checkbox"]').map(function() {
    return this.id + "=" + this.checked;
  }).get().join("&");
  if (str1 != "" && str != "") str += "&" + str1;
  else str += str1;
  $.ajax({
    type: 'POST',
    url: 'svet.php',
    data: {svet_name: str1},
    success: function(svet_rezult) {
      $("#block-tovar-grid .res").html(svet_rezult);
    }
  });
});

$('label').click(function() { //добавляем класс active при клике на label name="svetpro"
  $(this).toggleClass("active");
});

$('button[type="button"]').click(function() { //активное состояние кнопки при нажатии
$(this).siblings().removeClass('active');
$(this).addClass('active');
});

$("#tkani button[type='button']").on("click", function(){ //кнопки выбора вида жалюзи
	var tkani_title ='';
	var filter_title = '';
    var button_id = $(this).attr("id");
	
    $.ajax({
    type: 'POST',
    url: 'button.php',
    data: {base_id: button_id},
    success: function(button_rezult) {
    $("#block-tovar-grid .res").html(button_rezult);
         }
       });
	   
	$.ajax({
    type: 'POST',
    url: 'parametre_rol.php',
    data: {filtr_content: button_id},
    success: function(filtr_content_rezult) {
    $(".filter_content").html(filtr_content_rezult);
         }
       });
	   
	   if (button_id=='rol_but' || button_id=='ver_but' || button_id=='gor_but' || button_id=='rim_but' || button_id=='zeb_but'){
       $('[name="svetpro"]').removeClass('active'); //при нажатии на кнопки удаляем класс active
	   $('[name="cat"]').prop("checked", false); //при нажатии всех кнопок переводим все чекбоксы Категории в false
	   }
	   
	   if(button_id=='rol_but'){tkani_title ='Рулонные ткани';}
	   if(button_id=='ver_but'){tkani_title ='Вертикальные ткани';}
	   if(button_id=='gor_but'){tkani_title ='Горизонтальные ламели';}
	   if(button_id=='rim_but'){tkani_title ='Римские карнизы';}
	   if(button_id=='zeb_but'){tkani_title ='Ткани Зебра';}
	   $('.tkani_title').html(tkani_title);
	   
	   if(button_id=='rol_but'){filter_title ='Фильтр по рулонным изделиям';}
	   if(button_id=='ver_but'){filter_title ='Фильтр по вертикальным изделиям';}
	   if(button_id=='gor_but'){filter_title ='Фильтр по горизонтальным изделиям';}
	   if(button_id=='rim_but'){filter_title ='Фильтр по римским изделиям';}
	   if(button_id=='zeb_but'){filter_title ='Фильтр по изделиям зебра';}
	   $('.filter_title').html(filter_title);
    });
	
	$('#rol_but').click();
	      
    $(".pro").tooltip(); // инициализация всплывающих подсказок
   
});
Инфы много, но наверное по другому ни как, а то не понятно будит)).
Еду медленно, но верно!

Последний раз редактировалось spoon100500; 05.06.2018 в 06:06.
spoon100500 вне форума Ответить с цитированием
Старый 05.06.2018, 07:27   #2
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Подобные конструкции
Код:
$('#whatever').click(function() {
замените на это

Код:
$('#whatever').on('click', function() {
     /* your code here */
});
пример это
Код:
$('[name="prosvet"] input[type=checkbox]').click(function() { //функция выбора ткани по чекбоксу
поменять на это
Код:
$('[name="prosvet"] input[type=checkbox]').on('click', function() { //функция выбора ткани по чекбоксу
Я часть той силы, что вечно хочет зла, но вечно совершает благо..

Последний раз редактировалось Stanislav; 05.06.2018 в 07:32.
Stanislav вне форума Ответить с цитированием
Старый 05.06.2018, 11:37   #3
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Не помогло(:
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 05.06.2018, 11:43   #4
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

значит откройте консоль, и когда щелкаете по чекбоксу посмотрите что выводит. напихайте алертов посмотрите будут ли они в консоли выводиться, надо учится дебажить емае.
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 05.06.2018, 12:18   #5
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Дак в том то и дело, что ни чего не происходит, алерты вставлял, тишина.
Как-будто ширма стоит, но на ховер реагируют.
Еду медленно, но верно!

Последний раз редактировалось spoon100500; 05.06.2018 в 12:21.
spoon100500 вне форума Ответить с цитированием
Старый 05.06.2018, 12:26   #6
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

покажите код jaluzi.js и где там ховер кстати
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 05.06.2018, 12:27   #7
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Ховер тут style.css
Код:
.pro{
	filter: grayscale(100%);
	cursor: pointer;
	}
	.pro:hover{
	filter:contrast(60%);
	}
	.active img{
	filter: grayscale(0);
	}
	.block{
	padding: 0 0 10 30;
	}
	.container-fluid>div{
	max-width: 600px;
	background: #0c0c0c15;
	border:2px solid;
	padding: 10 0 10 0;
	margin-top:10px;
	}
	button:checked{
	color:#f7f905;
	}
	.active p{
	font-weight: bold;
	}
jaluzi.js в первом посте этой темы.
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 05.06.2018, 12:50   #8
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Я хотел глянуть изменения которые вы сделали
Цитата:
Не помогло(:
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 05.06.2018, 12:57   #9
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 406
По умолчанию

Код:
$(document).ready(function() {
	
$('[name="prosvet"] input[type=checkbox]').on('click', function() { //функция выбора ткани по чекбоксу
  var str = $('[name="prosvet"] input:not([type="checkbox"])').serialize();
  var str1 = $('[name="prosvet"] input[type="checkbox"]').map(function() {
    return this.id + "=" + this.checked;
  }).get().join("&");
  if (str1 != "" && str != ""){str += "&" + str1;}
  else {str += str1;}
  $.ajax({
    type: 'POST',
    url: 'svet.php',
    data: {svet_name: str1},
    success: function(svet_rezult) {
      $("#block-tovar-grid .res").html(svet_rezult);
    }
  });
});

$('[name="categori"] input[type=checkbox]').on('click', function() { //функция выбора Категории по чекбоксу
  var str = $('[name="categori"] input:not([type="checkbox"])').serialize();
  var str1 = $('[name="categori"] input[type="checkbox"]').map(function() {
    return this.id + "=" + this.checked;
  }).get().join("&");
  if (str1 != "" && str != "") str += "&" + str1;
  else str += str1;
  $.ajax({
    type: 'POST',
    url: 'categori.php',
    data: {categori_id: str1},
    success: function(categori_rezult) {
      $("#block-tovar-grid .res").html(categori_rezult);
    }
  });
});

$('label').on('click', function() { //добавляем класс active при клике на label name="svetpro"
  $(this).toggleClass("active");
});

$('button[type="button"]').on('click', function() { //активное состояние кнопки при нажатии
$(this).siblings().removeClass('active');
$(this).addClass('active');
});

$("#tkani button[type='button']").on('click', function(){ //кнопки выбора вида жалюзи
	var tkani_title ='';
	var filter_title = '';
    var button_id = $(this).attr("id");
	
    $.ajax({
    type: 'POST',
    url: 'button.php',
    data: {base_id: button_id},
    success: function(button_rezult) {
    $("#block-tovar-grid .res").html(button_rezult);
         }
       });
	   
	$.ajax({
    type: 'POST',
    url: 'parametre_rol.php',
    data: {filtr_content: button_id},
    success: function(filtr_content_rezult) {
    $(".filter_content").html(filtr_content_rezult);
         }
       });
	   
	   if (button_id=='rol_but' || button_id=='ver_but' || button_id=='gor_but' || button_id=='rim_but' || button_id=='zeb_but'){
       $('[name="svetpro"]').removeClass('active'); //при нажатии на кнопки удаляем класс active
	   $('[name="cat"]').prop("checked", false); //при нажатии всех кнопок переводим все чекбоксы Категории в false
	   }
	   
	   if(button_id=='rol_but'){tkani_title ='Рулонные ткани';}
	   if(button_id=='ver_but'){tkani_title ='Вертикальные ткани';}
	   if(button_id=='gor_but'){tkani_title ='Горизонтальные ламели';}
	   if(button_id=='rim_but'){tkani_title ='Римские карнизы';}
	   if(button_id=='zeb_but'){tkani_title ='Ткани Зебра';}
	   $('.tkani_title').html(tkani_title);
	   
	   if(button_id=='rol_but'){filter_title ='Фильтр по рулонным изделиям';}
	   if(button_id=='ver_but'){filter_title ='Фильтр по вертикальным изделиям';}
	   if(button_id=='gor_but'){filter_title ='Фильтр по горизонтальным изделиям';}
	   if(button_id=='rim_but'){filter_title ='Фильтр по римским изделиям';}
	   if(button_id=='zeb_but'){filter_title ='Фильтр по изделиям зебра';}
	   $('.filter_title').html(filter_title);
    });
	
	$('#rol_but').click();
	      
    $(".pro").tooltip(); // инициализация всплывающих подсказок
   
});
Еду медленно, но верно!
spoon100500 вне форума Ответить с цитированием
Старый 05.06.2018, 13:10   #10
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

В консоли есть ошибки? все должно работать, не понятно почему у вас не получается, начните с простого примера, создайте index.html туда запихните аякс который ссылается на пыху из пыхи верните html структуру например кнопку а в index.html попробуйте повесить на нее обработчик и чтобы вывел алерт. Если что то не получается не надо никого ждать, надо пробовать, и самое простое начать с простого
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При открытии Excel workbook макросом из PowerPoint события не срабатывают...Почему? RISagitov Microsoft Office Excel 0 07.03.2016 21:28
скрипт подгрузки при скролинге alimov7 Помощь студентам 0 07.11.2012 17:00
Скрипт подгрузки страницы при скролинге alimov7 Помощь студентам 0 06.11.2012 15:21
Ширина DIV при подгрузки html 1ord JavaScript, Ajax 5 13.02.2011 22:42
Кодировка при вводе данных через php-myadmin и sql запросы serg-php PHP 4 27.09.2009 17:03