Javascript-форум - Помогите пож с JSON, передача id ссылки.

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Помогите пож с JSON, передача id ссылки. (https://javascript.ru/forum/jquery/44991-pomogite-pozh-s-json-peredacha-id-ssylki.html)

wisma

10.02.2014 05:47

Помогите пож с JSON, передача id ссылки.

Здравствуйте, есть скрипт который передает параметры выбора опций html imput.:

<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function(){
    jQuery('.popupregion input').click(function(){
      var loc = 0;
      loc = jQuery('.popupregion select option:selected').val();
      jQuery.ajax({
        url: '/pop.php?loc='+loc,
        dataType : "json",
        success: function (data, textStatus) {
          if(data.ok === true){
            document.location.href = document.location.href;
          }
        }              
      });
      return false;
    });
  });
</script>

Сама формочка:

<div class="popupregion"<?php if((isset($_COOKIE['proc'])&&isset($_COOKIE['lproc']))){ ?> style="display: none;"<?php } ?>>
  <div class="block">
    <p>ТЕКСТ</p>
    <div class="select">
      
        <option value="1">Черкасская область</option>
        <option value="2">Черниговская область</option>
        <option value="3">Черновецкая область</option>
        <option value="4">Днепропетровская область</option>
        <option value="5">Донецкая область</option>
        <option value="6">Ивано-Франковская область</option>
        <option value="7">Харьковская область</option>
        <option value="8">Херсонская область</option>
        <option value="9">Хмельницкая область</option>
        <option value="10">Кировская область</option>
        <option value="11">Крым</option>
        <option value="12">Киев</option>
        <option value="13">Киевская область</option>
        <option value="14">Луганская область</option>
        <option value="15">Львовская область</option>
        <option value="16">Николаевская область</option>
        <option value="17">Одесская область</option>
        <option value="18">Полтавская область</option>
        <option value="19">Ровненская область</option>
        <option value="20">Севастополь</option>
        <option value="21">Сумская область</option>
        <option value="22">Тернопольская область</option>
        <option value="23">Винницкая область</option>
        <option value="24">Волынская область</option>
        <option value="25">Закарпатская область</option>
        <option value="26">Запорожская область</option>
        <option value="27">Житомирская область</option>
        <option value="0">Я не из Украины</option>
      </select>
      <input type="button" value="выбрать">
    </div>
  </div>
</div>

Писал очень давно один программист, но связь с ним к большому сожалению утеряна, так вот, помощь нужна в том чтобы такие-же действия выполнялись но только с ссылками, т.е. вместо

url: '/pop.php?loc='+loc

, добавлял id ссылки, и при нажатии на ссылку происходило тоже самое что и при собитии

<input type="button" value="выбрать">

Примерно накидал себе ссылки...

<a id="1" href="#">Черкасская область</a>
        <a id="2" href="#"> Черниговская область</a>
        <a id="3" href="#">Черновецкая область</a>
        <a id="4" href="#">Днепропетровская область</a>
        <a id="5" href="#">Донецкая область</a>
        <a id="6" href="#">Ивано-Франковская область</a>
        <a id="7"  href="#">Харьковская область</a>
        <a id="8" href="#">Херсонская область</a>
        <a id="9" href="#">Хмельницкая область</a>
        <a id="10" href="#">Кировская область</a>
        <a id="11" href="#">Крым</a>
        <a id="12" href="#">Киев</a>
        <a id="13" href="#">Киевская область</a>
        <a id="14" href="#">Луганская область</a>
        <a id="15" href="#">Львовская область</a>
        <a id="16" href="#">Николаевская область</a>
        <a id="17" href="#">Одесская область</a>
        <a id="18" href="#">Полтавская область</a>
        <a id="19" href="#">Ровненская область</a>
        <a id="20" href="#">Севастополь</a>
        <a id="21" href="#">Сумская область</a>
        <a id="22" href="#">Тернопольская область</a>
        <a id="23" href="#">Винницкая область</a>
        <a id="24" href="#">Волынская область</a>
        <a id="25" href="#">Закарпатская область</a>
        <a id="26" href="#">Запорожская область</a>
        <a id="27" href="#">Житомирская область</a>
        <a id="0" href="#">Я не из Украины</a>

