I followed the trick for passing data to HTML webview from SO post How to pass parameter into HTML file from android.
I have this in my Java:
try {
String template = streamToString(getAssets().open("html/index.html"));
String data = template.replaceAll("%PARAMETER%", PARAMETER);
webView.loadDataWithBaseURL("file:///android_asset/html/", data, "text/html", "utf-8", null);
} catch (IOException e) {
e.printStackTrace();
}
In my HTML, I have the string "%PARAMETER%".
The solution works for my test device running Android 2.3.6, but didn't work in device running Android 4.1.1. The HTML have some CSS and JS files. Is the problem related to the content of the HTML page?
Any better approach on what I'm trying to achieve? Simple I just want to send data from Java to HTML webview.
This is the content of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Like a Pub</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$('#index-page').live('pageshow', function(event, data){
//
});
</script>
</head>
<body>
<div data-role="page" id="index-page">
%WEBSITE_URL%
</div>
</body>
</html>
Related
I am trying to use React to render my UI in Play framework, but it doesn`t work. The same code just saved as .html file and opened directly can works normally, but if I place it in my play framework project as path: ./app/views/hello.scala.html, it just show title normally but nothing shown on my page. Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="./react/react.js"></script>
<script src="./react/react-dom.js"></script>
<script src="./react/browser.min.js"></script>
<title>React Title</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
Please check weather all the js are loaded properly. check your assert path
<script src="assets/react/react.js"></script>
<script src="assets/react/react-dom.js"></script>
<script src="assets/react/browser.min.js"></script>
I'm researching building a simple web app using Polymer. I'd like to pass an numerical id to a custom component. I can accomplish this using JSP by adding the id to a map and passing it in to a Viewable:
private Response buildUI(LinkedHashMap<String, String> map) {
return Response.ok(new Viewable("/MyApp", map)).build();
}
I would prefer not to introduce JSP to handle a single value though.
Is there a simpler way to accomplish this?
The HTML code-in-progress is:
// MyApp.html
<html>
<head>
<title>iron-form demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="custom-form-element.html">
<link rel="import" href="custom-id-element.html">
</head>
<body unresolved>
<custom-form-element>
<template>
<form is="iron-form" method="get" action="/" id="basic">
<custom-id-element value="{id}"/>
<paper-button raised onclick="_submit(event)">Submit</paper-button>
</form>
<script>
function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
basic.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});
</script>
</template>
</custom-form-element>
</body>
</html>
It turns out the solution was simple using the Polymer component "app-route". My app is REST-based, and the ID is a resource, so it was logical to place it in the URI path:
<app-route
route="{{route}}"
pattern="/:id"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
Now I can databind to the id where I need it:
<iron-label>
route = {{routeData.id}}
</iron-label>
I have index.html and page.html
index.html has an anchor to page.html
I would the backbutton press and ask to the user if he really want go back to index.html
This is my code:
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.6.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
Go to page
</body>
</html>
page.html
<!DOCTYPE HTML>
<html>
<head>
<title>First App</title>
<script src="cordova-2.6.0.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready",onDeviceReady, true);
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");
}
function onBackKeyDown(e) {
navigator.notification.alert("PhoneGap back is working!!");
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap Page</h1>
<h2>Edit assets/www/page.html</h2>
</body>
</html>
The problem is that the back button press is not handled, but cordova is loaded correctly because I have the alert box showed.
What I am doing wrong?
I have a Samsung Google Nexus with Android 4.2.2
Thanks a lot.
Put your back button listener inside of the onDeviceReady function.
i am creating a web project using JSP, and is trying to implement a simple search for users from my database using jquery autocomplete, however i am having trouble understanding how it works. i have little to no knowledge on jquery and ajax just to let you know. i have done the following code and am stuck.
<%#page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,ewa.sendEmail,ewa.pwGen,ewa.hashPw,java.sql.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script src="js/jquery.autocomplete.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<input type="text" id="search" name="search"/>
<script>
$("#search").autocomplete("getdata.jsp");
</script>
</body>
</html>
getdata.jsp
<%#page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,java.sql.*" %>
<%! dbConnect db = new dbConnect(); %>
<%
String query = request.getParameter("q");
db.connect();
Statement stmt = db.getConnection().createStatement();
ResultSet rs = stmt.executeQuery("SELECT username FROM created_accounts WHERE username LIKE "+query);
while(rs.next())
{
out.println(rs.getString("username"));
}
db.disconnect
%>
if i am not wrong i read from a website, the parameter q is default and is just there, however how do i display the data? how do i pass the values from getdata.jsp into the autocomplete?
You're calling the autocomplete script tag before jQuery has been included. So, not having jQuery to latch onto (as the jQuery object hasn't been defined), nothing from the jQuery autocomplete plugin will load.
You have
<script src="js/jquery.autocomplete.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
It should be
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery.autocomplete.js"></script>
Reverse the order, and the Firebug errors you mentioned should disappear; I'm not sure it'll solve everything, but nothing will work until that's resolved.
I don't see jQuery UI being included (that one provides the autocomplete functionality)
http://jqueryui.com/demos/autocomplete/
So you need to include jquery.ui.autocomplete.js
(Or are you using the plugin autocomplete? if so, move to the jquery UI version)
Could also be that the data from getdata.jsp is malformed for the use in autocomplete.
How you tried debugging the javascript in a browser such as chrome or in firefox(with firebug)
I usual give (for jquery UI autocomplete) a JSON formatted answer, while I see your answer loop give a CR delimited list.
In getdata.jsp instead of produce:
jim<cr>
jack>cr>
jhon<cr>
try to return:
[{label: 'jim', value: 'jim'}, {label:
'jack', value: 'jack'}, {label:
'jhon', value: 'jhon'}]
Basically I want to do the same as here which is done in Python.
I'd like to replace all self-closed elements to the long syntax.
Example
<iframe src="http://example.com/thing"/>
becomes
<iframe src="http://example.com/thing"></iframe>
Full example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/sample.css">
<title></title>
<script type="text/javascript" src="/swfobject.js">
//void
</script>
<script type="text/javascript" language="JavaScript" src="/generate.js">
//void
</script>
<script type="text/javascript" language="JavaScript" src="/prototype.js">
//void
</script>
</head>
<body id="mediaPlayer" style="margin:0;padding:0;">
<script type="text/javascript">
swfobject.registerObject('id_G12564763');
function getFlashObject() {
var object;
if (navigator.appName == 'Microsoft Internet Explorer' || navigator.userAgent.indexOf("Chrome")!=-1)
{
object = document.getElementById('id_G12564763');
}
else
{
object = document['flash_id_G12564763'];
}
return object;
}
</script>
</body>
</html>
This can be used to replace one tag (code in javascript).
var becomes = "<iframe src='http://example.com/thing'/>".replace(/<(\w*) (.*)\//,'<$1 $2></$1')
The same, in Java.
String becomes = "<iframe src=\"http://example.com/thing\"/>".replaceFirst("<(\\w*) (.*)\\/", "<$1 $2></$1");
Ok guys. I found a workaround. I hooked the output method to xml where this html comes from and the XSLT engine takes care of closing those open tags for me. Thanks for answers, but if you happen to have a solution for the problem pls, leave your answer and I will mark it as an answer. This could be useful for others.
String resultHtml = inputHtml.replaceAll("(?six)<(\\w+)([^<]*?)/>", "<$1$2></$1>");
and this will properly handle tags that are not terminated like <hr> and <img>