How to output large HTML chunk using JavaScript? - php

hi all i am trying to output a large html chunk that holds opening and closing javascript tags. The javascript included is a jw player script and its mixed with javascript dynamic variable +url and php variable $Title. i tried document.write but the player didn't show up in the browser !instead it output part of the document.write statements! could you guys help me fix this issue ? Thanks in advance.
document.write("<html>");
document.write("<head>");
document.write("<meta http-equiv="Content-Type" content="text/html; charset=utf-8">");
document.write("</head>");
document.write("<br>");
document.write("Title:<?php echo $Title;?> <script type='text/javascript' src='./jwplayer.js'></script>");
document.write("<div id='mediaspace'>This text will be replaced</div>");
document.write("<script type='text/javascript'>");
document.write(" jwplayer('mediaspace').setup({");
document.write("'flashplayer': './player.swf',");
document.write("'file': + url,");
document.write("'autostart': 'true',");
document.write("'controlbar': 'bottom',");
document.write("'width': '470',");
document.write("'height': '320'");
document.write("});");
document.write("</script>");
document.write("</html>");

PHP written into the document with JavaScript will not run. PHP is evaluated before a document is received by the browser. JavaScript runs after.
As far as writing out a <script> element dynamically without breaking the current script, one option is to escape the forward slash, i.e.
document.write("<\/script>");
But, is there a reason JS has to output this code? In addition to the above problems, document.write is a bit outdated, and can become problematic when writing scripts. It would be a lot cleaner to host a PHP page like:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Title: <?php echo $Title;?>
<script type='text/javascript' src='./jwplayer.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': './player.swf',
'file': url,// assumes 'url' exists in the global namespace!
'autostart': 'true',
'controlbar': 'bottom',
'width': '470',
'height': '320'
});
</script>
</body>
</html>
Note <body> tag added.

Not sure what you're trying to do but document.getElementById("idtag").innerHTML = "Data"; will fill in the content between the tags of the element with the selected id.
Example:
<div id="dataplaceholder"></div>
<script type="text/javascript">
document.getElementById("dataplaceholder").innerHTML = "<h2>Hello World!</h2>";
</script>

Related

onbeforeunload doesn't seem to always be trigerred

Here's a minimum example -
index.php
<?php
$count = file_get_contents("count.txt") + 0;
file_put_contents("$count.txt [loaded]", '');
file_put_contents("count.txt", $count + 1);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<main>
<p> hi there </p>
</main>
<script type="text/javascript">
var id = "<?php echo $count; ?>";
</script>
<script src="script.js"></script>
</body>
</html>
script.js
$(document).ready(function ()
{
$(window).bind('beforeunload', function () {
$.post("unloader.php", { id : id });
});
});
unloader.php
<?php
file_put_contents("$_POST[id] [unloaded]", '');
When I open the webpage, a file is created with the count number as its name.
When I close the tab jquery requests unloader.php which is just a standalone script that creates a file with the count number as its name too.
Sometimes it works, sometimes it doesn't.
I mean the opening file is always created. But sometimes the file which has to be created on closing is not made.
Any idea where the issue occured ?
You can't (reliably) make AJAX calls when unloading the page. Because it's being unloaded, anything still in progress will be dropped.
If the browser's fast enough with the AJAX call (or the server's slow enough in responding to the new page load) then you should see a result, but it is not at all reliable.

jQuery post() to php page

I'm learning php/javascript so don't smile...
I try from page1.php to post 3 variables to page2.php.
I'm not sure what's wrong...
Here is the code (simplified mode):
page1.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = post_text;
function post_text() {
test1="111";
test2="222";
test3="333";
$.post("page2.php", { test1:test1 , test2:test2, test3=test3 });
}
</script>
</body>
</html>
page2.php
<?php
$a=$_POST['test1'];
$b=$_POST['test2'];
$c=$_POST['test3'];
echo $a.$b.$c;
?>
$.post("page2.php", { test1:test1 , test2:test2, test3:test3 });
Since you are learning, you might try to isolate problems by writing shorter chunks of code and seeing if they work first. In this case your first problem is an ordinary typo (test3=test3, instead of test3: test3) so your whole JS does not parse. You should be seeing the relevant error message in the firebug console (or chrome console).