а вот с js у меня большие проблемы( почитав кучу текста про это все ничему ненаучился и ничего у меня не вышло(, помогите пожалуйста.

danik.js

10.02.2014 07:09

Цитата:

Сообщение от wisma

jQuery.noConflict();

Сайт на джумле чтоли? Выкинь нафиг jQuery - глупо юзать библиотеку из 10000 строк ради пары функций..
Код на чистом js:

// оборачиваем код в функцию, дабы не засерать глобальную область переменными
(function(){
    // коллекция элементов-регионов
    var options = document.querySelectorAll('a');
    // обработчик события click
    var onclick = function() {
        // обработчик вызывается в контексте элемента, на котором он зарегистрирован, то есть this указывает на сам элемент
        var id = this.getAttribute('id');
        // создаем объект для ajax-запроса
        var request = new XMLHttpRequest();
        // настраиваем на GET-запрос
        request.open('GET', '/pop.php?loc=' + id);
        // навешиваем обработчик "смены состояний". тут бы лучше подошел обработчик onload, но у него проблемы с кроссбраузерностью
        request.onreadystatechange = function() {
            // ожидаем завершения запроса
            // 4 - это значение константы request.DONE, означающей, что запрос завершен. опять же, в IE8 константы этой нет, так что пишем тупо четверку
            if (this.readyState != 4)
                return;
            // сервак должен ответить 200 OK, иначе считаем за ошибку
            if (this.status !== 200)
                return alert('Ошибка при запросе!');
            // парсим JSON-ответ. Может бросить исключение при невалидном значении.
            var data = JSON.parse(this.responseText);
            // если ок, то перезагружаем страницу
            if (data.ok)
                location.reload();
        };
        request.send(null);
    };
    for (var i = 0; i < options.length; i++) {
        // вешаем обработчик события click на все элементы
        options[i].onclick = onclick;
    }
})();

Цитата:

Сообщение от wisma

с js у меня большие проблемы

К каждой строчки добавил комментарии. Спрашивай че не понятно.

Да, поменяй id на data-id, и в строчке с getAttribute соответственно тоже.

wisma

10.02.2014 07:17

Цитата:

Сообщение от danik.js (Сообщение 296833)

Сайт на джумле чтоли? Выкинь нафиг jQuery - глупо юзать библиотеку из 10000 строк ради пары функций..

К каждой строчки добавил комментарии. Спрашивай че не понятно.

Да, поменяй id на data-id, и в строчке с getAttribute соответственно тоже.

да, на жумле + вирт 1.1.9, реализировали давным давно выбор регионов с наценками, вот нужно переделать теперь в карту Украины (дивами сделаю..)
---
Сейчас попробую и отпишусь!) Спасибо!)

wisma

10.02.2014 07:28

danik.js, Спасибо!) Все отлично работает(правда я не менял на data-id, это обязательно?), теперь остается только оформить карту как нужно.

Еще маленький вопросик, раньше перевыбор осуществлялся по такому принцыпу

<div class="logo4"><a style="color: #C5C5C4;text-decoration: none !important;" href="javascript:reselects();return false;" onclick="reselects();return false;">Выберите ваш регион:</a><br>Украина:<br> <?=@$rlsloc?> 
  </div>

Как сейчас снова вызвать это окошко чтобы перевыбрать регион? можно даже кнопкой [изменить], меня интересует просто сайт js код...

---
Беда :( теперь все ссылки (по всему сайту) реагируют так-же, нужно чтобы именно в этом блоке, заранее спасибо!

P.S. Ссылка на тестовый поддомен на основном домене стоит старая версия без ваших поправок :)

danik.js

10.02.2014 07:56

Цитата:

Сообщение от wisma

Ссылка на тестовый поддомен

Трындец нафиг!!!! Три!!! Три штуки jQuery на одной странице!:cray:
Ужасть!!! Там вобще капут че творится. Мой совет - найми нормального спеца, пусть приводит все в порядок.

danik.js

10.02.2014 07:58

Цитата:

Сообщение от wisma

теперь все ссылки (по всему сайту) реагируют так-же,

