How to Escape Double Quotes on Prolog Web Server - server
I used the following Prolog code to display an HTML form with info_server(8000). but it doesn't work when a form item contains double-quotes. How can I escape the double quotes?
:- use_module(library(http/thread_httpd)).
:- use_module(library(http/http_dispatch)).
:- use_module(library(http/http_error)).
:- use_module(library(http/html_write)).
:- use_module(library(http/http_client)).
:- http_handler('/', info_web_form, []).
info_server(Port) :-
http_server(http_dispatch, [port(Port)]).
/*
browse http://localhost:8000/
*/
info_web_form(_Request) :-
format('Content-type: text/html~n~n', []),
data(Header,Footer),
Loads the header and footer of the web page, which it reuses on different pages
format(Header,[]),
Displays the header
middle_form,
Displays the form
format(Footer,[]).
Displays the footer
% When the form is submitted, it displays the landing page.
:- http_handler('/landing', landing_pad, []).
landing_pad(Request) :-
member(method(post), Request), !,
http_read_data(Request, Data, []),
format('Content-type: text/html~n~n', []),
Data=[input=Input1, info=Hidden1, submit=_],
format(Input1,[]),
format(Hidden1,[]),
Displays the hidden data from the form, which is cut off because it contains double-quotes.
data(Header,Footer),
format(Header,[]),
middle_form,
format(Footer,[]).
data(Header,Footer) :-
Header='<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Title</title>
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
img {
height: auto;
max-width: 100%;
object-fit: contain;
}
table {table-layout: fixed; width: 100%;}
td {word-wrap: break-word;}
-->
</style>
<!-- Displays text at readable size on both desktops and mobiles -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- salmon coloured -->
<body style="background-color: rgb(255, 239, 227);">
<div style="text-align: center;">
<table width="80%">
<tbody>
<tr>
<td>
<p>',
Footer='</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>'.
middle_form :-
Below is the hidden data, which is cut off with the double quote.
Hidden=[[a],"A",'a'],
term_to_atom(Hidden,Hidden1),
Hidden1=Hidden2,
concat_list(["
<form action=\"/landing\" method=\"POST\">
<label for=info></label>
<input type=text id=input name=input value=''><br><br>
<input type=hidden id=info name=info value=\"",Hidden2,"\"><br><br>
<input type=submit name=submit value='Submit'>
</form>
"],Form_text1),
The call to atom_string below displays the form as an atom.
atom_string(Form_text,Form_text1),
format(Form_text,[]).
The replace_new predicate replaces strings with strings in a string, for example
replace_new('0ab0','a','c',A).
A = "0cb0".
replace_new(A1,Find,Replace,F) :-
string_length(Replace,Replace_l),
string_concat("%",A1,A2),
string_concat(A2,"%",A), split_string(A,Find,Find,B),findall([C,Replace],(member(C,B)),D),maplist(append,[D],[E]),concat_list(E,F1),string_concat(F2,G,F1),string_length(G,Replace_l),
string_concat("%",F3,F2),
string_concat(F,"%",F3),!.
concat_list concatenates a list of strings to a string, for example:
concat_list(["a","b","c"],D).
D="abc"
concat_list([],""):- !.
concat_list(A1,B):-
concat_list("",A1,B),!.
concat_list(A,List,B) :-
concat_list1(A,List,B).
concat_list1(A,[],A):- !.
concat_list1(A,List,B) :-
List=[Item|Items],
string_concat(A,Item,C),
concat_list1(C,Items,B).
When I view the web page at http://localhost:8000/, the hidden info value is partially lost when displayed on the landing page.
I worked out how to escape the double quotes, and it involved changing the code above from:
Hidden1=Hidden2,
to:
replace_new(Hidden1,"\"",""",Hidden2),
Making these changes replaces double quotes with " and preserves the form data.
Note: This also assumes that the programmer uses double quotes around form data in <input type=hidden id=info name=info value=\"",Hidden2,"\">, eliminating single quotes in the data causing an error.
Related
Show footer only on last page
I'm using flyingsaucer 9.1.1 with itext 2.17 to generate pdf files. How can I show a footer (could be a div, a table or an img element) only on the last page but not on the other ones?
Unfortunately, CSS defines the page:first pseudo element, but doesn't define page:last.
You still have the possibility to take advantage of a bug of flying-saucer, that makes the footer only appear after it is declared. So if you put the footer div at the end of the HTML, it will only appear on the last page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.newpage{page-break-before:always}
#page{#bottom-center {content: element(footer)}}
#footer {position: running(footer);}
}
</style>
</head>
<body>
<div>Page 1 content</div>
<div class="newpage">Page 2 content</div>
<div class="newpage">Page 3 content</div>
<div id="footer">Footer on last page</div>
</body>
</html>
It also works if you want a footer on each page, with a different content for the last page. You just have to define the footer div twice in the HTML.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.newpage{page-break-before:always}
#page{
#bottom-center {content: element(footer)}}
#footer {position: running(footer);}
}
</style>
</head>
<body>
<div id="footer">Footer for all pages except last</div>
<div>Page 1 content</div>
<div class="newpage">Page 2 content</div>
<div class="newpage">Page 3 content</div>
<div id="footer">Footer on last page</div>
</body>
</html>
Codemirror display code from codemirror textarea
I'm getting plain text while displaying the code from the codemirror textarea and I want to that in the form of code highlighted format. Any plz help me.
I want to print highlighted code which was highlighted in the codemirror editor I'm getting that code from codemirror editor by using editor.getValue();:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo_Format</title>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="lib/util/formatting.js"></script>
<script src="lib/css.js"></script>
<script src="lib/xml.js"></script>
<script src="lib/javascript.js"></script>
<script src="lib/htmlmixed.js"></script>
<link rel="stylesheet" href="lib/docs.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
}
td {
padding-right: 20px;
}
</style>
</head>
<body>
<h1></h1>
<form>
<textarea id="code" name="code">
package org;import java.io.IOException;import javax.servlet.http.*;#SuppressWarnings("serial")
public class BasicChatServlet extends HttpServlet{public void doGet(HttpServletRequest req,HttpServletResponse resp)
throws IOException{resp.setContentType("text/plain");resp.getWriter().println("Hello, world");}}
</textarea>
</form>
<table>
<tr>
<td>
<a href="javascript:autoFormatSelection()">
<button> Format </button>
</a>
<button id="copy_button">copy</button>
<button id="show">show</button>
</td>
<div id="code_show">
</div>
</tr>
</table>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#copy_button").click(function(){
$("textarea").select();
document.execCommand('copy');
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: false,
indentUnit: 4
});
CodeMirror.commands["selectAll"](editor);
function getSelectedRange() {
return { from: editor.getCursor(true), to: editor.getCursor(false) };
}
function autoFormatSelection() {
var range = getSelectedRange();
var x=editor.autoFormatRange(range.from, range.to);
}
$("#show").click(function(){
var program=editor.getValue();
$("#code_show").text(program);
});
</script>
</body>
</html>
(Not sure if this answers your question because it's not very clear -- it would be helpful if you only provided the necessary code for the question)
Each mode (which styles your CodeMirror instance) lives in a subdirectory of the mode/ directory, and typically defines a single JavaScript file that implements the mode. Loading such file will make the language available to CodeMirror through the mode option, which you declare while creating your CodeMirror instance:
CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: false,
indentUnit: 4,
mode: 'text/css'
});
You'll need to ensure your different mode files are added to a mode folder in your library. In your case the css.js, xml.js, javascript.js and htmlmixed.js files need to be in a new folder called lib/mode (so css.js has a filepath of lib/mode/css.js for example).
You can inspect each mode's demo to see what string you must pass to the mode: option in order for it to be called. Here's the css demo for example
You can go one step further and change the mode on the fly for editing multiple text file-types: Multiple modes Codemirror
Simple HTML tags to form elements - LinkedIn Profile editing
Is there any plugin that transfoms html elements (span, div) into a form ? One example is when editing LinkedIn profile which convert the section to be modified into a form. Thanks all !
JQuery has the Wrap method, which you can use to throw the whole div / span into a form.
$('.inner').wrap('<form class="newform" action="..." method="..." />');
Found here: http://api.jquery.com/wrap/
Consider the following HTML:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Using .wrap(), we can insert an HTML structure around the inner elements like so:
$('.inner').wrap('<div class="new" />');
The new element is created on the fly and added to the DOM. The result is a new wrapped around each matched element:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
This will cause each to have a class corresponding to the text it wraps:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
Examples:
Example: Wrap a new div around all of the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrap("<div></div>");</script>
</body>
</html>
Populating a dojo combobox when dojo.ready (dojo 1.7)
I have a comboxbox loading its data from a url store. My code is below... What I noticed in Firebug is that the Combobox loads this info once I put the focus on it. I would love to have the Combobox to populate when the page is done loading.I am guessing I use dojo.ready for this? Does anyone have a suggestion as to how I would pull this off? Many thanks! Janie
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="lib/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</style>
<script src="lib/dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>require(["dojo/ready", "dojo/data/ItemFileReadStore", "dijit/form/ComboBox"]);
</script>
</head>
<body class="claro">
<label for="user">User: </label>
<div dojoType="dojo.data.ItemFileReadStore" url="test.json" jsId="countryStore">
<input dojoType="dijit.form.ComboBox" searchAttr="last_name" store="countryStore" class="selectionNav tableData" value="" name="last_name" id="test.json" />
</body>
</html>
your require function should look something like this
require(["dojo/ready", "dijit/registry", "dojo/data/ItemFileReadStore"],function(dom,reg,store){
var combo = dijit.byId("test.json");
var storeDate = new store({url:"path/to/file.json"});
try{
combo.store(storeData);
}catch(e){
combo.set("store",storeData)
}
});
the try catch statement is because I don't remember which is the correct one
GWT getAbsoluteLeft/Top returns wrong value in FF
when i call the getAbsoluteLeft/Top method i always get 0 in firefox. For the IE i get a value which seems to be correct. Are there known problems using these methods ? My problem is that i want to set the position of an element with the absolute position values of another element. Thanks in advance. Edit: Using GWT 2.0.3
kuku
EDIT Testcase:
1. The host page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="samplegwt/samplegwt.nocache.js"></script>
<script type="text/javascript" language="javascript">
function execute() {
var element = document.getElementById("paragraph");
if (element != undefined)
element.style.display = "block";
}
</script>
<STYLE TYPE="text/css">
#paragraph {
display: none;
}
</STYLE>
</head>
<body class="body" onload="execute()">
<div align="center">
<table>
<tr>
<td>
<p id="paragraph">
<input type="text" id="example" value="Foobar" > <img border="0" src="images/some.gif" alt="Test"></p>
</td>
</tr>
</table>
</div>
</body>
</html>
In the onModuleLoad() i simply do this: System.out.println(Document.get().getElementById("paragraph")
.getAbsoluteLeft());
Well as stated in the comments the problem was that the element is not visible which results into 2 different behavoirs for IE and FF.