I have a javascript widget that can be inserted on an a plain-old html page like this:
<html>
<head>
<script type='text/javascript' src="http://example.com/widget.js"></script>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
I would like to insert this javascript on one page of a Drupal 6 site (not every page).
This is what I have tried so far to get the script tag in the HEAD:
I set the Full HTML input format to allow php.
For the Drupal page, I set the input format to Full HTML
I then added this to the top of the body of my Drupal page:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://example.com/widget.js"> </script>');
?>
But Drupal doesn't parse the php and instead prints this at the top of the page:
<?php drupal_set_html_head(''); ?>
Any suggestions as to how I can do this?
#Jeff: You should not really reconsider that. Using the PHP Filter is generally a bad idea as it potentially opens security holes. (In case someone would gain access to your user account or you have a misconfiguration in your settings this is a direct path to compromising the whole server)
I would rather propose to add js via the template.php of your theme. Also the right method to use is drupal_add_js with the option inline:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/6
Here are some further reads on how to use it:
http://drupal.org/node/304178#comment-1000798 http://drupal.org/node/482542
I'm not too familiar with Drupal so this answer merely gets around your widget not loading without actually answering the question why that PHP block isn't being parsed as PHP.
You don't need to call the <script> tag inside the <head>. You can just place that line right above the <script> tag that calls the widget constructor.
<html>
<head>
</head>
<body>
<script type='text/javascript' src="http://example.com/widget.js"></script>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
After writing that all out, I figured out the problem...
The full html input format has an HTML corrector filter turned on by default, and that filter appears to have caused problems with the PHP code. Reordering the filters to put the PHP evaluator first fixed the problem.
Related
I'm trying to get a cell text from a Google Spreadsheet and insert into a post on WordPress using this code, but I'm pretty bad on JavaScript that I don't even know how to get the text without the alert.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
</head>
<body>
<script>
$.ajax("https://docs.google.com/spreadsheets/d/e/2PACX-1vQhp9yFq8eXagN03gn-mCN3_KPWRc2EIpswDFpHJLflFOG-XU2OMktqj03gxvUBZMAp8gYwWO5Q3MVJ/pub?gid=942917560&single=true&range=d3&output=csv").done(function(result){
alert(result);
});
</script>
</body>
In your Wordpress post, go to Text mode and add a div
<div id='spreadsheet'></div>
Now in your script do this to set the contents:
jQuery.ajax("https://docs.google.com/spreadsheets/d/e/2PACX-1vQhp9yFq8eXagN03gn-mCN3_KPWRc2EIpswDFpHJLflFOG-XU2OMktqj03gxvUBZMAp8gYwWO5Q3MVJ/pub?gid=942917560&single=true&range=d3&output=csv").done(function(result){
jQuery("#spreadsheet").text(result);
})
WordPress usually comes with jQuery, you don't need to add it yourself. You need to replace $ with jQuery though.
You can also do this:
jQuery(function($) {
$.ajax("https://docs.google.com/spreadsheets/d/e/2PACX-1vQhp9yFq8eXagN03gn-mCN3_KPWRc2EIpswDFpHJLflFOG-XU2OMktqj03gxvUBZMAp8gYwWO5Q3MVJ/pub?gid=942917560&single=true&range=d3&output=csv").done(function(result) {
$("#spreadsheet").text(result);
})
});
This will a) only run the function after the document is loaded and b) allow you to keep using $ in your code.
I am currently testing DOMPDF and got it working quite nice for my purposes, including CSS styling, displaying content fetched from a mysql database etc.
Now I tried to use some Javascript, but it doesn't work. I used a very simple script for testing:
HTML somewhere on the page:
<div id='mydiv1' style='width: 100%;height:20px;background:#ddd;'></div>
The JS (just above the closing </body> tag (but I also tried it right after the opening <body> tag):
<script>
document.getElementById('mydiv1').innerHTML = 'this is a test';
</script>
When I echo this page in the browser (I am echoing a variable which contains the complete HTML/PHP page), that text appears in the DIV. When I put the same variable in DOMPDF's loadHtml and then render and output it, the script-generated text doesn't appear in the PDF (the rest of the page does).
So my question is: Is there any way to make Javascript work in DOMPDF-generated PDFs?
Unfortunately, DOMPDF doesn't support javascript. You may consider looking at something like phantomjs, which can be used to save pdf files, as well.
There is a DomPDF option to turn on inline javascript:
$isJavascriptEnabled = true;
Heres an example of how to use the DomPDF options:
$HTML = <<<HTML
!DOCTYPE html>
<html>
<head>
<body>
some html
</body>
<script> somejs </script>
</head>
</html>
HTML;
require_once "sites/all/libraries/dompdf/autoload.inc.php";
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('isJavascriptEnabled', TRUE);
$dompdf = new Dompdf($options);
$dompdf->load_html($HTML);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream('blah.pdf');
I took this from DomPDF's options page: https://github.com/dompdf/dompdf/blob/master/src/Options.php
This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.
So there is an ad code which I try to add to the DOM dynamically, something that looks like this:
<script type="text/javascript"><!--<![CDATA[
JAVASCRIPT CODE
//]]>--></script>
If I paste this code directly in the source code, it works, but if I try to insert it to the DOM with jQuery it throws some untraceable errors - at least I cant trace it. Actually this:
The interesting part is that Firebug connects this error to random scripts in the page which contain jQuery. The ad code is inserted into the DOM this way /element is a jQuery object/:
element.html(data.content);
What I have tried yet:
I have tried to remove the <!-- --> html comment tags.
I have tried to wrap the wole code to a script tag dynamically created by jQuery.
I even tried to remove the CDATA tags, but that broke everything, I think it is important for the main ad handler script provided by the ad manager company.
Any help would be appreciated, thanks in advance!
(Please dont care about the method, it must be done with ajax.)
EDIT: The problem still persists, but I think there must be a problem with the ad code, so I accepted the first useful answer for this topic.
Try like this:
<script type="text/javascript">
/* <![CDATA[ */
...
/* ]]> */
</script>
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
<!-- (For styles, it is different) -->
<style type="text/css">
/*<![CDATA[*/
...
/*]]>*/
</style>
And if you really need compatibility with very old browsers that do not recognize the script or style tags resulting in their contents displayed on the page, you can use this:
<script type="text/javascript"><!--//--><![CDATA[//><!--
...
//--><!]]></script>
<!-- (For styles, it is different) -->
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
...
/*]]>*/--></style>
With <![CDATA[ you can embed JS in XML (and XHTML) documents without the need to replace special XML characters like <, >, &, etc by XML entities <, >, & etc
Use this one
<script type="text/javascript">
//<![CDATA[
//YOUR CODE
//]]>
</script>
Let me know if problem still persist.
A simple script tag inside the body tag doesn't seem to work. The alert doesn't get triggered in the code below:
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{>main}}
</body>
Any idea why?
Edit:
Just tried it with a fresh meteor app, no alert tag still:
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
Weird thing is when I copy paste the source of the html, made a new html page, and the alert will work.
Edit3: I deployed this app here: http://alert-in-body-test.meteor.com/
Do you get an alert box?
This question is still relevant in the current version of Meteor (version 0.5.4) so I wanted to describe how to include script at the end of the body.
To execute javascript at the end of the body, register a Handlebars helper and put the relevant code there, like this:
In client.html:
<body>
{{renderPage}}
{{afterBody}}
</body>
...
In client.js:
if (typeof Handlebars !== 'undefined') {
Handlebars.registerHelper('afterBody', function(name, options) {
$('body').append('AFTER BODY');
});
}
(For a great description of why this is required, see Rahul's answer to a similar question here: https://stackoverflow.com/a/14002991/219238 )
Its working for me
in onrender call this jquery
$.getScript('yours url')
It should work.
I have just pasted this inside one of my projects and it worked.
Your {{>main}} is strange for me tough. Also make sure that <body> is inside <html> tag.
Meteor is constructing the entire DOM from Javascript by rendering your page as a template -- the 'source' for your page as seen by the browser is basically:
<script type="text/javascript" src="/5a8a37bef5095c69bcd3844caf3532e1ba6d49bf.js"></script>
I can't find a definitive page stating that embedding a script tag in a template like this won't cause it to be executed, but it definitely feels against the spirit of what the framework is trying to achieve.
If the point is to achieve a clean separation of your markup and logic then why put it in the template. A better solution would be to use the meteor.startup call
Instead of looking the rendered html at developer tools, try looking the real downloaded html.
You will find a (probably) empty tag, with tons of script tags inside the .
In other words, the body of your meteor application is not the body of the final html, it's just your main template.
Instead, this ton on scripts shipped by Meteor, will load your templates.
So, your code will not run, cause it's been placed there. It's like when you manipulate DOM (with jQuery, for exemple), placing a script tag in DOM, after it's loaded. This script tag will not run.