CODEWITHSUNDEEP
javascriptjquery
Berstos
Berstos

Reputation: 179

Set jQuery slider values and send them with AJAX

I´m using the jQuery slider plugin and trying to achieve the following:

1. I want to set different slider max values depending on which li data-value element the user has clicked.

For example if you click on the <li data-value="582"> attribute the max value of the slider should be 39. The 39 should get send as the variable stufe to the server sided script.

2. The default loaded slider value should always be the max value of the current clicked li data-value element.

For example if you click on the <li data-value="0"> attribute the default loaded slider value should be 34. The 34 should get send as the variable stufe to the server sided script.

I´ve made a JS Fiddle for better understanding, but I´ve the following problems:

This is my try:

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

$("#amount").val($("#slider-vertical").slider("value"));
getResponse(0);

let $li = $('ul#menu li').on('click', function () {
    // set a class on the clicked element to be able to read its properties later
    $li.removeClass('active');
    $(this).addClass('active');
    getResponse();
});

function getResponse() {
    let bonus = parseInt($('ul#menu li.active').attr('data-value'));
    let stufe = $("#slider-vertical").slider("value");

console.log(bonus);

  if(isNaN(bonus)) {
      $("#slider-vertical").slider("option", "max", 29);
      $("#slider-vertical").slider("value", 29);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
            }
  else if (bonus === 0) {
      $("#slider-vertical").slider("option", "max", 34);
      $("#slider-vertical").slider("value", 34);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
            }
  else if (bonus === 582) {
      $("#slider-vertical").slider("option", "max", 39);
      $("#slider-vertical").slider("value", 39);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
            }

    ajaxManager.add({
        type: "GET",
        cache: "true",
        url: "itemscript.php",
        data: {
            "bonus": bonus,
            "stufe": stufe
        },
        success: function (data) {

        }
    });
}
});

Upvotes: 0

Views: 319

Answers (3)

ikiK
ikiK

Reputation: 6532

I believe got the result you wanted, see notes inside code.

 jQuery(function($) {

  var ajaxManager = $.manageAjax.create('cacheQueue', {
    queue: 'clear',
    cacheResponse: true,
    preventDoubleRequests: true,
    abortOld: true
  });

  // Slider Script

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

  $("#amount").val($("#slider-vertical").slider("value"));
  

  myFunction() // slider settings on load

function myFunction(newVal){
    let boo

    if (typeof newVal != 'undefined') { // this is how you properly cheack for undefined
      boo = newVal;
    }else{
     boo = (function () { return; })(); // this is how you make it undefined
    }
    if (typeof boo == 'undefined') {
      $("#slider-vertical").slider("option", "max", 29);
      $("#slider-vertical").slider("value", 29);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
    } else if (boo == 0) {
      $("#slider-vertical").slider("option", "max", 34);
      $("#slider-vertical").slider("value", 34);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
    } else if (boo == 582) {
      $("#slider-vertical").slider("option", "max", 39);
      $("#slider-vertical").slider("value", 39);
      $("#amount2").val($("#slider-vertical").slider('option', 'max'));
      $("#amount").val($("#slider-vertical").slider('value'));
    }
    
    getResponse();  // now call it here so you fetch new initial settings on click and on load
}



  let $li = $('ul#menu li').on('click', function() {
    // set a class on the clicked element to be able to read its properties later
    $li.removeClass('active');
    $(this).addClass('active');

    let newVal = $(this).attr('data-value'); // get value of cliked element
    myFunction(newVal) // slider settings on click
  });

  function getResponse() {
    let stufe = $("#slider-vertical").slider("value");
    let bonus = $('ul#menu li.active').attr('data-value')
    
    
    console.log(bonus)
    console.log(stufe)

    ajaxManager.add({
      type: "GET",
      cache: "true",
      url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
      data: {
        "bonus": bonus,
        "stufe": stufe
      },
      success: function(data) {

      }
    });
  }
});

Edit:

Fixed it, this whole way of you trying to change and reset slider inside getResponse() was causing a lot of trouble of jquery.Every time that function was called it did something to slider.

So move that settings to new function that will be called just 2 times, on load, and on click. And inside getResponse() you just grab values and send them.

https://jsfiddle.net/ikiK_Cro/bzy8v60n/75/

Upvotes: 2

Ravikumar
Ravikumar

Reputation: 2205

You are reading slider value first then updating it's value later conditionally thus it's picking previously selected value. you have to do it in other way.

You can run below snippet and see the netwotk.

jQuery(function($) {

  var ajaxManager = $.manageAjax.create('cacheQueue', {
    queue: 'clear',
    cacheResponse: true,
    preventDoubleRequests: true,
    abortOld: true
  });

  // Slider Script

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

  getResponse(0);

  let $li = $('ul#menu li').on('click', function() {
    // set a class on the clicked element to be able to read its properties later
    $li.removeClass('active');
    $(this).addClass('active');
    getResponse(parseInt($('ul#menu li.active').attr('data-value')));
  });

  function getResponse(bonus) {
    console.log(bonus);

    let stufe;
    if (isNaN(bonus)) {
      stufe = 29;
    } else if (bonus === 0) {
      stufe = 34;
    } else if (bonus === 582) {
      stufe = 39;
    }

    $("#slider-vertical").slider("option", "max", stufe);
    $("#slider-vertical").slider("value", stufe);
    $("#amount2").val(stufe);
    $("#amount").val(stufe);

    ajaxManager.add({
      type: "GET",
      cache: "true",
      url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
      data: {
        "bonus": bonus,
        "stufe": stufe
      },
      success: function(data) {

      }
    });
  }
});
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
  width: 100%;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header {
  border: 1px solid #444 !important;
  background: none !important;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
  background-color: #353232;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
  background-color: #817373!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://elder-scrolls-online.eu/datenbank/ajmanager/ajaxmanager.js"></script>
<p>
  <label class="item-slider" for="amount">Stufe:</label>
  <input class="item-slider" readonly id="amount">/
  <input class="item-slider" readonly id="amount2">
</p>

<div id="slider-vertical" style="height:10px;"></div>

<ul id="menu" role="menu">
  <li data-value="0">Version 0</li>
  <li data-value="582" class="ui-menu-item">Version 1</li>
</ul>

Upvotes: 0

biberman
biberman

Reputation: 5777

There is an issue in your code:

  • in your if chain in getResponse() you compare bonus strikt to a number (0 or 582) with === which would always be false because the value from the data-attr is a string, so you have to parse it to a number before that comparison.

Therefor it should be:

let bonus = parseInt($('ul#menu li.active').attr('data-value'));

Try it in my jsfiddle because i didn't get it to work in a stack snippet.

Upvotes: 0

Related Questions