Используй более специфический селектор в querySelectorAll, чтобы выборка шла только из нужных ссылок, а не всех подряд.
И в конце обработчика onclick нужно добавить return false, чтобы отменить действие по умолчанию (переход по ссылке #)

wisma

10.02.2014 08:11

danik.js, заменил ссылки на

<a class="reg" data-id="0"

Поставил:

// коллекция элементов-регионов
    var options = document.querySelectorAll('a.reg');

options[i].onclick = return false;

перестало выбиратся, что я опять сделал не так?:(

danik.js

10.02.2014 08:19

Цитата:

Сообщение от wisma

data-id

Там где getAttribute тоже изменил на data-id?

Цитата:

Сообщение от wisma

options[i].onclick = return false;

Хех, видимо ты и вправду с js не дружишь.

Я же в комментариях подписал функцию-обработчик.
Вот в конце функции (сразу после request.send() ) и нужно написать return false. То есть функция onclick будет возвращать false, что браузер расценит как необходимость отмены действия по умолчанию (перехода по ссылке)

wisma

10.02.2014 08:24

danik.js, получилось!) Спасибо огромное!)

danik.js

10.02.2014 08:26

Цитата:

Сообщение от danik.js

Три!!! Три штуки jQuery на одной странице!
Ужасть!!! Там вобще капут че творится.

Это как-нибудь прокомментируешь? Сайт ведь реально долго открывается.. Да и шанс чему-нибудь отвалиться увеличиватся.

wisma

10.02.2014 08:33

Цитата:

Сообщение от danik.js (Сообщение 296845)

Сейчас хочу прикрутить к этому всему что мы обсуждали (по регионам) карту , пока не выходит, но стараюсь...

а как закончу сразу почищу повторяющиися строчки. И почищу разные версии jqery

danik.js

10.02.2014 10:11

wisma, зависит от того, как это должно будет выглядеть внешне. Короче покажи HTML свой. Тогда смогу подсказать по JS.

wisma

10.02.2014 12:03

danik.js,
на поддомене уже привязал, в шапке есть ссылка

Выберите ваш регион:

