Ankündigung

Einklappen
Keine Ankündigung bisher.

zwei jquery slider verbunden- variablen via ajax an php

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • zwei jquery slider verbunden- variablen via ajax an php

    Hallo,

    ich habe ein jquery script mit zwei Slidern. Ich möchte die jeweils ausgewählten Variabeln in beiden Slidern per Ajax an meine php_file.php senden und dann in meiner html_file.php, innerhalb eines Links, ausgeben.

    html_file.php

    Code:
        <script>
        $( function() {
            $( "#slider-range-max" ).slider({
                range: "max",
                min: 1,
                max: 25,
                value: 1,
                slide: function(event, ui) {
                    $("#amount").val(ui.value);
                    /* Here we send the slider value towards PHP */
                    $.ajax({
                        method: "POST",
                        url: "php_file.php",
                        data: { sliderVal: ui.value }
                    })
                    /* Here we receive the data back */
                    .done(function(data) {
                        /* Here you can do whatever you want with the data */
                       $("#content").html(data);
                    });
                }
            });
            $( "#amount" ).val( $("#slider-range-max").slider("value") );
        });
        $( function() {
            $( "#slider-range-max2" ).slider({
                range: "max",
                min: 1,
                max: 4,
                value: 1,
                slide: function(event, ui) {
                    $("#amount2").val(ui.value);
                    /* Here we send the slider value towards PHP */
                    $.ajax({
                        method: "POST",
                        url: "php_file.php",
                        data: { sliderVal2: ui.value }
                    })
                    /* Here we receive the data back */
                    .done(function(data2) {
                        /* Here you can do whatever you want with the data */
    
                        $("#content").html(data2);
                    });
                }
            });
            $( "#amount2" ).val( $("#slider-range-max2").slider("value2") );
        });
    
    </script>
    
    
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    <div id="slider-range-max"></div>
    
        <input type="text" id="amount2" readonly style="border:0; color:#f6931f;   font-weight:bold;">
        <div id="slider-range-max2"></div>
        <div id='content'></div>
    Ich benötige nun die Values von beiden Slidern als php-Variablen. Diese müssen dynamisch in einen link eingesetzt werden. Der Link führt mich dann, je nach Variablen, zu einer Json-Datei, aus der ich Werte auslesen kann.

    php_file.php

    Code:
     <?php
    
    $str = $_POST['sliderVal'];
    $quality = $_POST['sliderVal2'];
    
    $str2 = file_get_contents('https://example.de/stats/258?level='. $str .'&qualityId='. $quality .'&locale=de_DE');
    
    $json = json_decode($str2, true); // decode the JSON into an associative array
    
    $n= $json['health'];
    
    echo '<div class="profile-font2">', $n, '</div>';
    ?>

    Sobald ich nun vom ersten Slider (level) den Wert ändere, sehen ich diesen, aber der Wert von Slider 2 (quality) verschwindet. Andersherum ist dies genau so. Was mache ich hier falsch? Ich möchte dass, wenn ich den Wert eines Sliders ändere, der Wert des zweiten Sliders nicht verschwindet.

    Screenshot 1

    screen1.jpg

    Screenshot 2

    screen2.jpg


  • #2
    Warum nimmst du dafür nicht intput type=range?
    https://css-tricks.com/styling-cross...ge-inputs-css/

    CSS gehört nicht als inline ins HTML.

    Kommentar


    • #3
      Wenn ich den slider über css mache benötige ich doch für die Anzeige der aktuellen Variable wieder javascript und muss diese dann auch über ajax versenden. Wo habe ich hier dann einen Vorteil? Mit dem inline hast natürlich Recht.
      Mir geht es vorallem darum wie ich die zwei Variablen der Slider in meinen Link bekomme, so dass die eine nicht verschwindet wenn ich den zweiten Slider bewege.

      Kommentar


      • #4
        Erstens nutzt man die HTML Elemente die einem zur Verfügung stehen und baut diese nicht nach und zweitens kannst einfach mit Javascript die Änderung des Input-Sliders mit einem evntlistener abfragen auf input und dann die URL zusammenbauen und ausgeben.

        Da brauchst du kein Jquery für und auch kein AJAX, Einige Kenntnisse in HTML, CSS und Javascript vorausgesetzt, lassen sich da schöne Slider entwickeln.

        Kommentar


        • #5
          Ich benötige trotzdem die Variablen in php, Da ich ja nicht nur einen Link ausgeben möchte. Dies war nur ein Beispiel. Dementsprechend bringt es mir nicht viel wenn ich mir den Link in javascript zusammenbaue. Das Ganze muss ich in php weiterverwenden können. Oder versteh ich hier was falsch?

          Kommentar


          • #6
            Dann darbst du aber nicht mit Pseudobeispielen daher kommen, sondern schon mitteilen was dein wirkliches Anliegen dahinter ist.

            Kommentar


            • #7
              Da hast natürlich Recht, wollte das ganze vereinfacht darstellen. Ich habe nun die Frage und den php-Code editiert.

              Ich benötige die aktuellen Values von beiden Slidern als php-Variablen (ohne page reload). Diese müssen dynamisch in einen link eingesetzt werden. Der Link führt mich dann, je nach Variablen, zu einer Json-Datei, aus der ich Werte auslesen kann. Hierzu benutze ich php "file_get_contents".

              Ich hoffe jetzt ist es klarer.

              Kommentar


              • #8
                Klarer ja, besser wird dein Konzept dadurch auch nicht.
                Warum nicht direkt die Daten mit Javascript oder Jquery abholen und dann im Client verarbeiten, warum der Zwischenschritt über deinen Server?

                Kommentar


                • #9

                  PHP-Code:
                  <!DOCTYPE HTML>
                  <
                  html lang="de">
                  <
                  head>
                  <
                  meta charset="utf-8" />
                  <
                  title>Untitled</title>
                  <
                  script
                    src
                  ="https://code.jquery.com/jquery-3.3.1.min.js"
                    
                  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    
                  crossorigin="anonymous">
                  </script>
                  <script
                    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
                    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
                    crossorigin="anonymous">
                  </script>
                  <script type="text/javascript">
                  <!--
                  $(function(){
                   $('#btn').click(function(){
                    $.ajax({
                     url: "__slider_werte_an_ajax_script.php",
                    method: "POST",
                    data: {r1 : $('#myRange1').val(), r2 : $('#myRange2').val()},
                     success: function(data){showLink(data);}
                    });
                   });
                   function showLink(data){
                    var _link = '<a href= ' + '"' + data + '"' + '>' + data + '</a>'
                    $('#output').html(_link);
                   }
                  });
                  // -->
                  </script>
                  </head>
                  <body>
                  <div id="sliders">
                  <input type="range" min="0" max="100" value="0" class="slider" id="myRange1">
                  <input type="range" min="0" max="100" value="0" class="slider" id="myRange2">
                  <button id="btn">Senden</button>
                  <p id="output"></p>
                  </div>
                  </body>
                  </html> 


                  PHP-Code:
                  <?php
                  $link 
                  'https://example.de/stats/258?level='.$_POST['r1'].'&qualityId='.$_POST['r2'].'&locale=de_DE';
                  echo 
                  $link;
                  ?>

                  Kommentar

                  Lädt...
                  X