Отправить значение ползунка jQuery с помощью AJAX

0

Я отправляю две переменные jQuery (urlid а такжеbonus ) с AJAX в серверный скрипт. Это работает, как ожидалось.

Теперь я хочу добавить слайдер jQuery (#slider-vertical ) к сценарию. Фактическое выбранное значение ползунка должно быть отправлено с помощью AJAX. Я пробовал вот так, но значение ползунка не отправляется. Я не получаю сообщения об ошибке.

jQuery(function ($) {

    getResponse(0);
    $('ul#menu li').click(function () {
        var bonus = $(this).attr("value");
        getResponse(bonus);
    });

    function getResponse(bonus) {

        var urltosplit = window.location.href;
        var urlid = urltosplit.substring(urltosplit.lastIndexOf('/') + 1);

        $("#slider-vertical").slider({
            orientation: "horizontal",
            range: "min",
            min: 0,
            max: $('#amount2').val(),
            value: $('#amount2').val(),
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            },
        });

        $.ajax({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "var": urlid,
                "bonus": bonus,
                "itemlevel": $('#slider-vertical').slider("option", "value")
            },
            success: function (data) {
                $('.item-content').html('<div class="tooltipitem-site"><div class="ui-tooltip-site">' + data + '</div></div>');
            }
        });
    }
});

Это слайдер html:

  <input class="item-slider" readonly id="amount">/
  <input class="item-slider" readonly id="amount2" value="<?php echo $phpVar; ?>">
 
  <div id="slider-vertical" style="height:50px;"></div>
  • 0
    Обновите детали слайдера до вопроса
  • 0
    Я добавил слайдер html к вопросу.
  • 0
    Как устанавливается «значение» ползунка, который вы пытаетесь привязать к вызову ajax? Это активное значение ползунка? или на основе щелчка по элементу слайдера?
  • 0
    Это активное значение ползунка, поэтому вам не нужно щелкать, просто переместите ползунок, чтобы получить нужные значения.
Теги:
CodeFix

1 ответ

1
Лучший ответ

Попробуй изменить$('#slider-vertical').slider("option", "value")

по$("#slider-vertical").slider( "value" );

value()Returns: Number Get the value of the slider. This signature does not accept any arguments. Code examples: Invoke the method:

Ссылка на API jQuery UI

Только из дополнения к моему последнему комментарию, надеюсь, это поможет

  <script>
     
      $(function () {

        $("#slider-vertical").slider({
          orientation: "horizontal",
          range: "min",
          min: 0,
          max: $("#amount2").val(),
          value: $("#amount2").val(),
          slide: function (event, ui) {
            $("#amount").val(ui.value);
          },
        });

        $("#send").bind("click", function () {
          console.log($("#slider-vertical").slider("value"));
          let bonus = 100;
          getResponse(bonus);
        });
      });

      function getResponse(bonus) {
        var urltosplit = "test";
        var urlid = "test";

        $.ajax({
          type: "GET",
          cache: "true",
          url: "test.php",
          data: {
            var: urlid,
            bonus: bonus,
            itemlevel: $("#slider-vertical").slider("value"),
          },
          success: function (data) {
            $(".item-content").html(
              '<div class="tooltipitem-site"><div class="ui-tooltip-site">' +
                data +
                "</div></div>"
            );
          },
        });
      }
    </script>

Изображение результата

Поделиться
Источник
  • 0
    Спасибо, но значения по-прежнему не отправляются с помощью AJAX.
  • 0
    Возможно, это связано с тем, что вы визуализируете ползунок при каждом щелчке мыши и не завершаете рендеринг, когда вы отправляете ajax, попробуйте визуализировать ползунок только один раз, так как теперь у вас есть код, вы можете просто отправить $ ('# amount2 '). val (), то есть значение, которое вы устанавливаете для ползунка
  • 0
    отредактируйте мой ответ с помощью примера кода, надеюсь, это поможет

Другие вопросы

  • Функция клавиатуры работает только один раз для первой буквы ввода2 ответ

    У меня есть текстовый ввод, где пользователь вводит желаемое имя страницы<input type='text' id='pageName' name='PageName' class='form-control pageName'> Я пытаюсь использовать функцию keyup для запуска Ajax, чтобы проверить, существует ли страница, однако при вводе чего-то вродеindex Ajax от...

  • ajax дважды загружает данные из базы данных с помощью laravel php1 ответ

    привет, я пытаюсь загрузить данные из базы данных с помощью ajax. но данные загружаются дважды на страницу html.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $('button').click(function(){ $.ajax({ ...

  • отображать другие входы на основе значения другого входа с помощью laravel, ajax1 ответ

    Я новичок в laravel, и я пытаюсь создать форму и отправить ее в базу данных. Мне удалось сохранить данные в базе данных, используя следующий код. Мой клинок: <form id="castingform" method="post" action="castingss" enctype="multipart/form-data"> ...

  • Передача значения параметра от кнопки Datatables к функции1 ответ

    Я пытаюсь передать значение кнопки в таблице данных функции. Однако я просто получаю значение первой строки. Надеюсь, ты сможешь мне помочь. Мне просто нужно предупредить параметр, а обо всем остальном я позабочусь. вот код memberlist.php<?php header('Content-Type: application/json; Charset="...

  • Снимок WebRTC с веб-камеры и сохранение его на сервере в PHP: iPhone Safari вылетает при разрешении выше 20961 ответ

    У меня есть РАБОЧИЙ код, чтобы сделать снимок с веб-камеры и сохранить его на PHP через ajax ... но когда я пытаюсь использовать разрешение выше 2000, сафари-мобильный на iPhone вылетает, почему и как это исправить? здесь, если я сделаюgetUserMedia({ video:{width: { ideal: 2096 => все в порядке Н...

  • Оператор if в jQuery и HTML?2 ответ

    Я успешно запускаю следующий скрипт: он обновляет текст каждые 3 секунды.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(function() { window.setInterval(function() { loadNewText() }, 3000) function loadNewText...

  • Добавление ссылки на dll в Javascript1 ответ

    Может ли кто-нибудь предложить вариант добавления ссылки на DLL в Javascript. Я работаю над приложением javascript, в котором мы пытаемся получать события с сервера напрямую, без .Net / Java. Я пробовал использовать ActiveXObject, но он не поддерживается в текущих браузерах...

  • Можно ли динамически создать ссылку и щелкнуть по ней с помощью Selenium?1 ответ

    Скажем, есть веб-сайт, который динамически загружает данные с помощью вызовов Ajax. Данные занимают 200 страниц с примерно 50 строками на странице. Пагинация создается внизу, что похоже на<div class="pagination"> <a class="paginate" id="previous">Previou...

  • Как отображать данные SQL в HTML в виде таблицы с помощью AJAX JQuery?1 ответ

    У меня есть некоторые данные, хранящиеся в файле SQL, и я хочу отображать данные в HTML в виде таблицы с AJAX JQuery. Когда я их проверяю, данные получаются нормально, но я не понимаю, как я могу отображать данные в HTML. Для меня все является новой концепцией, и мне трудно найти правильный способ с...

  • анимация скольжения с анимацией fadeIn для перехода к следующей форме1 ответ

    Я пытаюсь создать анимацию для события нажатия кнопки, чтобы сдвинуть форму, затем вызвать следующую форму, она также сдвинется вверх и вызовет следующую форму, но моя форма исчезает после одной анимации слайда и не показывает никаких форм. script.js файл есть.jQuery(document).ready(function(){ //M...

CodeFix
Цитата дня

"Завидую тестировщикам: все хотят с ними дружить."

Эндрю Таненбаум