0

This is puzzling me for the past hours already. Hopefully anybody has the clearing answer and in any case, thank for any support. In need to filter between three values in a data-attribute, which are set in jQuery. These values are changed and put in the attribute, depending on screenwidth. The jQuery part works fine. Now the tricky part is that in the PHP file the right value of the data-width attribute should be used and put as a value for a custom field. This value triggers the right images in a backgroundslider.

I tried the if/else statement in which the attribute value had a variable, which could give the right value for the custumfield, when its value would be equal as the one mad in jQuery. This failed. My knowledge is limited and therefore my files looked like this.

jQuery:

function schermFilter() {
    var scherm = $(window).width();

    if (scherm >= 320 && scherm <= 480) {
        $('#homeslider-wrapper').attr('data-width','slides_mobiel')
          console.log(scherm + ": mobiel");
    } else if (scherm >= 768 && scherm <= 992) {
        $('#homeslider-wrapper').attr('data-width','slides_tablet')
          console.log(scherm + ": tablet");
      }    else {
        $('#homeslider-wrapper').attr('data-width','slides_groot')
          console.log(scherm + ": groot");
    }
};

schermFilter();

$(document).ready(function() {
    schermFilter();
});

PHP:

<?php $screenwidth =""; ?>
        <?php $args = array(
            'post_type' => 'homeslides',
            'order'        => 'date'
            );

            $slider = new WP_QUERY($args);
            if($slider->have_posts()) : ?>

        <div id="homeslider-wrapper" class="slides" data-width="$screenwidth">

                <?php while ($slider->have_posts()) : $slider->the_post(); ?>

                <?php if ($screenwidth === "slides_mobiel") {
                        $image = get_field('slides_mobiel');
                        echo $screenwidth;
                    } elseif ($screenwidth === "slides_tablet") {
                        $image = get_field('slides_tablet');
                        echo $screenwidth;
                    } else if ($screenwidth === "") {
                        $image = get_field('slides_groot');
                        echo $screenwidth;
                    } else {
                        $image = get_field('slides_groot');
                        echo "groot - else";
                    }
                ?>
                <?php $imageList .= '"'. $image['url'] . '",'; ?>
                <?php endwhile; ?>
        </div>
        <?php endif;wp_reset_postdata(); ?>
        <?php $imageList = rtrim($imageList, ','); ?>

I tried isset and property-exists, but without success. Thanks!

Dylan Wheeler
  • 6,928
  • 14
  • 56
  • 80
Mike Branch
  • 1
  • 4
  • 4
    It sounds like you're expecting PHP to run after your javascript which is not the case. According to your code, in PHP `$screenwidth` is always an empty string. PHP runs on the server, your JS runs on the client, these are not interchangeable (for the sake of your question anyway). If you need PHP to know something JS has, you need to use AJAX to pass the data over to the server. – Jonnix Dec 21 '15 at 11:15
  • Good one! Didn't think of that. Will do so and post the working result when found. Thanks! – Mike Branch Dec 21 '15 at 12:06
  • Well, I found a solution but this one didn't need AJAX. For anyone, facing a similar situation, I'd love to share this, but wouldn't that be off topic? – Mike Branch Dec 29 '15 at 10:07

0 Answers0