FBML and HTMLParser error - facebook

The below code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xml:lang="en" lang="en">
<head>
<title>FB Test</title>
</head>
<body>
Test
<fb:serverfbml style="width: 350px;">
<script type="text/fbml">
<fb:connect-form action="http://127.0.0.1/post_invite">
</fb:connect-form>
</script>
</fb:serverfbml>
</body>
</html>
Results in the following error:
- Warning: Compilation failed
- Warning: <class 'zope.tal.htmltalparser.NestingError'>: Open tags <html>, <body>, <fb:serverfbml>, <script> do not match close tag </fb:connect-form>, at line 16, column 4
PTRuntimeError: ['Compilation failed', u"<class 'zope.tal.htmltalparser.NestingError'>: Open tags <html>, <body>, <fb:serverfbml>, <script> do not match close tag </fb:connect-form>, at line 16, column 4"]
Yet the structure seems valid to me...

You can't put tags inside of a <script> tag, and the strict ZPT parser is complaining about that. You'll have to somehow escape the contents, like with a tal:content="structure string:" construct:
<script type="text/fbml" tal:content="structure string:
<fb:connect-form action="http://127.0.0.1/post_invite"<
>/fb:connect-form<
"></script>

The script tag must not contain xml to my knowledge.
You could enclose the contents in xml comments and see if that works.

Related

Eventlistener in JavaScript output

This code display the textarea tag for console.log(abc) which is the ID, but for console.log(text) shows an error. Can anyone explain how value for console.log(abc) is getting executed and not for text class.
I haven't pass any argument to callback function. so how even for console.log(abc) it give an output.
Thank you.
document.querySelector(".text").addEventListener("keydown", () => {
console.log(abc);
//console.log(event);
console.log(text);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo</title>
</head>
<body>
<textarea name="ab" class="text" id="abc" cols="30" rows="10"></textarea>
<script src="script.js"></script>
</body>
</html>
The code segment document.querySelector("#abc") gets the html element with an id of "abc".
The code segment:
.addEventListener("keydown", () => {
console.log(abc);
})
is an event listener that listens for a keydown event and prints the html tag with the id of "abc"

Sgvizler: Create empty table for empty result

When I create a sgvizler.visualization.Table with Sgvizler 0.6 and the SPARQL query has no results, Sgvizler doesn't draw anything, not even the table header. This may confuse users who may think that the result is still being calculated or that the script has crashed. How can I configure Sgvizler to draw the table header even when the result is empty?
Minimum Working Example
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://mgskjaeveland.github.io/sgvizler/v/0.6/sgvizler.js"></script>
<script>
sgvizler
.defaultEndpointURL("https://dbpedia.org/sparql")
.defaultChartFunction("sgvizler.visualization.Table")
.defaultChartWidth(1000);
$(document).ready(function (){ sgvizler.containerDrawAll(); });
</script>
</head>
<body>
<h2>First Table</h2>
<div id="results"
data-sgvizler-query="
select distinct ?class
{
?class rdfs:subClassOf dbo:Animal.
}
">
</div>
<h2>Second Table</h2>
<div id="noresults"
data-sgvizler-query="
select distinct ?class
{
?class rdfs:subClassOf dbo:Unicorn.
}
">
</div>
</body>
</html>
This is a bug in the parser, which looks only at the first row of results to build the JSON accepted by the google.visualization.DataTable object.
The solution would be to rewrite the parser to check the "column headers" of the SPARQL result set.
The parser is here: https://github.com/mgskjaeveland/sgvizler/blob/master/src/parser.js

Why does Lift escape this <lift:bind> value?

I have (roughly) this LIFT-ified HTML in my default template:
<html>
<head>
<title>FooBar Application | <lift:bind name="page-title"/></title>
</head>
<body>
<h1><lift:bind name="page-title" /></h1>
<div id="page-content">
<lift:bind name="page-content" />
</div>
</body>
</html>
...and then this in my main template:
<lift:surround at="page-content">
<lift:bind-at name="page-title">Home</lift:bind-at>
</lift>
...which give me this in the generated HTML:
<html>
<head>
<title>FooBar Application | <lift:bind name="page-title"/></title>
</head>
<body>
<h1>Home</h1>
<div id="page-content">
</div>
</body>
</html>
Why is the <lift:bind> tag in the <title> getting escaped, and the one in the <body><h2> not? And how do I prevent that from happening?
Are the pages defined through SiteMap? As was mentioned before, <title> can be a special case, and it is interpreted in several places - some of which might be doing the escaping. If you can, I'd try setting the page title in one of two ways:
Through the Sitemap you can use the Title Loc Param as referenced here: Dynamic title with Lift
You can also have something like: <title data-lift="PageTitle"></title> to have it invoke a snippet called page-title. Where, the snippet would be something like:
class PageTitle {
def render = "*" #> "FooBar Application | Home"
}

jQuery mobile redirects after page loads

I want to make a redirection with jQuery mobile right just after the page loads.
Something like this
<?php
... some php stuff here
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<script>
$.mobile.changePage("index.php");
</script>
But nothing happens...
Thanks!
Nothing happens because jQueryMobile hasn't done it's magic yet.
Try:
$(document).bind('pageinit', function() {
$.mobile.changePage("index.php");
});
You could also try some of the events listed at http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Edited following comment:
The following works as expected for me:
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).bind('pageinit', function() {
$.mobile.changePage("#pageTwo");
});
</script>
</head>
<body>
<div id="firstPageId" data-role="page">
Page One
</div>
<div id="pageTwo" data-role="page">
Page Two
</div>
</body>
</html>
You can use plain ol' JavaScript for this, you don't need jQuery:
window.location = "index.php";
To do it after the page loads, add a $(document).ready() handler:
$(document).ready(function () {
window.location = "index.php";
});
Try, adding your page-id in the script with .live, something like this:
$('#mainpage').live('pageinit', function (event) {
alert("hi");
//$.mobile.changePage("index.php");
});
Here is the full example: http://jsfiddle.net/KyKFE/
On the other hand, you can also use just plain javascript function or php (if .php page) to do the redirection. They are many different ways to do this.
Please try this to end of your page and before </body> tag,
<script>
$(window).load("index.php", function() {
// stuff or not
});
</script>
I hope help you. :)

jquery mobile appending/prepending text

I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">