он делает все что я хочу, но вот проблема, раньше при заходе на сайт сразу выскакивало окошко и запоминало выбор, а потом можно было изменить когда угодно регион, теперь-же окошко не выскакивает впервый раз, вот тут не знаю как решить даже(

danik.js

10.02.2014 12:31

Цитата:

Сообщение от wisma

вот тут не знаю как решить даже

Вынеси код из onclick в отдельную функцию, скажем showRegionPopup()
Теперь просто: вставь вызов этой функции где-нибудь, где нужные элементы уже доступны (перед </body> однозначно все доступно)

wisma

10.02.2014 12:40

danik.js,
Вынес но не понял что сделать с onclick нужно, попробывал

<script type="text/javascript">
  // оборачиваем код в функцию, дабы не засерать глобальную область переменными
(function(){
    // коллекция элементов-регионов
    var options = document.querySelectorAll('a.reg');
    // обработчик события click
    var onclick = function() {
        // обработчик вызывается в контексте элемента, на котором он зарегистрирован, то есть this указывает на сам элемент
        var id = this.getAttribute('data-id');
        // создаем объект для ajax-запроса
        var request = new XMLHttpRequest();
        // настраиваем на GET-запрос
        request.open('GET', '/pop.php?loc=' + id);
        // навешиваем обработчик "смены состояний". тут бы лучше подошел обработчик onload, но у него проблемы с кроссбраузерностью
        request.onreadystatechange = function() {
            // ожидаем завершения запроса
            // 4 - это значение константы request.DONE, означающей, что запрос завершен. опять же, в IE8 константы этой нет, так что пишем тупо четверку
            if (this.readyState != 4)
                return;
            // сервак должен ответить 200 OK, иначе считаем за ошибку
            if (this.status !== 200)
                return alert('Ошибка при запросе!');
            // парсим JSON-ответ. Может бросить исключение при невалидном значении.
            var data = JSON.parse(this.responseText);
            // если ок, то перезагружаем страницу
            if (data.ok)
                location.reload();
        };
        request.send(null); return false
    };
    for (var i = 0; i < options.length; i++) {
        // вешаем обработчик события click на все элементы
       options[i].onclick = onclick;
    }
})();

</script>

попереименовывать function() - результата не дало

<upd> Пока вернул обратно перенос, не работал скрипт...

danik.js

10.02.2014 13:05

Я вобще-то говорил про этот онклик:

<p style="color: #C5C5C4;text-decoration: none !important;">Вы выбрали: <a href="#" onclick="toggle(hidden_content);document.getElementById('parent_popup').style.display='block';">изменить</a></p>

wisma

10.02.2014 13:31

Вложений: 1

danik.js, не выходит, может я делаю все не так( голова не варит , но я заметил один код и наверное он отвечает за вывод формы если ничего не выбранно?

<div class="reselect">
  <?php if(isset($_COOKIE['proc'])&&isset($_COOKIE['lproc'])){ ?>
    <?php if(@$_COOKIE['lproc']!=0){
      switch(@$_COOKIE['lproc']){
        case 1 : $rlsloc="Украина:<br>Черкасская область"; break;
        case 2 : $rlsloc="Украина:<br>Черниговская область"; break;
        case 3 : $rlsloc="Украина:<br>Черновецкая область"; break;
        case 4 : $rlsloc="Украина:<br>Днепропетровская область"; break;
        case 5 : $rlsloc="Украина:<br>Донецкая область"; break;
        case 6 : $rlsloc="Украина:<br>Ивано-Франковская область"; break;
        case 7 : $rlsloc="Украина:<br>Харьковская область"; break;
        case 8 : $rlsloc="Украина:<br>Херсонская область"; break;
        case 9 : $rlsloc="Украина:<br>Хмельницкая область"; break;
        case 10 : $rlsloc="Украина:<br>Кировская область"; break;
        case 11 : $rlsloc="Украина:<br>Крым"; break;
        case 12 : $rlsloc="Украина:<br>Киев"; break;
        case 13 : $rlsloc="Украина:<br>Киевская область"; break;
        case 14 : $rlsloc="Украина:<br>Луганская область"; break;
        case 15 : $rlsloc="Украина:<br>Львовская область"; break;
        case 16 : $rlsloc="Украина:<br>Николаевская область"; break;
        case 17 : $rlsloc="Украина:<br>Одесская область"; break;
        case 18 : $rlsloc="Украина:<br>Полтавская область"; break;
        case 19 : $rlsloc="Украина:<br>Ровненская область"; break;
        case 20 : $rlsloc="Украина:<br>Севастополь"; break;
        case 21 : $rlsloc="Украина:<br>Сумская область"; break;
        case 22 : $rlsloc="Украина:<br>Тернопольская область"; break;
        case 23 : $rlsloc="Украина:<br>Винницкая область"; break;
        case 24 : $rlsloc="Украина:<br>Волынская область"; break;
        case 25 : $rlsloc="Украина:<br>Закарпатская область"; break;
        case 26 : $rlsloc="Украина:<br>Запорожская область"; break;
        case 27 : $rlsloc="Украина:<br>Житомирская область"; break;
        case 101 : $rlsloc="Россия:<br>Пиздатая область"; break;
      }
    ?>
     
    <?php }else{ ?>
     <a href="javascript:reselects();return false;" onclick="toggle(hidden_content);return false;">Выберите регион</a>

Сам же показ текста выбраного региона происходит:

<a style="color: #C5C5C4;text-decoration: none !important;" href="javascript:reselects();return false;" onclick="reselects();return false;">Выберите ваш регион:</a><br>Украина:<br> <?=@$rlsloc?>

При попытке заменить

<a href="javascript:reselects();return false;" onclick="toggle(hidden_content);return false;">Выберите регион</a>

на

<a href="javascript:(hidden_content);return false;" onclick="toggle(hidden_content);document.getElementById('parent_popup').style.display='block';">Выберите регион</a>

результата не дает :(. Меняб тыкнуть больно и полегче написать что сделать то...

P.S. Навсякий приложил вайлик шаблона (еще не почищеный от множества скриптов..но css по чучуть начал переносить в отдельный файлик)

danik.js

10.02.2014 13:44

Цитата:

Сообщение от wisma

Навсякий приложил вайлик шаблона

Нет, спасибо, туда не полезу, так как нет интереса :)

Я не знаю где у тебя это генерится, но вот что я вижу (http://123321.constanta.ua/):

wisma

10.02.2014 13:48

danik.js, верно, это влияет на переизменение региона, а этот код

<?php if(isset($_COOKIE['proc'])&&isset($_COOKIE['lproc'])){ ?>
 <br>
<div class="reselect">
  <?php if(isset($_COOKIE['proc'])&&isset($_COOKIE['lproc'])){ ?>
    <?php if(@$_COOKIE['lproc']!=0){
      switch(@$_COOKIE['lproc']){
        case 1 : $rlsloc="Черкасская область"; break;
        case 2 : $rlsloc="Черниговская область"; break;
        case 3 : $rlsloc="Черновецкая область"; break;
        case 4 : $rlsloc="Днепропетровская область"; break;
        case 5 : $rlsloc="Донецкая область"; break;
        case 6 : $rlsloc="Ивано-Франковская область"; break;
        case 7 : $rlsloc="Харьковская область"; break;
        case 8 : $rlsloc="Херсонская область"; break;
        case 9 : $rlsloc="Хмельницкая область"; break;
        case 10 : $rlsloc="Кировская область"; break;
        case 11 : $rlsloc="Крым"; break;
        case 12 : $rlsloc="Киев"; break;
        case 13 : $rlsloc="Киевская область"; break;
        case 14 : $rlsloc="Луганская область"; break;
        case 15 : $rlsloc="Львовская область"; break;
        case 16 : $rlsloc="Николаевская область"; break;
        case 17 : $rlsloc="Одесская область"; break;
        case 18 : $rlsloc="Полтавская область"; break;
        case 19 : $rlsloc="Ровненская область"; break;
        case 20 : $rlsloc="Севастополь"; break;
        case 21 : $rlsloc="Сумская область"; break;
        case 22 : $rlsloc="Тернопольская область"; break;
        case 23 : $rlsloc="Винницкая область"; break;
        case 24 : $rlsloc="Волынская область"; break;
        case 25 : $rlsloc="Закарпатская область"; break;
        case 26 : $rlsloc="Запорожская область"; break;
        case 27 : $rlsloc="Житомирская область"; break;
      }
    ?>
     
    <?php }else{ ?>
      <a href="javascript:reselects();return false;" onclick="reselects();return false;">Выберите регион</a>
    <?php } ?>
  <?php } ?>

влияет на вывод текста и выбор в случае изначальной пустоты (не выбраного ниодного региона), вот не могу понять как оформить условие

<a href="javascript:reselects();return false;" onclick="reselects();return false;">Выберите регион</a>

чтобы сразу выводилась формочка которую ты написал.

wisma

10.02.2014 14:06

нет, вроде там но не там копаю( Как сделать автоматический вывод скрипта если ничего не выбрано изначально?

danik.js

10.02.2014 14:09

Цитата:

Сообщение от wisma

case 1 : $rlsloc="Черкасская область"; break;

кажется кто-то недогадывается про существование массивов :))
Вобще, как я уже намекал - хороший вебмастер тут найдет массу работы для себя)

danik.js

10.02.2014 14:13

Цитата:

Сообщение от wisma

Как сделать автоматический вывод скрипта если ничего не выбрано изначально

Примерно так:

if (!regionSelected) {
    showRegionPopup();
}

Код должен быть в конце <body>, regionSelected переменная должна быть установлена через php код (у тебя ведь в шаблоне заложена нужная логика), showRegionPopup функция должна отображать модальное окно выбора. Как-то так. Более конкретно врядли подскажу, ибо это ковыряние в коде, а это скучно.

wisma

10.02.2014 15:36

Цитата:

Сообщение от danik.js (Сообщение 296922)

Примерно так:

if (!regionSelected) {
    showRegionPopup();
}

вот сижу..сижу...и не могу понять одного, зачем мне дублировать вывод карты? Есть 1 большой блок кода который отвечает за вид вывода карты, при нажимании на

<a style="color: #C5C5C4;text-decoration: none !important;" href="#" onclick="toggle(hidden_content);document.getElementById('parent_popup').style.display='block';" >Выберите ваш регион:</a>

открывается этот самый блок и все умно сохраняется, но когда ставишь тоже самое в

<?php }else{ ?>
      <a href="javascript:reselects();return false;" onclick="reselects();return false;">Выберите регион</a>

ничего не происходит, я имею ввиду код который показует hidden_content, это пол беды...

Когда я убираю в блоке

<div id="hidden_content" style="display: none;">
<div class="popupregion" <?php if((isset($_COOKIE['proc'])&&isset($_COOKIE['lproc']))){ ?> <?php } ?>>

строку

<div id="hidden_content" style="display: none;">

форма выводится, но после выбора не скрывается, я в js вообще полный ноль (

Часовой пояс GMT +3, время: 07:35.