Loading PHP function using jQuery onclick-CodePudding

I am trying to hide our mailing address on our website, until someone cliks a button to "load" the address. I am doing it like follows:

Homepage.php:

<button onclick="test()"> Click </button>
<div> </div>
<script>
function test(){
    $.ajax({url:"address.php", success:function(result){
    $("div").text(result);}
})
} 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Address.php:

<?php
function php_func(){
    echo '<span><?php echo $address; ?></span>';
}
php_func();
?>

This works in echoing the text onto homepage.php, but it's not loading the PHP function. Just showing the function as text as seen here:

I tried $("div").write(result);} and it won't even load.

$address is already defined elsewhere. Any tips?

CodePudding user response：

You're trying to write code which outputs code which outputs the address. Why? You're already in the context of outputting something from the PHP code:

echo "something...";

If what you want to output is the value of $address then just output that:

echo "<span>$address</span>";

I suspect the reason you did it that way is because you're expecting the currently loaded page to parse and execute that PHP code. This is a fundamental misunderstanding of how these technologies work. The PHP code for that page executed once, on the server, and delivered the resulting HTML/CSS/JavaScript to the client.

The AJAX operation is making a new, separate request to another PHP resource which will execute on the server and output back to the client. In this case it's just outputting a string value, which the client-side JavaScript code will then write to an element on the page:

$("div").text(result);

(This is a good opportunity for you to use your browser's debugging tools and observe the AJAX request/result in the network tab, to see what's actually being sent/received. At no point should actual PHP code be visible to the browser. All of that is executed on the server.)

The reason this is important is because, if this is the case, then you are likely misunderstanding where $address is defined. If it's defined in the PHP script which rendered the page you're looking at, that doesn't mean it's defined in address.php. If the code you're showing us for address.php is the entirety of that page then $address is not defined.

So you'll need to define $address on that page.

After having said all of that... You might find it much easier not to involve AJAX for this at all in the first place. Just output the address to the page but style the <span> to not be visible. Then when the user clicks the button, make it visible. No need for the complexity of an entirely new HTTP request:

$('button').click(function () {
  $('span').show();
});

span {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<span>this is the address</span>

CodePudding user response：

You don't use <?php echo inside strings; that's only used when you're in a section of the script that's outputting literal text, not executing PHP code.

If you're in PHP code doing echo, you use variable substitution or concatenation.

<?php
function php_func(){
    echo "<span>$address</span>";
}
php_func();
?>

You'll need additional code to set the $address variable; I assume you just left that out for simplification in the question.

CodePudding user response：

<?php
function php_func(){
    echo '<span>' . $address .'</span>';
}
php_func();
?>

this should work, u can't use 'echo' and inside echo open 'php' tag to use again.... more another 'echo'