Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Подключение файла JQuery (https://javascript.ru/forum/jquery/77340-podklyuchenie-fajjla-jquery.html)

sloneCH 21.04.2019 09:42
Подключение файла JQuery
 
Добрый день,
Подскажите пожалуйста почему у меня работает здесь норм. http://jsfiddle.net/o3wxs2m6/1/.
Но когда делаю это в файле, то событие на кнопке не срабатывает.
Подключаю так
<script src="http://code.jquery.com/jquery-1.8.3.js">Код</script>


P.S. И еще как избавиться от кнопки, чтобы событие срабатывало после выбора и данные добавлялись в url?
Спасибо.

laimas 21.04.2019 09:51
Обработчик готовности дерева DOM

sloneCH 21.04.2019 16:40
Спасибо,
А с подключением файла у меня всё норм?
Не работает

laimas 21.04.2019 16:53
Дело не в подключении JQ, а в том, что код (установка обработчиков) выполняется тогда, когда страница не загружена и DOM не готов. Для этого и существует метод, о котором по ссылке. Второй проблемой может быть старая версия JQ, а в коде при меняются методы более свежих версий (я не помню, что у вас там написано, это как пример).

sloneCH 21.04.2019 17:11
Спасибо профессор. Теперь всё ясно

sloneCH 23.04.2019 11:54
Пожалуйста помогите с вопросом. Как установить обработчик на оба Select? Поставил на onchange, в url ничего не меняется. На кнопке обработка на ура.
Спасибо.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>


$(document).ready(InitPage);
    function InitPage(){
      $("p").text("Структура документа загружена и DOMik готов!");
    }



<p>Страница еще не готова</p>
<form id="testform" action="get.php" method="GET">
    <select name="sel1" onchange="alert(action);">
        <option value="">Выберите</option>
        <option value="1">Пиво</option>
        <option value="2">Спирт</option>
        <option value="3">Лимонад</option>
    </select>
    <select name="sel2" onchange="alert(action);">
        <option value="">Выберите</option>
        <option selected value="3">Колбаска</option>
        <option value="4">Мясо</option>
		<option value="5">Деньги</option>
    </select>  
</form>
<input id="show" type="button" value="Показать"/>


var inputs={};
$('form#testform select').each(function(){
    getQuery(this);
});
$('form#testform select').on('change',function(){
    getQuery(this);
});
$('#show').on('click',function(){
    var action=$('form#testform').attr('action');
    action+=$.param(inputs)?'?'+$.param(inputs):'';
    alert(action);
});
function getQuery(el){
    if($(el).val()!=''){
        inputs[$(el).attr('name')]=$(el).val();
    }else{
        delete inputs[$(el).attr('name')];
    }
}

Dilettante_Pro 23.04.2019 12:20 
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(InitPage);
function InitPage() {
   var inputs={};
   $('#testform select').each(function(){
      getQuery(this);
   });
   $('#testform select').on('change',function(){
      getQuery(this);
   });
   $('#show').on('click',function(){
      var action=$('#testform').attr('action');
      action+=$.param(inputs)?'?'+$.param(inputs):'';
      alert(action);
   });
   function getQuery(el){
       if($(el).val()!=''){
           inputs[$(el).attr('name')]=$(el).val();
       }else{
           delete inputs[$(el).attr('name')];
       }
   }
}
</script>
<form id="testform" action="get.php" method="GET">
    <select name="sel1" >
        <option value="">Выберите</option>
        <option value="1">Пиво</option>
        <option value="2">Спирт</option>
        <option value="3">Лимонад</option>
    </select>
    <select name="sel2" >
        <option value="">Выберите</option>
        <option selected value="3">Колбаска</option>
        <option value="4">Мясо</option>
		<option value="5">Деньги</option>
    </select>  
</form>
<input id="show" type="button" value="Показать"/>

sloneCH 23.04.2019 12:49
Спасибо большое за ответ.
Но с кнопкой у меня тоже работает.
Хотелось бы, чтобы кнопки не было и обработчик срабатывал при выборе двух select и адресная строка менялась и сохранялся выбор в зависимости от того, что выбираем.

laimas 23.04.2019 12:56
Зачем $('#testform select').each при наличии $('#testform select').on('change' ?

sloneCH 23.04.2019 13:38
Вроде же должно работать без кнопки, почему-то никакой реакции при выборе.
Help!!!!!! Please!!!!!!!

Dilettante_Pro 23.04.2019 13:40 
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(InitPage);
function InitPage() {
   var inputs={}, 
        actionResult = "",
        action = $('#testform').attr('action');

   $('#testform select').each(function(){
      getQuery(this);
   });
   $('#testform select').on('change',function(){
      getQuery(this);
      if(Object.keys(inputs).length == 2) result.innerText = action + actionResult;
   });
   function getQuery(el){
       if($(el).val()!=''){
           inputs[$(el).attr('name')]=$(el).val();
           actionResult =  $.param(inputs)?'?'+$.param(inputs):'';
        }else{
           delete inputs[$(el).attr('name')];
           actionResult = '';
           result.innerText = '';
       }
   }
}
</script>
<form id="testform" action="get.php" method="GET">
    <select name="sel1" >
        <option value="">Выберите</option>
        <option value="1">Пиво</option>
        <option value="2">Спирт</option>
        <option value="3">Лимонад</option>
    </select>
    <select name="sel2" >
        <option value="">Выберите</option>
        <option selected value="3">Колбаска</option>
        <option value="4">Мясо</option>
		<option value="5">Деньги</option>
    </select>  
</form>
<div id="result"></div>

Dilettante_Pro 23.04.2019 13:41
laimas,
Наверное, для начала

laimas 23.04.2019 13:42
Цитата:
Сообщение от sloneCH
Вроде же должно работать без кнопки
Для чего это все? Форма отправленная методом GET будет передана со всем выбором в ней без всякого JS. Если же это все для Ajax запроса, то в jQuery есть два метода .serialize() и .serializeArray(), то есть ваши обработчики совсем не нужны.

laimas 23.04.2019 13:43
Dilettante_Pro, да это какой-то бардак не понятно для чего. )

Dilettante_Pro 23.04.2019 13:48
laimas,
Я в примере вообще form хотел убрать - чтобы уменьшить бардак, но потом не стал...
А так просто писал про обработчики селектов. Показать возможности.

sloneCH 23.04.2019 14:17
Цитата:
Сообщение от laimas (Сообщение 506924)
Для чего это все?
Наверное не так объяснил. К примеру выбрал я с помощью селектов два значения (они добавились в URL) и эту ссылку отправил Вам. Вы открыли эту ссылку http://site.ru/get2.php?sel1=2&sel2=5 и увидели сохраненные значения, т.е. то, что я выбрал. Мне необходимо было по простому с помощью GET без AJAX и т.п. Ajax это потом.

laimas 23.04.2019 14:22
Цитата:
Сообщение от sloneCH
Мне необходимо было по простому с помощью GET без AJAX и т.п. Ajax это потом.
Ну так отправляйте форму естественным способом методом GET и в URL будут имена полей и их значения как параметры запроса. То есть то что вы делаете, это бесполезное занятие, которое и без вас выполнит браузер.

sloneCH 23.04.2019 14:32
Так я отправлял без JS, значения подставлялись в URL, но на странице выбор не сохранялся. Сбрасывает на первоначальное. К примеру - если у меня в селекте Черный(1), Белый(2), Красный(3). Я выбираю Красный, то строка добавляет value=3. Но на странице - остается Черный в селекте, а нужно, чтобы отображался в селекте Красный. И один чувак мне сказал - JS тебе в помощь.
Если я не туда иду, то направьте пожалуйста.

laimas 23.04.2019 14:39
Цитата:
Сообщение от sloneCH
но на странице выбор не сохранялся
Здрасьте, приехали. :) А причем тут сохранение? Если форма отправляется не асинхронным методом, то есть страница перегружается, то отметить в списках выбранное ни как не зависит от того как вы там формировали параметры запроса.
Для этого либо на сервере анализируете выбор и возвращая страницу клиенту отмечаете выбранными опции с пришедшими параметрами, либо на клиенте посредством JS анализируете URL текущий, получая параметры запроса и отмечая соответствующие опции.
А вот формирование запроса, как это вы делаете, это никчемное занятие.

