Question posted in
You can find the official documentation here.

Using AJAX to pass value from range slider to PHP on front-page of wordpress site – Jquery ajax

So I have a range slider in the footer of my whole site:

<input id="ex1" type="range" min="0" max="60" step="1" />

<div id='mydiv'>test</div>

And on slideStop I am redirecting to my homepage:

$(document).ready(function(){

$('#ex1').on('change', function () {

if (document.location.href.indexOf('category') > -1)
    { 
window.location.href = 'http://localhost/wordpress/'; 
 }

var id = $(this).val();

$.ajax({
type: "post",
dataType: "json",
url: "/wp-admin/admin-ajax.php", 
data: {
    action:'get_data', 
    id: id
},

success:function(data) {
$('#mydiv').html(data);
}

});
});

});

And I want to pass the value of my range slider into the php on my wordpress front-page. This is the code:

<?php

$query = new WP_Query( array( 'tag' => ' ***INSERT RANGE SLIDER VALUE HERE*** ' ) );

if ( $query->have_posts() ) :

while ( $query->have_posts() ) : $query->the_post();?>

    <?php the_content();?>

<?php endwhile; endif;?>

So if the range slider stops on 44, the home page would show all posts tagged ’44’.

I haven’t used AJAX before and struggling to understand where to get started.

Thanks !

Tags:

3

Answers


  1. 0

    This will output the current value of the slider after user interaction to a div.

    HTML

     <input id='ex1' type='range' min='0' max='60' step='1'>
 <div id='mydiv'></div>

    JS (jQuery 3.4.1)

     $("#ex1").change(function() {  
 var id = $('#ex1').val();
 $.ajax({
 url:"myserverfile.php",
 method:"POST",
 data:{id:id},
 dataType:"text",
 success:function(data) {
 $('#mydiv').html(data);
 }
 });
 });
    • I have tested this code.
    • I didn’t include any PHP here as all mine did is echo back the value of the slider through the POST index of [‘id’] but it proves communcation is working through AJAX.
    • Check my comment for how to handle things after home page redirect.
    Login or Signup to reply.
  2. 0

    The easy way would be to pass your var ass url parameter. On your front-page, just read this parameter and set is as parameter for your query. You just have to change some parts in your files.

    change your js at this part:

    window.location.href = "http://localhost/wordpress?slider=12";

    No magic here, just add any parameter to your url, in this example: 12.

    In your php-file:

    $slider   = $_GET['slider'];
$query    = new WP_Query( array( 'tag' => $slider ) );

    Just us a GET-Request for your url – parameter (in this example we use "slider" ).

    Any questions?

    Login or Signup to reply.
  3. 0

    Try with this code – 

    $(document).ready(function(){
  $("#ex1").change(function() {  
    var field = $(this).val();
    $.ajax({
      url:"ajax-action-file.php",
      method:"POST",
      data:{value:field},
      success:function(data) {
        $('#Response-Div').html(data);
      }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search