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.
Related
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;
?>
I have this HTML that works very well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
var myImage = document.getElementById('signals');
myImage.src = 'http://lessthanrandom.com/screencast/signals.jpg?' + Math.random();
setTimeout('refreshIt()', 900000); // refresh every 60 seconds
//setTimeout('refreshIt()', 1800000); // refresh every 1/2 hour
}
//--></script>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body onLoad="setTimeout('refreshIt()', 900000)">
<table>
<tr><td class="content">
<img src="http://lessthanrandom.com/screencast/signals.jpg" width="100%" id="signals" name="signals"></td></tr>
</table>
</body>
</html>
If I add the following PHP above this and change to a PHP file, the image displays, but does not refresh. I'm new to PHP and Javascript.
<?php
include_once "/home/lesadmin/public_html/wp-load.php";
if (current_user_can("access_s2member_level1"))
{
}
else
exit("Must have a valid membership to view this content.");
?>
With jquery, I'm attempting to pull information from a .php file and run it in another html page.
To try this out I attempted to use this example:
http://www.tutorialspoint.com/jquery/ajax-jquery-get.htm
The .php file would include:
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
================ The html page code includes:
<!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" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.get(
"/testing.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
The jquery library has successfully loaded, as per the "test result".
For some reason, the contents of the "testing.php" file are not being pulled... almost as though it's linked incorrectly. Is the file linked improperly? (both the .php and .html files are in the same folder)
I even tried doing something simple, like an echo statement in the php, but still nothing was pulled from the file and published to the html page.
There might be a simple fix that you see. I appreciate your time and energy in helping me resolve this issue. Thanks in advance!
You could simply do this: $('#stage').load('testing.php?name=Zara');
The files are hosted from a folder on my computer
This gives you two problems:
Browsers put pretty strict restrictions on what webpages loaded from the filesystem can do, loading other files via XMLHttpRequest is forbidden
PHP is a server side technology, it needs a server to work (in this context)
Host your site on a webserver. It can be one you run locally, then you can access the site via http://localhost/etc
Use jquery.ajax instead. Here is your HTML code
<!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" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax({
url: "testing.php",
data: { name: "Zara" },
success: function(data) {
$('#stage').html(data);
}
});
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
I would rather do the following...
<?php
if( $_GET["name"] )
{
$name = htmlspecialchars(trim($_GET['name']));
echo "Welcome ". $name;
}
?>
and
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.load( "testing.php?name=Zara, function(data) {
$('#stage').html(data);
}
);
});
});
</script>
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.