sloneCH 23.04.2019 14:50
Спасибо за помощь. Много что узнал, хоть даже и это было никчемное занятие.

sloneCH 16.05.2019 09:15
Вот прошел месяц и с трудом всё таки получилось сделать благодаря помощи Dilettante_Pro и laimas - за что огромное спасибо.
Но изучение на этом не заканчивается и чтобы не создавать новую тему пишу здесь.
<select name="sel1" >
        <option value="">Выберите</option>
        <option value="1">Пиво</option>
        <option value="2">Спирт</option>
        <option value="3">Лимонад</option>
    </select>

    <select name="sel2" >
        <option value="">Выберите</option>
        <option value="3">Колбаска</option>
        <option value="4">Мясо</option>
        <option value="5">Деньги</option>
    </select>

Строка будет такой http://site.ru/get2.php?sel1=2&sel2=5
Все данные будут хранится в базе MySQL. Подскажите пожалуйста если таблица будет выглядеть так, это норм? Что-то моё внутреннее чувство подсказывает, что не так. Спасибо.

id_sel1 / sel1 / id_sel2 / sel2
1 / Пиво / 3 / Колбаска
2 / Спирт /4 /Мясо
3 / Лимонад / 5 / Деньги

laimas 16.05.2019 11:23
Цитата:
Сообщение от sloneCH
если таблица будет выглядеть так, это норм?
Нет, не норм. Описание каждого списка, это отдельные таблицы.


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