Smalltalk syntax highlighting - javascript

I'm building a Seaside application and I'm searching for a way to highlight some code snippets on the browser with JS.
I found highlight.js which support Smalltalk syntax but it doesn't work.
I add this script and hljs.initHighlightingOnLoad(); in the header but it doesn't work.
Probably I miss something but what?

I use highlight.js from CDN:
<link href='http://yandex.st/highlightjs/8.0/styles/sunburst.min.css' rel='stylesheet'/>
<script src='http://yandex.st/highlightjs/8.0/highlight.min.js' type='text/javascript'/>
I also define a format function like:
function format(){
var b=document.getElementsByTagName("pre");
for (i=0;i<b.length;i++) {
hljs.tabReplace = ' '; // 2 spaces
b[i].style.fontSize = '0.9em';
hljs.highlightBlock(b[i],' ',false);
}
}
and use
<pre class="smalltalk"><code>……</code></pre>
for highlightable block. Then I call format() when the page is loaded (or a dynamic content with code is loaded into page)

Related

What does handle_redirect() in JavaScript do?

What will happen if I click a XXX?
It seems I will be redirect to somewhere, but how does it determine where?
Somewhere in your JavaScript code, you should have a function that looks like this :
function handle_redirect() {
...
}
To find your JavaScript code, look for script tags, like this ...
<!-- INLINE JavaScript -->
<script type="text/javascript">
console.log("Inline JavaScript");
</script>
... or like this ...
<!-- an EXTERNAL external JavaScript file -->
<script type="text/javascript" src="assets/js/myscripts.js"></script>
If your handle_redirect function is defined inline, you should be able to find it just by searching for handle_redirect in the code of your webpage.
Usually, however, your JavaScript will be found in external JavaScript files. In that case, you need to search in the code of files that are linked to. So, if you see a script tag with a src eg. equal to assets/js/myscripts.js, just open the file assets/js/myscripts.js with your text editor OR your browser and look for a function that looks like function handle_redirect() { ... } there.

How to add javascript widgets in BIRT reports

I am trying to extend BIRT for include a Report Item that is based on a javascript widget. I am not able to figure out how to include the js files used by a widget in the reportitemPresentation. I went through the 'RotatedText' example and tried to override the onRowSets method:
public Object onRowSets( IRowSet[] rowSets ) throws BirtException
{
StringBuffer str = new StringBuffer();
Str.append("<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>">);
.....//added code to initialize the widget.
return str.toString();
This added the script in the body of HTML but did not execute. Please ignore the syntax errors as the script tag was correctly added in the HTML.
In addition, I also want to add the code to initialize the widget:
$("#jqxbutton").jqxButton({ width: '150', height: '25'});
How do I do the following:
Include the js files of a widget in the html head tag.
How to include the code to initialize the widget and set some properties for the widget. For eg. How can I add the code for
$(document).ready(){ // initialize the widget, add some properties};
What classes do I have to extend, which method to override? Any examples would be helpful. What is the right way to include the widget?

Get script's own source from Greasemonkey script

I know that with basic JS you can read a <script>'s source code like so:
<pre id="scriptContents"></pre>
<script id="myScript" type="text/javascript">
var script = document.getElementById('myScript');
var contents = script.innerHTML;
scriptContents.innerText = contents;
</script>
So my question is: Is there any way similar to this in Greasemonkey/Tampermonkey? I want to be able to read the Greasmonkey script's source code as string.
The reason I'm asking is because the Greasemonkey script is magically included to the page and doesn't have a "physical" representation like the above <script> block.
More background: I'm writing a script but it needs a lot of styles and also a Mustache template which is really hard to provide in JavaScript in a readable form. I want to prevent having the escape every single apostrophe or quote character and also joining the string or adding \ at the end of the line. I found a tricky way to do this, but still looking for alternatives. Here's the current version:
function hereDoc(f) { return f.toString().replace(/^[^\/]*\/\*!/, '').replace(/\*\/[^\/]*$/, ''); }
$('head').append(hereDoc(function() {/*!
<script id="template" type="x-tmpl-mustache">
<div>...
</script>
<style type="text/css">
lots.of #css { code: here; }
</style>
*/}));

Uncaught TypeError: undefined is not a function while using jQuery UI

I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").

Error - Asynchronous adsense code in HTML

I'm a blogger and I monetize my blog with adsense. While coding or in fact adding asynchronous code inside <head></head>tag of my blog it appears that I have to add it like this:
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
instead of like this:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Otherwise it will show me an error. Can anyone explain why? Do you know if I'm allowed to add this (according to adsense)?
Use this code instead on any of them... I'm currently using this...Try it
<script async='async' src='http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
You're writing an XHTML document (either because of the Content-Type or an XML declaration).
Therefore, the entire document must be valid XML.
Unlike regular HTML, all XML attributes must have values.
I have a solution for the same problem with Hubspot Tracking Code with Blogger.
When adding the following code to the theme HTML in Blogspot, I get an error.
Error parsing XML, line 2490, column 62: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->
I fixed it be using the above fix changing async defer to async="async defer"
<!-- Start of HubSpot Embed Code 17/03/2017-->
<script type="text/javascript" id="hs-script-loader" async="async defer" src="//js.hs-scripts.com/2336222.js"></script>
<!-- End of HubSpot Embed Code -->

Categories