Running javascript only if php condition is met

Question

How do you run javascript if only a php condition is met? I am trying to show a pop-up only if $page_count is <= 1. The php is fine and runs correctly as I have tested it with simple echos, it is only when I try to negate the javascript from running if the $page_count is over 2 that this still runs.

Is there a common method to go about this?

if ($page_count <= 1) {
    $setup_popup =
    '<div id="status-popup">
        <div id="status-popup-container" class="total-center">
            <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
        </div>
    </div>'
    ;
}
else {
    $setup_popup = NULL;
}

Javascript

$('#status-popup').fadeIn(350);

$('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('#status-popup').fadeOut(350);
    $('body').css('overflow', 'auto');
     e.preventDefault();
});

Why not just pass the counter as a variable and let the JS decide? — ssube
– ssube, Commented Dec 1, 2016 at 18:36
Sorry everyone, I used the wrong php variable. Your solutions did help me, so I am sorry for the inconvenience. — Paul
– Paul, Commented Dec 1, 2016 at 18:53

raphael75 · Accepted Answer · 2016-12-01 18:38:05Z

1

As the commenters suggested, something as simple as:

if(document.getElementById('status-popup')){
    $('#status-popup').fadeIn(350);

    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('#status-popup').fadeOut(350);
        $('body').css('overflow', 'auto');
         e.preventDefault();
    });
}

should do it.

You could also enclose the javascript inside a PHP if statement if necessary:

<?php
if ($page_count <= 1) {
?>
        $('#status-popup').fadeIn(350);

        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('#status-popup').fadeOut(350);
            $('body').css('overflow', 'auto');
             e.preventDefault();
        });
<?php
}
?>

answered Dec 1, 2016 at 18:38

raphael75

3,2686 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Over a year ago

The first solution did not help. I will try the second.

ssube · Accepted Answer · 2016-12-01 18:42:05Z

1

I would always add the modal elements, but include the counter and let JS do the logic:

<script type="application/javascript">
var pageCounter = <?php $page_count ?>;
if (pageCounter) {
  $('#status-popup').fadeIn(350);

  $('[data-popup-close]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('#status-popup').fadeOut(350);
    $('body').css('overflow', 'auto');
     e.preventDefault();
  });
}
</script>
<div id="status-popup">
  <div id="status-popup-container" class="total-center">
    <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
  </div>
</div>

No magic, little complexity, and you can change or test the value from the client as well as from the server (which allows little things like unit testing, AJAX, etc).

answered Dec 1, 2016 at 18:42

ssube

48.4k10 gold badges107 silver badges144 bronze badges

3 Comments

Paul Over a year ago

So would I just set the pageCounter condition to =< 1 if (pageCounter =< 1) { ?

ssube Over a year ago

You can change the if (pageCounter) to any condition you would like.

Paul Over a year ago

Wouldn't this solution always leave the static html present? I only want the html to be visible if the condition is met.

Kermito · Accepted Answer · 2016-12-01 18:45:01Z

1

PHP code is executed by server than it's result is transmited to the client so you could do :

if ($page_count <= 1) {
    $setup_popup = "";
    if ($page_count >=2 ) {
        $setup_popup .= "<script type="text/javascript">[put your js code here]</script>";
    }
    $setup_popup .= '<div id="status-popup">
        <div id="status-popup-container" class="total-center">
            <a class="popup-close" data-popup-close="popup-1" href="#">Close</a>
        </div>
    </div>';
}
else {
    $setup_popup = NULL;
}

answered Dec 1, 2016 at 18:45

Kermito

711 silver badge8 bronze badges

Comments

Wolverine · Accepted Answer · 2016-12-01 20:12:08Z

0

var page_count = <?= $page_count ?>;

if(page_count <= 1) {
    $('#status-popup').fadeIn(350);
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('#status-popup').fadeOut(350);
        $('body').css('overflow', 'auto');
         e.preventDefault();
    });
}

You don't need to use else condition since you're only going to show the popup when the page count is less than 2. Hope it works.

answered Dec 1, 2016 at 20:12

Wolverine

1,7001 gold badge15 silver badges18 bronze badges

Collectives™ on Stack Overflow

Running javascript only if php condition is met

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related