не срабатывает get из модального/дочернего окна
запутался совсем
нужно передать параметры окна самому себе (на эту же страницу) через GET или POST сделал панель навигации и вида каталога https://codepen.io/ef1/pen/abzwpwd ссылки(кнопки) <а href из главного окна запускают GET, из модальных - нет... может события перехватывает - основной фреймворк (использую uikit) т.к. они используются в дизайне может нет... сделал специально для них передачу GET на js - ссылка формируется но документ/страница ее не видит (мне нужно увидеть ее в глобальной переменной $_GET страницы) в голове полная каша, базовых принципов уже не понимаю, в общем... как сделать правильно? для данного случая? 1. по hover открыл модальное окно (ok) 2. нажал на пункт меню (ok) 3. отправил переменную в $_GET (????????? ... все остальное - показать выбранное значение, загасить модальное окно и т.д. здесь уже более менее все ясно |
вот для примера (добавил для первого параметра (выбор направления))
если ссылку напрямую повесить на кнопку панели - то по первому клику или hover открывается модальное окно параметров а по второму отправляется GET запрос - но нет юзабилити(два клика) сначала выбрать значение из списка а потом отправить его в GET хочется - чтобы ссылка запускалась в одном движении -навелись на параметр спустились на значение (кликнули или отпустили мышку или палец) и получили GET |
// request.open("GET", "http://localhost:8080/postdata.php?"+body);
и где она формируется и вообще где запрос sendGet(body)? А если говорить о "на саму себя", то достаточно передать в функцию параметры запроса, а передача, это location + '?key=val' |
вот здесь передавал например "?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) |
вот весь код
<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);
}
|
Цитата:
|
Вот тут
request.open("GET", body); по уму, должно быть request.open("GET", location + '?' + body); где body, это name=value, а event.target.search ну как-то при всей богатой фантазии никак не может быть этим. Видимо тогда уж request.open("GET", location + '?' + body.name + '=' + body.value); или нечто иное. Или действительно это свойство объекта содержащее необходимое? |
да event.target.search это источник он у меня может быть
"?byDir=asc" "?byDir=desc" ?byName=name ?byName=timestanp_x" и т.д. а цель - эта же страница, где находится разметка боюсь запутал вас - я просто хочу js получить текущие значения ключей сортировки из этой 'панели' - передать их здесь же переменным php (например через $_GET) и далее в следующий компонент в качестве ключей сортировки каталога на этой же странице |
передавал и с указанием хоста в лоб
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 |
Цитата:
|
)) ну да очевидно не там проверяю )) а где проверять то? в какую переменную эти значения улетают? (может и get не нужен, я просто не знаю и пробую так и так)
ps сейчас эта панель у меня на (https://cadmarket.ru/programmnoe_obespechenie/ и там чтобы засунуть параметры в url я использовал библиотеку jquery (гдето скачал)) просто хочу переписать компонент попроще - избавиться от двух кликов - но этот href из модального окна не срабатывает напрямую, а через XMLHttpRequest улетает неизвестно куда ))) |
...
|
Цитата:
|
решилость так
вместо отправки get через XMLHttpRequest отправил его через window.location.search (https://www.yandex.ru/turbo?text=htt...avascript.html)
util.on(svPanels, 'click', function(event){ //событие по клику на панели
var aIndex=-1; //индекс элемента активной панели
if (event.target.tagName=='A'){
// util.trigger(event, sendGet(event.target.search)); //передать get значение в php самому себе
window.location.search = event.target.search; //window.location.search = "?byName=timestanp_x";
// util.addClass(svPanel, 'uk-overlay-primary'); //затемнить панель
aIndex = util.index(event.target.parentNode);
}
и оно ушло!!! в url и попало в $_GET массив на текущей странице Код:
http://localhost/panel/?byName=timestanp_x... эта функция (window.location.search) возвращает арес из модального окна в основное? |
Цитата:
document.getElementById("output").innerHTML=reques t.responseText; ничего нет, то сервер просто забил на ваш запрос, а причиной могут быть заголовки и прочее. Но при отправлении XMLHttpRequest страница не перегружается, а без него будет перезагружена, а это большая разница. |
Профессор спасибо большое!!!! за комментарии ))
(к слову request.responseText в моем случае возврашает всю страницу но с пустым $_GET)
function sendGet(body){
var xhr = new XMLHttpRequest();
xhr.open('GET', body, false);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
console.log(data);
// var jsonResponse = JSON.parse(data);
// console.log(jsonResponse["Data"]);
}
}
};
xhr.send(null);
}
... для данной панели перезагрузка страницы обязательна (мне так кажется) т.к. ниже расположен каталог товаров и он полюбому должен быть перезагружен с новыми ключами сортировки и видом отображения ps впрочем у меня еще мало опыта pps кстати и window.location.href=event.target.href тоже работает и перезгужает страницу на этом этапе наверно все - закрываем тему ВСЕХ С НАСТУПАЮЩИМ!!!!!!!!!!!!!!!!!!!! |
off
в общем такое впечатление что модальное окно (блокирует основное) содержащее ссылку href отправляет get в это самое модальное окно и нужно (наверно) запомнить href из модального окна, и после его закрытия, находясь уже в основном окне например 1.выполнить get запрос через XMLHttpRequest (по сохраненным href) или 2 создать налету невидимый <a href, запустить по нему click, и потом уничтожить этот <a href но по п1. не знаю как это сделать, а по п.2 это наверно извращение |
Цитата:
Пользователь эту страницу также запрашивает методом GET и если сервер не анализирует как и что запрашивается, то он возвращает страницу, поэтому вы и видите весь html код ее в ответе. А чтобы видеть только ответ на запрос сделанный через XMLHttpRequest, север должен проанализировать это событие и делать это он должен до любого вывода в браузер, после чего завершить работу, чтобы дальнейшее не попадало в ответ (остальной код страницы). То есть, к примеру, ваша страница начинается: <!DOCTYPE HTML> <html> .... и т.д. то для анализа запроса XMLHttpRequest и ответа на него структура страницы должна быть такой: <?php здесь проверка на получение GET запроса от XMLHttpRequest если есть, то анализ параметров, операции, ответ и обязательный exit; ?> <!DOCTYPE HTML> <html> .... и т.д. Цитата:
|
| Часовой пояс GMT +3, время: 19:50. |