The innerHTML attribute of a div on my webpage is updated asynchronously (XMLHttpRequest) by getting PHP from the server: but it doesn't seem to call javascript.
This works absolutely fine:
<div id="mydiv"><script>alert('hello');</script></div>
And this works absolutely fine (updating inner HTML of that same div):
echo "<p>Hello</p>";
But this does not work:
echo "<script>alert('hello');</script>";
And I have no idea why! I have tried this in multiple documents, and my searching online seems to suggest it should work.
This is only a problem that occurs when the content is asynchronous. The following works perfectly:
<html>
<body>
<?php
echo "<script>alert('hello');</script>";
?>
</body>
</html>
I can easily design around this, but is it impossible to execute javascript code in this way? As far as I can see, this page suggests work-arounds but doesn't say explicitly that it's impossible: executing javascript in PHP through echo, via ajax.
Thank you!
What you are doing is echoing the script tags into the body of the html, but nothing is asking them the javascript to run. Either way, this is the wrong way to go about this.
You should just execute whatever javascript you want from the success function of your ajax request.
Usually I would pass a JSON object back from my PHP to the success handler, which would JSON.parse it and then do what you wanted with the return data, but you could also use Javascripts eval() although, this is discouraged in most cases due to security reasons.
Not using eval();
Javascript;
$.ajax({
url: "path/to/php.php",
type:'POST',
data: {
data: 'someString'
},
success: function(json){
var obj = JSON.parse(json);
if(obj) {
// run some javascript
}
},
});
PHP file (path/to/php.php);
<?php
// create return object to pass back to client javascript
$return = new stdClass();
// if you have incoming data from the ajax request to the server
$dataFromAjaxRequest = $_POST['data'];
// do somehting with this data;
if($dataFromAjaxRequest == "someString") {
$return->success = true;
} else {
$return->success = false;
}
// clean the buffer
ob_clean();
// encode your return obj to JSON and echo it and die
die(json_encode($return));
?>
Using eval to execute pure php generated Javascript;
Javascript;
$.ajax({
url: "path/to/php.php",
type:'POST',
data: {
data: 'someString'
},
success: function(javascript){
eval(javascript);
},
});
PHP file (path/to/php.php);
<?php
// if you have incoming data from the ajax request to the server
$dataFromAjaxRequest = $_POST['data'];
// do somehting with this data;
if($dataFromAjaxRequest == "someString") {
$return = "alert('success!');";
} else {
$return = "alert('failure!');";
}
// clean the buffer
ob_clean();
// encode your return obj to JSON and echo it and die
die($return);
?>
Hope this will work
<html>
<body>
<script>eval(<?php echo 'alert('hello')';?>);
</script>
</body>
</html>
For better cross-browser compatibility and less verbosity I'd suggest jQuery.
$.get('http://example.com', function(responseText) {
alert(responseText);
});
Related
I spent most of my day yesterday trying to solve this puzzle so today I've decided to reach out for some help. Before I begin, let me state that I am very aware that JavaScript is client-side and PHP is server-side and I use Ajax successfully for various other things. In this case, I can't find any S/O references that are similar to what I'm trying to accomplish. I would've thought this was very basic but I'm missing something here and could use some direction. Thank you.
In essence, I have a Javascript function that produces a JavaScript variable and then calls a PHP function that initiates a mySQL query (all on the same page). If I "hard-code" the argument in my PHP function call (e.g., sc_bdls = <?php echo Candidates::getBDLs(1000033); ?>;), the function runs perfectly and I receive the expected outcome (an array).
However, if I try and use a JavaScript variable in place of the argument, I receive a "Uncaught TypeError: Cannot read property 'id' of undefined" error. I have tried several iterations without success and I suspect I am missing something basic. Here is my code:
function tab_pos3(row){
var sc_id = row.toString();
var sc_bdls = [];
$.ajax({
type: "POST",
url: '/phpscripts/pass.php',
data: {row : row},
success:(function(data){
console.log("success");
alert(data);
})
});
sc_bdls = <?php echo Candidates::getBDLs($uid); ?>;
}
Here is the code from the pass.php file:
if(isset($_POST['row']))
{
$uid = $_POST['row'];
echo $uid;
}
Please notice that the console.log("success") and the alert(data) both show that the Ajax POST is working. Any thoughts on what might be going wrong? Thank you.
1st EDIT (comment from Swati)
I tried moving the PHP function call as suggested and then used $UID, $data, data, among others, and I still get the exact same error. Here is the edited code:
$.ajax({
type: "POST",
url: '/phpscripts/pass.php', //
data: {row : row},
success:(function(data){
console.log("success");
alert(data);
<?php $row = $_POST['row'];?>; // I tried this based on something I read.
sc_bdls = <?php echo Candidates::getBDLs(data); ?>;
})
The fact that the error doesn't change is gnawing at me. Could the argument be passed but in a format that is not being read right? Is the "TypeError" referring to data type?
Try moving the
sc_bdls = <?php echo Candidates::getBDLs($uid); ?>; to pass.php and read the returned data in ajax success function.
Please note php is executed before the browser sees it. And JS code is called client side.
This is how your function will look like
$.ajax({
type: "POST",
url: '/phpscripts/pass.php', //
data: {row : row},
success:(function(response){
console.log("success");
sc_bdls=response; // Just to show that response has the value you need.
alert(sc_bdls);
})
The pass.php will look like this
// I prefer using !empty here (unless you are expecting 0 as a valid input.
// This ensure $uid isset and is not empty.
// Also if $uid is supposed to be numeric you may want to add a validation here.
if(isset($_POST['row']))
{
$uid = $_POST['row'];
$response_array = Candidates::getBDLs($uid); //Your question says you are expecting an array
echo json_encode($response_array);
}
I have an php variable like this:
PHP Code:
$php_value = 'Am from PHP';
And I want to be able to change this variable with jQuery and the jQuery is on the same page?
You can't.
By the time the page has been delivered to the browser and the JavaScript has run, the PHP program that generated the page will have finished running and the variable will no longer exist.
JavaScript will allow you to send new data to the server (Ajax), where the server could store the data somewhere (a database is usual), and read the response.
JavaScript will also allow you to modify the page in in the browser (DOM) (including with the data included in the response for an Ajax request).
PHP code is run server-side, and jQuery runs on the client. The way to update a PHP variable from jQuery is to have a jQuery call which submits to the PHP page, and have the PHP look for it:
$php_value = 'Am from PHP';
if exists($_POST['php_value_from_jquery']) {
$php_value = $_POST['php_value_from_jquery'];
}
If I understand your question correctly, AJAX cannot post data to PHP code on the same page. I've been told that it can, but it is not trivial - still, I cannot imagine how that is possible. At any rate, AJAX is easy if a secondary PHP file is used.
Here is an example of what I mean. If you try this:
<?php
echo 'Hello';
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: '',
success: function(data) {
alert(data);
}
});
}); //END $(document).ready()
</script>
</head>
<body>
</body>
</html>
The popup will contain the HTML for the page.
However, if you use two files:
file1.php
<?php
echo 'Hello';
?>
file2.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'file1.php',
success: function(data) {
alert(data);
}
});
}); //END $(document).ready()
</script>
</head>
<body></body>
</html>
The popup will contain only the word "Hello".
To use ajax, you must call an external PHP file.
After considering the above, note that Quentin's answer is important -- even if you use AJAX to set a PHP variable on the server, that variable disappears after the AJAX completes -- just like the PHP variables all disappear after your index.php has finished rendering the DOM and presenting it to the visitor's browser.
So, what's to be done? Two options.
(1) As Quentin points out, you can store values permanently in a database, or
(2) You can use a PHP superglobal, such as a $_SESSION variable. For example:
Client side: file2.php
var storeme = "Hello there";
$.ajax({
type: 'POST',
url: 'file1.php',
data: 'stored_on_server=' +storeme,
success: function(data) {
alert(data);
}
});
file1.php
<?php
session_start();
$SESSION['a_variable_name'] = $_POST['stored_on_server'];
You can later retrieve that variable value thus:
$.ajax({
type: 'POST',
url: 'file3.php',
success: function(data) {
alert(data); //a popup will display Hello There
}
});
file3.php
<?php
session_start();
echo $SESSION['a_variable_name'];
You can't able to change the php value using javascript. i.e Server scripts runs first after that client side script will take effect in that case you cant able to modify the same, since they already rendered in browsers
If jQuery is going to be processing the data, then you can assign the PHP variable to a jQuery variable like this:
<script>
var jquery_value = <?php echo $php_value; ?>
</script>
As far as I know, because jQuery is client-side and php is server side, it's not possible to assign a jQuery variable back to PHP.
I know this question has been asked before several times on this forum, but I think I am missing something. Or maybe it is because I don't know JSON/AJAX that well.
Here is the thing.
I got some javascript/JQuery code on a page, say on index.php, (not yet in a seperate JS file) which let you put any number in an array from 1 to 10. If it's already in it, it will be removed if clicked again.
Now I want to pass that JS array to PHP, so I can create tables with it.
Here's what I have done.
$(".Go").click(function() {
var enc = JSON.stringify(tableChoice);
$.ajax({
method: 'POST',
url: 'calc.php',
data: {
elements: enc
},
success: function(data) {
console.log(enc);
}
});
});
And in my calc.php I got this to get the values to PHP.
<?php
$data = json_decode($_POST['elements'],true);
echo $data;
?>
Now here comes the noob question:
If I click my (.Go) button, what really happens?
Because the console.log let's me see the correct values, but how do I access it? The page (index.php) doesn't automatically go to the calc.php.
When I use a <form> tag it will take me there, but it shows this error:
Undefined index: elements
I am sure I am looking at this the wrong way, interpreting it wrong.
Can someone please help me understand what it is I should be doing to continue with the JS array in PHP.
With a XHR request you don't do a page reload. With your $.ajax method you post data to the server and receive information back. Since you can see information in your console, the success method is triggered.
You might want to take a look at your DevTools in for example Chrome. When you open your Network tab and filter on XHR you see what happens. You can inspect your XHR further by looking into the data you've send and received.
So my question to you is: what do you want to happen onSuccess()? What should happen with the data you receive from your backend?
In JavaScript:
$(".Go").click(function() {
var enc = JSON.stringify(tableChoice);
$.ajax({
method: 'POST',
url: 'calc.php',
data: {
"elements="+enc;
},
success: function(data) {
console.log(data);// You can use the value of data to anywhere.
}
});
});
In PHP:
<?php
if(isSet($_POST[elements]))
{
$data = json_decode($_POST['elements'],true);
echo $data;
}
else
{
echo "Elements not set";
}
?>
I have never been in contact with ajax. Can I get some help?
I know how to call a php script.
Example:
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
How can I get a response from function? If my ajax.php has function
<?php
function example(){
return "blablalba.....";
}
?>
How should my script looks like?
How can i get a response from function?
The same way you get a response from any other PHP script. The Ajax is irrelevant.
header("Content-Type: text/plain"); // or whatever
print example();
The PHP script just needs to display content as it would if you loaded it directly in the browser, using echo or simply closing your PHP tag ?> and outputting HTML or similar.
You should not return, you should send actual output. For example: a JSON encoded string or array, with the correct content type. The result will populate to the variable mentioned in request.done, i.e. msg.
You will need to use echo rather than return.
ajax.php
<?php
function example(){
echo "blablalba.....";
}
?>
It depends on the content of which you are using.
Since you specified content is HTML, your response will be a string with HTML code (as if you wrote it in notepad).
But AJAX as far as I know wont get response unless "echo 'html code'" is used in php.
<?php
echo '<body><div>Response from php script</div></body>';
?>
So fix your php code first. Then in AJAX set "data" as function argument and use it inside function. Data will be your response from php.
.done(function(data){
var smth = data;
});
I'm sending a jquery get request like so:
$.get($(this).attr("href"), $(this).serialize(), null, "script");
The response I expect to receive will be wrapped in script tags.
I understand the browser doesn't execute the response unless its returned without the script tags. Normally I would remove the tags from the response but in this situation I don't have access to the code running on the remote machine so cannot strip out the tags at the source.
Is there a way I can strip out the script tags from the response client side and execute the javascript?
You should be able to do the following:
$.get($(this).attr("href"), $(this).serialize(), function(data){
var script = $(data).text();
eval(script);
});
Or:
var myScript = new Function($('script#myscript',responseText).text());
myScript();
If I understand your question right, this should suffice to get the text out of the script tags:
$(response).text()
Would this help you: http://docs.jquery.com/Ajax/jQuery.getScript ?
Jose Basilio's answer is okay, but I recommend replacing eval with jQuery's globalEval function...
$.get($(this).attr("href"), $(this).serialize(), function(data) {
script = $(data).text();
$.globalEval(script);
});
globalEval is the function that would normally be called when you call an ajax method with a return type of script.
This from the API documentation...
This method behaves differently from using a normal JavaScript eval()
in that it's executed within the global context (which is important
for loading external scripts dynamically).
Say our response is in the 'response' var:
script = response.replace(/<script>(.*)<\/script>/, "$1"); // Remove tags
eval(script); // Execute javascript
I did this slightly differently, and used php land to make it easier. (I don't like using eval, nor do I like huge conspicuous rewrites).
I placed all my jquery in a php string like so (there was a LOT more JavaScript in real life)
$out .= " $('#save_now').button(); \n";
$out .= " $('#save_now').click( function() {\n";
$out .= " return false;\n";
$out .= " }); \n";
then also in php land
echo "<script>\n";
echo " function onOpen(){ \n";
echo $out;
echo " } \n";
echo "</script>\n";
then in the jQuery $.ajax call I do this
$.ajax({
url: geturl,
type: 'post',
data: getparams,
success: function(data) {
mydiv.html(data);
onOpen();
},
cache: false
});
as you can see you don't nee the php land thing, it's just in my code base I did sort of need to do it. the trick is to do away with $(document).ready(function(){}); and roll your own