Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.12.2019, 09:17
ef1 ef1 вне форума
Интересующийся
Отправить личное сообщение для ef1 Посмотреть профиль Найти все сообщения от ef1
 
Регистрация: 07.07.2017
Сообщений: 19

не срабатывает get из модального/дочернего окна
запутался совсем
нужно передать параметры окна самому себе (на эту же страницу) через GET или POST
сделал панель навигации и вида каталога https://codepen.io/ef1/pen/abzwpwd

ссылки(кнопки) <а href из главного окна запускают GET, из модальных - нет...
может события перехватывает - основной фреймворк (использую uikit) т.к. они используются в дизайне
может нет...
сделал специально для них передачу GET на js - ссылка формируется но документ/страница ее не видит (мне нужно увидеть ее в глобальной переменной $_GET страницы)

в голове полная каша, базовых принципов уже не понимаю, в общем... как сделать правильно? для данного случая?
1. по hover открыл модальное окно (ok)
2. нажал на пункт меню (ok)
3. отправил переменную в $_GET (?????????
...
все остальное - показать выбранное значение, загасить модальное окно и т.д. здесь уже более менее все ясно
Ответить с цитированием
  #2 (permalink)  
Старый 30.12.2019, 10:23
ef1 ef1 вне форума
Интересующийся
Отправить личное сообщение для ef1 Посмотреть профиль Найти все сообщения от ef1
 
Регистрация: 07.07.2017
Сообщений: 19

вот для примера (добавил для первого параметра (выбор направления))
если ссылку напрямую повесить на кнопку панели - то по первому клику или hover открывается модальное окно параметров а по второму отправляется GET запрос - но нет юзабилити(два клика) сначала выбрать значение из списка а потом отправить его в GET

хочется - чтобы ссылка запускалась в одном движении -навелись на параметр спустились на значение (кликнули или отпустили мышку или палец) и получили GET
Ответить с цитированием
  #3 (permalink)  
Старый 30.12.2019, 11:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

// request.open("GET", "http://localhost:8080/postdata.php?"+body);

и где она формируется и вообще где запрос sendGet(body)?

А если говорить о "на саму себя", то достаточно передать в функцию параметры запроса, а передача, это

location + '?key=val'
Ответить с цитированием
  #4 (permalink)  
Старый 30.12.2019, 11:47
ef1 ef1 вне форума
Интересующийся
Отправить личное сообщение для ef1 Посмотреть профиль Найти все сообщения от ef1
 
Регистрация: 07.07.2017
Сообщений: 19

вот здесь передавал например "?byName=name"
function sendGet(body){
 console.log(body);
  request.open("GET", body);
  request.onreadystatechange = GETreqReadyStateChange;
  request.send();
//   alert(request.responseText);
//  console.log('2');
 }


в консоли есть, ставил обработчик на события a - тоже все корректно
util.on('a', 'click', function(event){ //test
    console.log(event.target);
  });

а в URL ничего не добавляется и $_GET пустой

ps
(обновил https://codepen.io/ef1/pen/abzwpwd)
Ответить с цитированием
  #5 (permalink)  
Старый 30.12.2019, 11:54
ef1 ef1 вне форума
Интересующийся
Отправить личное сообщение для ef1 Посмотреть профиль Найти все сообщения от ef1
 
Регистрация: 07.07.2017
Сообщений: 19

вот весь код
<hr class="uk-divider-icon">
<div  class="uk-flex uk-flex-center" uk-grid > 
  <div class="uk-width-3-4"> 
	<div id="_SortAndViewPanel" class="uk-section uk-section-muted uk-padding-small uk-clearfix uk-border-rounded uk-box-shadow-xlarge uk-overlay-primary" style="border: 0.5px solid silver; border-radius: 40px 10px; border-top-style:none; border-left-style:none">
    
		<div class="uk-flex uk-flex-middle uk-float-left">
<!-- byDir -->
			<ul id="_list_byDir" class="uk-switcher" uk-tooltip="title: Сортировка по направлению; pos: top-right"> 
				<li class="uk-animation-shake"><a href="?byDir=asc" uk-icon="icon: chevron-up; ratio:	1.5"></a></li>
				<li class="uk-animation-shake"><a href="?byDir=desc" uk-icon="icon: chevron-down; ratio: 1.5"></a></li>
			</ul>
			<div id="_hover_byDir" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0; pos: bottom-justify">
				<span>критерий</span>
				<hr>
 			  <ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byDir">
          <li><a href="?byDir=asc">по возрастанию</a></li>
					<li><a href="?byDir=desc"> по убыванию</a></li>
				</ul> 
			</div>
<!-- byName -->
			<ul id="_list_byName" class="uk-margin-small-left uk-switcher" uk-tooltip="title: Сортировка по критерию; pos: top" >
				<li class="uk-text-uppercase uk-animation-shake"><a class="uk-link-muted">Наименование</a></li>
				<li class="uk-text-uppercase uk-animation-shake"><a class="uk-link-muted">Дата</a></li>
	    </ul>
			<div id="_hover_byName" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0; pos: bottom-justify">
				<span>критерий</span>
				<hr>
				<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byName">
					<li><a href="?byName=name">по наименованию</a></li>
					<li><a href="?byName=timestanp_x">по дате</a></li>
				</ul>
			</div>
		</div>

		<div class="uk-flex uk-flex-middle uk-float-right">
<!-- byCount -->
			<ul id="_list_byCount" class="uk-switcher" uk-tooltip="title: Количество элементов на странице; pos: top">
				<li class="uk-animation-shake"><a class="uk-link-muted">15</a></li>
				<li class="uk-animation-shake"><a class="uk-link-muted">30</a></li>
				<li class="uk-animation-shake"><a class="uk-link-muted">60</a></li>
				<li class="uk-animation-shake"><a class="uk-link-muted">80</a></li>
	    </ul>
			<div id="_hover_byCount" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0;  pos: bottom-justify">
				<span>количество</span>
				<hr>
				<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byCount">
					<li><a href="?byCount=15">15</a></li>
					<li><a href="?byCount=30">30</a></li>
					<li><a href="?byCount=60">60</a></li>
					<li><a href="?byCount=80">80</a></li>
				</ul>
			</div>
 <!-- byView -->
			<ul id="_list_byView" class="uk-margin-small-left uk-link-reset uk-switcher" uk-tooltip="title: Вид каталога; pos: top-left">
				<li class="uk-animation-shake"><a uk-icon="icon: list; ratio:	1.5"></a></li>
				<li class="uk-animation-shake"><a uk-icon="icon: grid; ratio:	1.5"></a></li>
			</ul> 
			<div id="_hover_byView" class="_byPanel" uk-dropdown="mode: hover; delay-hide: 0;  pos: bottom-justify">
				<span>вид каталога</span> 
				<hr>
				<ul class="uk-nav uk-dropdown-nav" uk-switcher="connect: #_list_byView">
					<li><a href="?byView=list">список</a></li>
					<li><a href="?byView=board">плитка</a></li>
				</ul>
			</div>
		</div>
		
	</div>
</div>
</div>
<hr class="uk-divider-icon">

вот js мои попытки
var util = UIkit.util;
var svPanel = util.$('#_SortAndViewPanel'); //основная панель
var svPanels = util.$$('._byPanel');        //списки выбора параметров 

util.ready(function () {

  util.on(svPanels, 'click', function(event){ //событие по клику на панели 
    var aIndex=-1; //индекс элемента активной панели
    if (event.target.tagName=='A'){
      util.trigger(event, sendGet(event.target.search));   //передать get значение в php самому себе 
//      util.addClass(svPanel, 'uk-overlay-primary'); //затемнить панель
      aIndex = util.index(event.target.parentNode);
    }

   svPanels.forEach(function(userItem) {    //загасить активную панель
     if (util.isInView(userItem)) {
       UIkit.dropdown("#"+userItem.id).hide();
     }
    });

  
  }
);
  
  util.on('a', 'click', function(event){ //test
    console.log(event.target);
  });

  util.removeClass(svPanel, 'uk-overlay-primary');
});

var request = new XMLHttpRequest();
function GETreqReadyStateChange() {
    if (request.readyState == 4) {
        var status = request.status;
        if (status == 200) {
//            document.getElementById("output").innerHTML=request.responseText;
          console.log(request.responseText);
        }
    }
}

function POSTreqReadyStateChange() {
    if (request.readyState == 4 && request.status == 200)
        document.getElementById("output").innerHTML=request.responseText;
}

function sendGet(body){
  console.log(body);
  request.open("GET", body);
  request.onreadystatechange = GETreqReadyStateChange;
  request.send();
//   alert(request.responseText);
 }
Ответить с цитированием
  #6 (permalink)  
Старый 30.12.2019, 12:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от ef1
вот здесь передавал например
это цель, а это event.target.search получается источник и что это?
Ответить с цитированием
  #7 (permalink)  
Старый 30.12.2019, 12:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Вот тут

request.open("GET", body);

по уму, должно быть

request.open("GET", location + '?' + body);

где body, это name=value, а event.target.search ну как-то при всей богатой фантазии никак не может быть этим. Видимо тогда уж

request.open("GET", location + '?' + body.name + '=' + body.value); или нечто иное. Или действительно это свойство объекта содержащее необходимое?

Последний раз редактировалось laimas, 30.12.2019 в 12:35.
Ответить с цитированием
  #8 (permalink)  
Старый 30.12.2019, 15:26
ef1 ef1 вне форума
Интересующийся
Отправить личное сообщение для ef1 Посмотреть профиль Найти все сообщения от ef1
 
Регистрация: 07.07.2017
Сообщений: 19

да event.target.search это источник он у меня может быть
"?byDir=asc"
"?byDir=desc"
?byName=name
?byName=timestanp_x"
и т.д.
а цель - эта же страница, где находится разметка
боюсь запутал вас - я просто хочу js получить текущие значения ключей сортировки из этой 'панели' - передать их здесь же переменным php (например через $_GET) и далее в следующий компонент в качестве ключей сортировки каталога на этой же странице
Ответить с цитированием
  #9 (permalink)  
Старый 30.12.2019, 15:53
ef1 ef1 вне форума
Интересующийся
Отправить личное сообщение для ef1 Посмотреть профиль Найти все сообщения от ef1
 
Регистрация: 07.07.2017
Сообщений: 19

передавал и с указанием хоста в лоб
request.open("GET","http://localhost/uikit/panel/?byName=name");
ничего нет
консоль F12 показывает что запрос отправлен через XMLHttpRequest
но в url параметры не передаются и страница не обновляется
типа данные ушли кудато (я не специалист тонкостей не понимаю пока)

вот что идет в запросе
Request URL: [url]http://localhost/uikit/panel/?byName=name[/url]
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade
Connection: Keep-Alive
Content-Length: 6873
Content-Type: text/html; charset=UTF-8
Date: Mon, 30 Dec 2019 12:51:51 GMT
Keep-Alive: timeout=120, max=999
Server: Apache
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Host: localhost
Referer: [url]http://localhost/uikit/paNEL/[/url]
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Mobile Safari/537.36
byName: name
Ответить с цитированием
  #10 (permalink)  
Старый 30.12.2019, 16:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от ef1
Request URL: http://localhost/uikit/panel/?byName=name
Все же передается, так что получается на сервере не то проверяем.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запустить выполнение слайдера в модальном окне, только после вызова окна? Lefseq Общие вопросы Javascript 1 20.12.2019 15:23
Таймер срабатывает раньше времени или вообще не срабатывает Terebonko Элементы интерфейса 6 03.08.2017 12:43
FancyBox: Размер модального окна больше размеров окна браузера (высота), как сделать? clgs Events/DOM/Window 3 22.01.2015 17:13
Не срабатывает событие open для диалогового окна jquery-ui mihail_p AJAX и COMET 4 19.06.2013 22:23
Плавное открытие окна. Flashton Элементы интерфейса 3 20.10.2010 16:00