I found a tutorial on PHP.net in the manual "PHP and HTML" and there is an example, Generating JavaScript with PHP.
I am trying out a simple demo version with this on my own to learn how to do this so I can later attempt something more complex. Right now, I'm simply trying to declare a string variable in PHP (an address to a JPG file) and then through JavaScript (created in the PHP script) change the src of an IMG element to this new address.
Someone suggested something with JSON, which I have a little experience with, but only with posting to textfile using script in a PHP file. I am not sure if I can use a GET request or something, I honestly have no clue. I just didn't think this would be that complicated.
Here is the link to my page where I am trying to do this.
As you see, I've actually been trying to do the opposite of creating the JavaScript in PHP, instead I was trying to embed the PHP within the JavaScript, which is what someone originally suggested to me, which didn't work. So that is why it is like that.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<?php
$srcmsg = 'http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg';
?>
<script type="text/javascript">
//<![CDATA[
//
var msr = "<?php echo $srcmsg; ?>";
window.onload = document.getElementsByTagName('img').src= msr;
//]]>
</script>
</head>
<body><img src="#" alt="Picture of the world" height="42" width="42" />
</body>
</html>
SOLUTION: this was discovered by Orangepill and Fred....
it turns out that one of the big problems was the way my server was not able to parse the script in the html file so I had to put it in a PHP file instead. then there was an issue with interpreting the short_open tags in the xml declaration. so here is how it ended up for it to get working: keep in mind this is a .php file NOT .htm
<?php echo "<", 'xml version="1.0" encoding="UTF-8" standalone="no" ?'; ">\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript">
//<![CDATA[
//
window.onload = function (){
var msr = '<?php $srcmsg = "http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg"; echo $srcmsg; ?>';
var x = document.getElementsByTagName('img')[0];
x.src = msr;
}
//]]>
</script>
</head>
<body><img src="#" alt="Picture of the world" height="42" width="42" />
</body>
</html>
getElementsByTagName returns a NodeList (an array like object) so you have to do
window.onload = document.getElementsByTagName('img')[0].src= msr;
to do the first image.
<?php
$srcmsg = 'http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg';
echo<<<_HTML
<script type='text/javascript'>
window.onload = document.getElementsByTagName('img').src= $srcmsg;
</script>
_HTML;
?>
Related
Guys, I have a problem. Is there a way to add html inside a tag without using javascript using only php anyway ?. Thank you very much for your help in advance.
For example, there is this code:
<?php
// This part is required here, because she comes another function.
// It's generate from php server, I need to show inside tag body, for example.
$code = "<h1 style='display:none' id='title'>My String</h1>";
echo $code;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="my-div"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js'
integrity='sha512-b6lGn9+1aD2DgwZXuSY4BhhdrDURVzu7f/PASu4H1i5+CRpEalOOz/HNhgmxZTK9lObM1Q7ZG9jONPYz8klIMg=='
crossorigin='anonymous'></script>
<script>
$('#my-div').html($('#titulo').html());
</script>
</body>
</html>
The output is this in the source code:
In the browser, the output is this My String:
But, this manipulation is the gift, which uses javascript for this. I don't want it that way. This will not do, because the code will be shown at the top, before the <! DOCTYPE html> tag. Is it possible, on the server, to insert <h1 style ='display:none' id='title'> My String </h1> inside the boby tag, for example?
How I would like it to look:
Example 2
For example, I have this file with code:
file2.php
<?php
include "file2.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="my-div">
I want to show "<h1>My String</h1>" here.
</div>
</body>
</html>
Yes you can do it as simple as this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="my-div">
<?php
$code = "<h1 style='display:none' id='title'>My String</h1>";
echo $code;
?>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js'
integrity='sha512-b6lGn9+1aD2DgwZXuSY4BhhdrDURVzu7f/PASu4H1i5+CRpEalOOz/HNhgmxZTK9lObM1Q7ZG9jONPYz8klIMg=='
crossorigin='anonymous'></script>
</body>
</html>
PHP is a server side scripting language and will only parse PHP code on the server side.
Yes, you can place HTML code inside PHP variables like you have done, but that will get rendered into the client (your browser).
What you can do is place $code variable inside the target div, like this:
<div id="my-div"><?php echo $code; ?></div>
Give it a try
I can't figure out exactly how to make this work. I am new to PHP by the way.
Here is what I current have (zerkms's solution), and it still isn't working for some strange reason:
here is a link to the page on the server:
http://tinyurl.com/kd3gynk
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<?php
$srcmsg = 'http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg';
?>
<script type="text/javascript">
//<![CDATA[
//
var msr = "<?php echo $srcmsg; ?>";
window.onload = document.getElementsByTagName('img').src= msr;
//]]>
</script>
</head>
<body>
<img src="#" alt="Picture of the world" height="42" width="42" />
</body>
</html>
This has nothing to do with the PHP part.
This is not working purely because you are attempting to change an image that doesn't exist yet.
Either move your script to the end of the <body> (right before the </body> tag), or use window.onload = function() { /* your code here */ }, or implement some kind of deferring system.
i have tried following code but it could change on click, i want to change the iframe inner part after every 5 second interval.
<html>
<body>
<iframe id="foo"></iframe>
This page
</body>
</html>
basically idea is that i have pages which will display inside of iframe, these 5 web pages will change after another after every 5 second interval.
thanks
This will do it:
var urls = ["http://www.google.com", "http://www.example.com"];
var i = 0;
function changeSrc() {
if (urls.length > i) {
document.getElementById("foo").src = urls[i];
i++;
setTimeout(function() {
changeSrc();
}, 5000);
}
}
changeSrc();
Based on #Matthew Dean answer :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fouad Ali</title>
<script>
var links = ["http://www.example.com/page","http://www.example.com/anotherpage"];
var i = 0;
var renew = setInterval(function(){
document.getElementById("foo").src = links[i];
if(links.length == i){
i = 0;
}
else i++;
},5000);
</script>
</head>
<body>
<iframe id="foo" src="http://example.com"></iframe>
</body>
</html>
Important: Not all sites can be used within iframes. Be sure that the website you put in the links array allows to be used inside an iframe.
I have tried alot to remove this error but could not get success.When i am running this script on localhost its working fine but not working on Joomla frame work.
The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $viewFields=array('c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby'); ?>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var example=jQuery.noConflict();
var arrayFromPHP = <?php echo json_encode($viewFields) ?>;
example(document).ready(function() {
example("input#autocomplete").autocomplete({
source: arrayFromPHP
});
});
</script>
</head>
<body>
<center>
<p><img src="<?php echo JURI::base(); ?>images/search_1.png" border="0" alt="" />
<img src="<?php echo JURI::base(); ?>images/business_2.png" border="0" alt="" />
<img src="<?php echo JURI::base(); ?>images/review_3.png" border="0" alt="" />
</p>
</center>
<input id="autocomplete" />
</body>
</html>
Its giving me this error:-
--
[08:30:24.870] Use of getAttributeNode() is deprecated. Use getAttribute() instead. # http://50.116.97.120/~amarhost/storage/media/system/js/mootools-core.js:343
[08:30:27.853] TypeError: example("input#autocomplete").autocomplete is not a function # http://50.116.97.120/~amarhost/storage/index.php/component/storage/?action=war&Itemid=105:210
Maybe noconflict clear everything that is added to jQuery. try to put noconflict just after the you load jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>var example=jQuery.noConflict();</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var arrayFromPHP = <?php echo json_encode($viewFields) ?>;
example(document).ready(function() {
example("input#autocomplete").autocomplete({
source: arrayFromPHP
});
});
</script>
I would like to add that there could be multiple jquery file included. Maybe from other included php files. Remove this inclusion and keep only at one place. Best way is to include this js file in some php file and then
include in the required file using include_once('jquery_include.php');.
This will probably solve your problem. I had this same problem. This solved my problem.
Some thing like this.
jquery_include.php
<script src="scripts/jquery.js" type="text/javascript"></script>
then include this php file in required php files.
include_once('jquery_include.php');
Hope this help.
I am using a PHP variable called LeagueLink. When the user is not logged in I want the variable to read the text (Already have a league...) followed by a link to a popup window. So far it is displaying correctly except when I click on the link nothing happens. I think I just have a syntax error from mixing so much PHP and JS, but I can't figure out where. Please help make the popup window link work if you can...
<?php
// this starts the session
session_start();
$_SESSION['userid'];
$message = "";
if ($_SESSION['userid'] == "") {
$message = "You must create an account or sign in to play!";
$LeagueLink = "Already have a league...<a href='JavaScript:newPopup(\"http://www.yourfantasyfootballreality.com/signin.php\");' class='two'>Sign In</a>";
} else {
$message = "Hello, " .$_SESSION['userid'] . " make your picks!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="http://www.indiana.edu/favicon.ico" />
<title>YourFantasyFootballReality</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<?=$message?>
<?=$LeagueLink?>
<?=$ActionLink?>
</body>
</html>
JavaScript:newPopup is a function that needs to be defined.
I think what you are looking for is the following: You don't need javascript to open the page in a new window. Just set the target property of the link to _blank.
$LeagueLink = "Already have a league...<a href='http://www.yourfantasyfootballreality.com/signin.php' target='_blank' class='two'>Sign In</a>";
EDIT: If you want it popping up, rather than opening in a new tab, you can resize it immediately after it is spawned. Add the following to your javascript.
function newPopup()
{
var url='http://www.yourfantasyfootballreality.com/signin.php';
windowProperties = "toolbar=no,menubar=no,scrollbars=no,statusbar=no,height=500px,width=500px,left=50%,top=50%";
popWin = window.open(url,'newWin',windowProperties);
}
and keep your PHP the same as before.