How to get all the element tags and content of each tag in HTML file stored in some other folder

Objective is to Get individual text segments from HTML file (not a single stream string of whole document.)
I want to scan html files for element tags and text content in between tag pair. I am thinking of doing it something like this :
// var mytags = $('#trans_seg').find('*');
// var total = mytags.length;
//
// for(i = 0; i <= total; i++){
// console.log(mytags[i].textContent);
// }
Its done in console mode of firebug !
I applied this operation in existing HTML file, now how can i do it for other HTML files ?
i have tried somewhat like this:
$(document).ready(function(){
data = '<?php echo mysql_real_escape_string(file_get_contents('test_html.html')); ?>';
tags = data.find('*');
alert($data.length);
});
But it is giving error "TypeError: data.find is not a function".
Do ask me question if it still not clear.
********** Edited *****************
i got this response when i alert data
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>TODO write content</div>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

Include scripts before <body> php

Is there a way to inject scripts into the page before the <body> tag in php? I've seen some examples on how to do this with jquery, but jquery causes parts of my site not to function properly therefore I need a php code so I can selectively inject scripts before the opening tag of my page.
ie.
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.internads.js"></script>
<script>
$(document).ready(function(){
// Call Intern Ads
$().tcInternAds({
title: "Support Our Sponsors!",
url: "adpage.html",
timeout: 10,
deplay: 0,
wait: 0,
closeable: true
});
});
</script>
<body>
<div class="xxxxx">
...............</div>
I would like to be able to use php if possible, so I can include the code in my template files where I need the scripts to be called while avoiding global inclusion.
Can anyone help with this?
best,
Mike
Put your contents in index.php (or whatever it's called).
It should look like this:
<?php
...phpcode...
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.internads.js"></script>
<script>
...
</script>
<body>
<div class="xxxxx">
<?php
another php code
?>
</div>
Wouldn't simply placing it within the <head> work?
<head>
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.internads.js"></script>
<script>
$(window).load()(function(){
// Call Intern Ads
$().tcInternAds({
title: "Support Our Sponsors!",
url: "adpage.html",
timeout: 10,
deplay: 0,
wait: 0,
closeable: true
});
});
</script>
</head>
<body>
<div class="xxxxx">
...............</div>
I have found a solution to my problem without having to inject or replace head code. The problem is that my site includes mootools and jquery is conflicting with it. I resolved the issue by using jQuery noConflict which defines a namespace to use and thus resolves the issue by using a custom variable rather than the dollar $.
Here is my working solution to workaround jquery/mootools conflict.
<link href="/internAds.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/jquery.internads.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
// Call Intern Ads
$j().tcInternAds({
title: "Support Our Sponsors!",
url: "/adpage.html",
timeout: 15,
deplay: 0,
wait: 5,
closeable: false
});
});
</script>
I appreciate everyone's time, I am not sure how I overlooked the conflict.
best,

Scriptaculous highlight effect on php print

I want this effect when php print gets called . How can i do it?
I have tried with
print "<span id=\"highlight\" onLoad=\"Effect.Highlight(highlight);\"><em>Your post was successfully added.</em></span>"."<hr>";
but this is not working. Help!
if it does not need to be in the php itself then use (advise against using short tags to open and close):
?>
<span id="highlight" onLoad="Effect.Highlight(this.id);"><em>Your post was successfully added.</em></span><hr>
<?php
and continue your script.
alternatively,
<head>
...
object.onload="SomeJavaScriptCode";
...
</head>
--EDIT--
Javascript would look like:
<script type="javascript/text">
body.onload=Effect.Highlight(getElemenyById('highlight'));
</script>
-- EDIT --
Javascript, I believe, (thanks to comments) will look like:
document.addEventListener('DOMContentLoaded', function () {
Effect.Highlight(getElemenyById('highlight'));
}, false);
onload=""
Does only work inside of a <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script> or <style> Tag.
if you are using javascript why not print in your script section?
in your body you can have the notice hidden,
and after the post is added to the database you can show and highlight the alert.
are you using Ajax?
an example:
<span id="hightlight" style="display:none"><em>Your post was successfully added.</em></span>
<scrpt type="text/javascript">
<?php
print "$('highlight').show(); Effect.Highlight('highlight')";
?>
</script>

Categories