-1

Ok so I have a PHP variable I called on top of my document which is <? $mark = 0 ?> now when you click on the classes of content-1 and so on I want to change the value of that PHP variable. How can I do that? I know that it has to be done in Javascript because I want to change it upon a "click" which can only be determined with javascript.

My Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <? $mark = 0; ?>
    <meta charset="UTF-8">
</head>
<body>

<div class="content-1">
<? if( $mark == 1 ){ ?>
<p>This is content One!</p>
<? } ?>
</div>

<div class="content-2">
<? if( $mark == 2 ){ ?>
<p>This is content Two!</p>
<? } ?>
</div>

<div class="content-3">
<? if( $mark == 3 ){ ?>
<p>This is content Three!</p>
<? } ?>
</div>


<script>
    $(document).ready(){
        $(".content-1").click(function(){
            //my attempt on changing the PHP variable $mark to 1
            document.write( "<? echo $mark = 1; ?>" );
        });
    }
</script>

</body>
</html>

My code above generated a white screen with the number 1 on the top left hand corner when I click on content-1

Help is greatly appreciated, thank you.

Improve this question
10
  • 1
    PHP executes before JS. JS can't interact with PHP unless there is an ajax request. Commented Jul 14, 2015 at 20:44
  • @chris85 Yes but then the content will still be generated in the mark up. I am trying to speed up the load time of my page by not loading content that is not being displayed until they are necessary. Commented Jul 14, 2015 at 20:46
  • Use ajax in that case. View the source of your page. You won't (shouldn't) see <? echo $mark = 1; ?>. Commented Jul 14, 2015 at 20:46
  • @chris85 hmm well i'm not to familiar with AJAX yet, any idea how I would solve this with that approach? Commented Jul 14, 2015 at 20:54
  • Here's a jquery doc on AJAX, learn.jquery.com/ajax. There also are a number of tutorials and threads on this topic. Commented Jul 14, 2015 at 20:58

1 Answer 1

Reset to default
0

PHP executes before JS.

The only way to achieve this would be by using some form of asynchronous loading.

Like AJAX.

Then you could use an on click event to trigger reposting.

This might also help

It's another stack answer basically achieving what you are after.

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

5 Comments

I see, I thought of another approach that may actually work with just javascript though. So instead of actually writing the mark up on the page have it assigned to some Javascript variables then append them onto a div based upon a click. So that way they are not being loaded until the click.
Not sure if it would work entirely or you might end up overpopulating content. You could also try using Post. but it will refresh the page
yeah I can't refresh, do you think the content will still be considered as "generated" if its just set in a javascript variable and not outputted?
Technically yes as they will get generated in your JS document but it's better than appearing on your html I suppose. You just want to check your DOM timings with that method though because you could end up causing render blocking or a large delay at the end of your page loading.
this question has been marked as a duplicate

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.