I am using Jhipster Spring boot + angular 6. But i'm having trouble because of the hash(#) in URL. It is affecting SEO.
I tried setting useHash: false in app-routing-module.ts.
But then the API is not working when I run the project via npm start.
I think somewhere in Java files I have to change a configuration to remove # from the URL.
Here is my WebConfigurer code,
#Configuration
public class WebConfigurer implements ServletContextInitializer, WebServerFactoryCustomizer<WebServerFactory> {
private final Logger log = LoggerFactory.getLogger(WebConfigurer.class);
private final Environment env;
private final JHipsterProperties jHipsterProperties;
private MetricRegistry metricRegistry;
public WebConfigurer(Environment env, JHipsterProperties jHipsterProperties) {
this.env = env;
this.jHipsterProperties = jHipsterProperties;
}
#Override
public void onStartup(ServletContext servletContext) throws ServletException {
if (env.getActiveProfiles().length != 0) {
log.info("Web application configuration, using profiles: {}", (Object[]) env.getActiveProfiles());
}
EnumSet<DispatcherType> disps = EnumSet.of(DispatcherType.REQUEST, DispatcherType.FORWARD, DispatcherType.ASYNC);
initMetrics(servletContext, disps);
log.info("Web application fully configured");
}
/**
* Customize the Servlet engine: Mime types, the document root, the cache.
*/
#Override
public void customize(WebServerFactory server) {
setMimeMappings(server);
/*
* Enable HTTP/2 for Undertow - https://twitter.com/ankinson/status/829256167700492288
* HTTP/2 requires HTTPS, so HTTP requests will fallback to HTTP/1.1.
* See the JHipsterProperties class and your application-*.yml configuration files
* for more information.
*/
if (jHipsterProperties.getHttp().getVersion().equals(JHipsterProperties.Http.Version.V_2_0) &&
server instanceof UndertowServletWebServerFactory) {
((UndertowServletWebServerFactory) server)
.addBuilderCustomizers(builder ->
builder.setServerOption(UndertowOptions.ENABLE_HTTP2, true));
}
}
private void setMimeMappings(WebServerFactory server) {
if (server instanceof ConfigurableServletWebServerFactory) {
MimeMappings mappings = new MimeMappings(MimeMappings.DEFAULT);
// IE issue, see https://github.com/jhipster/generator-jhipster/pull/711
mappings.add("html", MediaType.TEXT_HTML_VALUE + ";charset=" + StandardCharsets.UTF_8.name().toLowerCase());
// CloudFoundry issue, see https://github.com/cloudfoundry/gorouter/issues/64
mappings.add("json", MediaType.TEXT_HTML_VALUE + ";charset=" + StandardCharsets.UTF_8.name().toLowerCase());
ConfigurableServletWebServerFactory servletWebServer = (ConfigurableServletWebServerFactory) server;
servletWebServer.setMimeMappings(mappings);
}
}
/**
* Initializes Metrics.
*/
private void initMetrics(ServletContext servletContext, EnumSet<DispatcherType> disps) {
log.debug("Initializing Metrics registries");
servletContext.setAttribute(InstrumentedFilter.REGISTRY_ATTRIBUTE,
metricRegistry);
servletContext.setAttribute(MetricsServlet.METRICS_REGISTRY,
metricRegistry);
log.debug("Registering Metrics Filter");
FilterRegistration.Dynamic metricsFilter = servletContext.addFilter("webappMetricsFilter",
new InstrumentedFilter());
metricsFilter.addMappingForUrlPatterns(disps, true, "/*");
metricsFilter.setAsyncSupported(true);
log.debug("Registering Metrics Servlet");
ServletRegistration.Dynamic metricsAdminServlet =
servletContext.addServlet("metricsServlet", new MetricsServlet());
metricsAdminServlet.addMapping("/management/metrics/*");
metricsAdminServlet.setAsyncSupported(true);
metricsAdminServlet.setLoadOnStartup(2);
}
#Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = jHipsterProperties.getCors();
if (config.getAllowedOrigins() != null && !config.getAllowedOrigins().isEmpty()) {
log.debug("Registering CORS filter");
source.registerCorsConfiguration("/api/**", config);
source.registerCorsConfiguration("/management/**", config);
source.registerCorsConfiguration("/v2/api-docs", config);
}
return new CorsFilter(source);
}
#Autowired(required = false)
public void setMetricRegistry(MetricRegistry metricRegistry) {
this.metricRegistry = metricRegistry;
}
}
Here is my AngularRouteFilter servlet code,
public class AngularRouteFilter extends OncePerRequestFilter {
// add the values you want to redirect for
private static final Pattern PATTERN = Pattern.compile("^/((api|swagger-ui|management|swagger-resources)/|favicon\\.ico|v2/api-docs).*");
#Override
protected void doFilterInternal(HttpServletRequest request,
HttpServletResponse response,
FilterChain filterChain)
throws ServletException, IOException {
if (isServerRoute(request)) {
filterChain.doFilter(request, response);
} else {
RequestDispatcher rd = request.getRequestDispatcher("/");
rd.forward(request, response);
}
}
protected static boolean isServerRoute(HttpServletRequest request) {
if (request.getMethod().equals("GET")) {
String uri = request.getRequestURI();
if (uri.startsWith("/app")){
return true;
}
return PATTERN.matcher(uri).matches();
}
return true;
}
}
here is my Swagger index.html(swagger-ui/index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href='./dist/css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='./dist/css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='./dist/css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='./dist/css/reset.css' media='print' rel='stylesheet' type='text/css'/>
<link href='./dist/css/print.css' media='print' rel='stylesheet' type='text/css'/>
<script src='./dist/lib/object-assign-pollyfill.js' type='text/javascript'></script>
<script src='./dist/lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='./dist/lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='./dist/lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='./dist/lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='./dist/lib/handlebars-4.0.5.js' type='text/javascript'></script>
<script src='./dist/lib/lodash.min.js' type='text/javascript'></script>
<script src='./dist/lib/backbone-min.js' type='text/javascript'></script>
<script src='./dist/swagger-ui.min.js' type='text/javascript'></script>
<script src='./dist/lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
<script src='./dist/lib/highlight.9.1.0.pack.js' type='text/javascript'></script>
<script src='./dist/lib/jsoneditor.min.js' type='text/javascript'></script>
<script src='./dist/lib/marked.js' type='text/javascript'></script>
<script src='./dist/lib/swagger-oauth.js' type='text/javascript'></script>
<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->
<script type="text/javascript">
$(function() {
var springfox = {
"baseUrl": function() {
var urlMatches = /(.*)\/swagger-ui\/index.html.*/.exec(window.location.href);
return urlMatches[1];
},
"securityConfig": function(cb) {
$.getJSON(this.baseUrl() + "/swagger-resources/configuration/security", function(data) {
cb(data);
});
},
"uiConfig": function(cb) {
alert(cb);
$.getJSON(this.baseUrl() + "/swagger-resources/configuration/ui", function(data) {
cb(data);
});
}
};
window.springfox = springfox;
window.oAuthRedirectUrl = springfox.baseUrl() + './dist/o2c.html'
window.springfox.uiConfig(function(data) {
window.swaggerUi = new SwaggerUi({
dom_id: "swagger-ui-container",
validatorUrl: data.validatorUrl,
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onComplete: function(swaggerApi, swaggerUi) {
initializeSpringfox();
if (window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
$('pre code').each(function(i, e) {
hljs.highlightBlock(e)
});
},
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none",
apisSorter: "alpha",
showRequestHeaders: false
});
initializeBaseUrl();
$('#select_baseUrl').change(function() {
window.swaggerUi.headerView.trigger('update-swagger-ui', {
url: $('#select_baseUrl').val()
});
addApiKeyAuthorization();
});
function addApiKeyAuthorization() {
var authToken = JSON.parse(localStorage.getItem("jhi-authenticationtoken") || sessionStorage.getItem("jhi-authenticationtoken"));
var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + authToken, "header");
window.swaggerUi.api.clientAuthorizations.add("bearer", apiKeyAuth);
}
function getCSRF() {
var name = "XSRF-TOKEN=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) !== -1) return c.substring(name.length,c.length);
}
return "";
}
function log() {
if ('console' in window) {
console.log.apply(console, arguments);
}
}
function oAuthIsDefined(security) {
return security.clientId
&& security.clientSecret
&& security.appName
&& security.realm;
}
function initializeSpringfox() {
var security = {};
window.springfox.securityConfig(function(data) {
security = data;
if (typeof initOAuth === "function" && oAuthIsDefined(security)) {
initOAuth(security);
}
});
}
});
function maybePrefix(location, withRelativePath) {
var pat = /^https?:\/\//i;
if (pat.test(location)) {
return location;
}
return withRelativePath + location;
}
function initializeBaseUrl() {
var relativeLocation = springfox.baseUrl();
$('#input_baseUrl').hide();
$.getJSON(relativeLocation + "/swagger-resources", function(data) {
var $urlDropdown = $('#select_baseUrl');
$urlDropdown.empty();
$.each(data, function(i, resource) {
var option = $('<option></option>')
.attr("value", maybePrefix(resource.location, relativeLocation))
.text(resource.name + " (" + resource.location + ")");
$urlDropdown.append(option);
});
$urlDropdown.change();
});
}
});
</script>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io">swagger</a>
<form id='api_selector'>
<div class='input'>
<select id="select_baseUrl" name="select_baseUrl"></select>
</div>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/>
</div>
</form>
</div>
</div>
<div id="message-bar" class="swagger-ui-wrap" data-sw-translate> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>
here is docs.component.html
<iframe src="swagger-ui/index.html" width="100%" height="900" seamless
target="_top" title="Swagger UI" class="border-0"></iframe>
here my server code is running perfectly # localhost:6060. Butm localhost:6060/api/docs opening a blank page.
here is the screen shot,
Please suggest me where i am doing wrong.
Solution using a servlet filter
First step is to configure client, set useHash: false in app-routing-module.ts
In index.html, change <base href="./" /> to <base href="/" />
But it's not enough because it does not support deep linking which means linking to a client route from an external link like from a mail message or from another web site, or veen when refreshing page in browser.
When deep linking, the server receives the request first and if the URL has to be handled by client side, it will not be found so our server app must detect whether the URL has to be served as-is by server (e.g. all API calls) or forwarded to index.html so that the javascript app can interpret it.
One solution is to use pattern matching in a servlet filter (Html5RouteFilter) that we register in WebConfigurer.java
WebConfigurer.java
#Bean
public Html5RouteFilter html5RouteFilter() {
return new Html5RouteFilter();
}
Html5RouteFilter.java
package com.mycompany.myapp.web;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.filter.OncePerRequestFilter;
import javax.servlet.FilterChain;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.regex.Pattern;
/**
* Filter that distinguishes between client routes and server routes when you don't use '#' in client routes.
*/
public class Html5RouteFilter extends OncePerRequestFilter {
private Logger log = LoggerFactory.getLogger(getClass());
// These are the URIs that should be processed server-side
private static final Pattern PATTERN = Pattern.compile("^/((api|content|i18n|management|swagger-ui|swagger-resources)/|error|h2-console|swagger-resources|favicon\\.ico|v2/api-docs).*");
#Override
protected void doFilterInternal(HttpServletRequest request,
HttpServletResponse response,
FilterChain filterChain)
throws ServletException, IOException {
if (isServerRoute(request)) {
filterChain.doFilter(request, response);
} else {
RequestDispatcher rd = request.getRequestDispatcher("/");
rd.forward(request, response);
}
}
protected static boolean isServerRoute(HttpServletRequest request) {
if (request.getMethod().equals("GET")) {
String uri = request.getRequestURI();
if (uri.startsWith("/app")) {
return true;
}
return PATTERN.matcher(uri).matches();
}
return true;
}
}
Solution using a REST controller
First step is to configure client, set useHash: false in app-routing-module.ts
In index.html, change <base href="./" /> to <base href="/" />
But it's not enough because it does not support deep linking which means linking to a client route from an external link like from a mail message or from another web site, or veen when refreshing page in browser.
When deep linking, the server receives the request first and if the URL has to be handled by client side, it will not be found so our server app must detect whether the URL has to be served as-is by server (e.g. all API calls) or forwarded to index.html so that the javascript app can interpret it.
ClientRouteForwarder .java
package com.mycompany.myapp.web.rest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
/**
* A REST controller that forwards all GET requests that did not match a RequestMapping to /index.html so that
* client routes can be handled by client code in browser.
*
* This works because Spring resolves exact matches first.
*/
#Controller
public class ClientRouteForwarder {
#GetMapping(value = "/**/{[path:[^\\.]*}")
public String forward() {
return "forward:/";
}
}
As per their official documentation Configuring html5, AngularJS uses a “#” in it’s urls. HTML5Mode of AngularJS removes these “#” from URL.
Activate HTML 5 Mode
Create html5.mode.config.js file in webapp/app/blocks/config/ directory:
(function() {
'use strict';
angular
.module('<YourAppName>')
.config(html5ModeConfig);
html5ModeConfig.$inject = ['$locationProvider'];
function html5ModeConfig($locationProvider) {
$locationProvider.html5Mode({ enabled: true, requireBase: true });
}
})();
Then open index.html and add this line in head tag:
<base href="/">
I'm having a JSP page as follows :
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Tools</title>
<jsp:include page="/basic/nav.jsp"/>
<link rel="stylesheet" type="text/css" href="tools.css"/>
</head>
<body>
<div class="container">
<h2>Admin Tools</h2>
<br/><br/><br/><br/>
<%#page import="java.sql.ResultSet"%>
<%
boolean def_admin = false, def_admin_changed = false;
conn.connect.main(null);
conn.dbc.main(null);
ResultSet rstools = conn.connect.st.executeQuery("select * from admins where uname='admin'");
if (rstools.next()) {
if (rstools.getString("uname").equals("admin") && rstools.getString("password").equals("123")) {
def_admin = true;
}
if (rstools.getString("uname").equals("admin") && !rstools.getString("password").equals("123")) {
def_admin_changed = true;
}
}
%>
<%if (def_admin == false) {%>
Add Default Admin Account :<br/>
<input type="button" value="Add" onclick="<% add_admin(); %>"/>
<% } else if (def_admin == true && def_admin_changed == false) { %>
Delete Default Admin Account :<br/>
<input type="button" value="Delete" onclick="<% delete_admin(); %>"/>
<% } else if (def_admin == true && def_admin_changed == false) { %>
The Default Admin Password Exists but the password has been changed<br/>
Do you still want to delete the Default Admin Account?<br/>
<input type="button" value="Even so, Delete it" onclick="<% delete_admin(); %>"/>
<% }%>
<div id="tools_error"></div>
<%!
boolean insert_success = false;
void add_admin() {
try {
int Urows;
Urows = conn.connect.st.executeUpdate("insert into admins(uname,password) values('admin','123');");
if (Urows == 1) {
insert_success = true;
} else {
insert_success = false;
}
%>
<script>
(function () {
boolean i_s = "<%=insert_success%>";
if (i_s == false) {
document.getElementById("tools_error").value = "There has been an error in Adding Default Admin";
}
});
</script>
<%!
} catch (Exception e) {
}
}
void delete_admin() {
}
%>
</div>
</body>
<jsp:include page="/basic/footer.jsp"/>
</html>
As you can see when the button is clicked I have made it to run the declared JSP functions. But when the JSP file is loaded the functions run automatically and the insert MYSQL query runs which automatically inserts the values given in the query.
I don't want it the functions add_admin() and delete_admin() to run automatically on load. Any suggestions?
The events in the webpage (onclick event for example) is executed client side when someone opens your webpage and clicks the button. The JSP scriplets are executed when the webpage is opened and their result is the actual page that the client receives. So your method executes ONLY when the page is loaded (and the JSP is compiled). The java code is not even visible in the webpage you generate. If you open it in browser and check the source you will see what I mean.
TL;DR: You can't
Your Java code is executed once, when the page is loaded. The page is not on the server anymore, so you can't use its back-end capabilities. Otherwise, that would mean someone reewriting your HTML could make your page execute any code on your back-end.
Once your page is loaded, all there is on it is HTML and Javascript (CSS if you want to bicker).
I am having difficulty getting a share on LinkedIn. I am trying to post a LinkedIn share update via its Share on LinkedIn API. Does anyone can tell me how to post on linked share update and give me steps to manage it.
First you have to sign into LinkedIn Developers and create an app to get the API code specific to your application: Login Here
Then, the quickest way for you to learn is to look at some examples. Here is a working version of what you are trying to code: http://datopstech.com/linkedin-share-tool/
The only thing you NEED to change to get this code running for yourself is the API_Key found in the HTML snippet.
The source for this can be found here or, I copied and pasted relevant pieces below for reference:
$(document).ready(function(){
$("#submit_button").click(function organizeinput(){
if (IN.User.isAuthorized() == true){
var values = new Array();
//comment, title, description, image-content, image-url
// Get the parameters as an array
values = $(":input").serializeArray();
// Find and replace `content` if there
var countinput=0;
for (index = 0; index < values.length; ++index)
{
if (values[index].name == "comment" && values[index].value != "")
{
var comment;
comment = values[index].value;
countinput=countinput+1;
}
if (values[index].name == "title" && values[index].value != "")
{
var title;
title = values[index].value;
countinput=countinput+1;
}
if (values[index].name == "description" && values[index].value != "")
{
var description;
description = values[index].value;
countinput=countinput+1;
}
if (values[index].name == "image-content" && values[index].value != "")
{
var imagecontent;
imagecontent = values[index].value;
countinput=countinput+1;
}
if (values[index].name == "image-url" && values[index].value != "")
{
var imageurl;
imageurl = values[index].value;
countinput=countinput+1;
}
}
if (countinput == 5){
var postcontent = new Array();
postcontent = {"comment": comment, "content": {"title": title,"description": description,"submitted-url": imagecontent,"submitted-image-url": imageurl},"visibility": {"code": "anyone"} };
postcontent = JSON.stringify(postcontent);
shareContent(postcontent);
}
else alert("All the fields are required.");
}
else alert("You have to login to linkedin before you can post content.");
});
function onLinkedInLoad() {
IN.Event.on(IN, "auth", organizeinput);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
alert("Post Successful!");
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
alert("Oh no, something went wrong. Check the console for an error log.");
}
// Use the API call wrapper to share content on LinkedIn
function shareContent(pcontent) {
IN.API.Raw("/people/~/shares?format=json")
.method("POST")
.body(pcontent)
.result(onSuccess)
.error(onError);
}
//function executepost (pcontent)
//{
//$.post("https://api.linkedin.com/v1/people/~/shares?format=json", postcontent, function() {return null;});
// Setup an event listener to make an API call once auth is complete
//}
});
/*
$.ajax({
url: "https://api.linkedin.com/v1/people/~/shares?format=json",
type: 'post',
data: postcontent,
headers: {
'Content-Type': 'application/json',
'x-li-format': 'json'
},
dataType: 'json',
success: function (data) {
console.info(data);
}
});*/
// Convert to URL-encoded string
//values = jQuery.param(values);
/*
if (crflag ==1)
{
$.post("index.php", values, function(response) {processdata(response); return response;});
}
else
{
alert("Sorry, looks like we are missing some input");
}
//$.post("db_insert.php", $(":input").serializeArray(), function(tabledata){$("#result").html(tabledata);});
*/
Status API Training Shop Blog About Pricing
© 2016 GitHub, Inc. Terms Privacy Security Contact Help
<DOCTYPE html>
<html lang="en">
<head>
<title>Linkedin Share Link With Image, Choose Picture for Hyperlink Thumbnail, JSON Post Developer, Web Tool, Without Meta Property og: tag Online</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- add jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- add bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- user typed js for form -->
<script src="postscript.js"></script>
<!-- initialize LinkedIn JS SDK -->
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: //YOUR API KEY HERE
authorize: true
//onLoad: onLinkedInLoad
</script>
</head>
<body>
<div class="wrap">
<h1 align="center">Create An Advanced LinkedIn Post</h1>
<p align="center">Configure a share post for Linkedin. First, authorize through LinkedIn by logging in.</br> Then, fill out all of the fields below and click submit to share the content.</br></br><script type="in/Login"></script></p> <br><br>
<div class="col-md-4"><!--quick spacer :)--></div>
<div class="col-md-5">
<form name="post_content" action="" method="post">
<label for="comment">Comment: </label>
<input type="text" class="form-control" name="comment" placeholder="Comment" required></input><br>
<label for="title">Title: </label>
<input type="text" class="form-control" name="title" placeholder="Title" required></input><br>
<label for="description">Description: </label>
<input type="text" class="form-control" name="description" placeholder="Description" required></input><br>
<label for="image-content">Link to Content: </label>
<input type="text" class="form-control" name="image-content" placeholder="http://example.com/content" required></input><br>
<label for="image-location">Image Location: </label>
<input type="text" class="form-control" name="image-url" placeholder="http://example.com/images/example.jpg" required></input><br><br>
<input type="button" id="submit_button" value="Submit" class="btn btn-default"></input>
</form>
</div>
</div>
</div>
<div id="VINoutput"></div>
</body>
</html>
Just use a URL like this...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Source: Microsoft LinkedIn Share URL Documentation.
For example, this works for me:
https://www.linkedin.com/sharing/share-offsite/?url=http://www.wikipedia.org/
Demonstration:
I have a script thats using papa parse to check for an entry in a CSV file, then redirecting based on if its there or not. It works perfectly fine in chrome on my desktop, has a few issues on firefox on my desktop, and completly doesnt work on my chrome browser on my android.
<body>
<form id="usrform">
<td><label>Unique ID</label></td>
<tr>
<td colspan="2"><input class="textBox" id="uniqueID" type="text" maxlength="30" required/></td>
</tr>
</form>
<button onclick="processClick()">Proceed</button>
</body>
<!-- Jquery import -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Papa Parse CSV -->
<script src="http://localhost/client/js/papaparse.min.js"></script>
<div id="loading" style="background:url(/images/loading.gif) no-repeat center center;width:20px;height:20px; visibility:hidden">
<img src="/images/loading.gif">
</div>
<script>
// hide loading icon
document.getElementById("loading").style.visibility = "hidden";
function processClick()
{
document.getElementById("loading").style.visibility = "visible";
if (document.getElementById("uniqueID").value == '' )
{
alert("Please fill in the uniqueID field");
document.getElementById("loading").style.visibility = "hidden";
}
else
{
parseData(**client site**/csv/csv.csv", searchArray);
}
}
function parseData(url, callBack) {
Papa.parse(url, {
download: true,
dynamicTyping: true,
complete: function(results) {
alert("parsed ready to callback");
//callBack(results.data);
}
});
}
function searchArray(data) {
//Data is usable here
console.log(" searching array");
for (a = 0; a < data.length; a++)
{
if (data[a][1] == document.getElementById('uniqueID').value)
{
// redirect
var target = "**clientsite**" + document.getElementById('uniqueID').value + ".html";
window.location.assign(target);
break;
}
else
{
console.log(" redirecting on fail");
// redirect to failure page
}
}
}
</script>
I used alerts to see where it stopped working on mobile, and it appears that the function parseData(url, callBack) { is not returning a value(whether its processing or not i cannot tell).
This works perfectly on chrome/desktop, which is the confusing part!
I imagine im missing something stupid here.
There was my error i didnt catch when uploading from testing on my local server. It was working as it could see my localhost file, but it wouldnt for anyone else!
I have a web interface through which I can perform/apply actions on backend systems like Hadoop. I am trying to code a functionality which allows me to track the status of the server. Basically to see if the server/service is up or down. I need to do this every 2 minutes. So should I go with a Websocket or a SSE(Server Sent Event) for this..I have written this code to perform this. However the moment I code for checking the status every 2 minutes. It becomes a blocking call and I am unable to perform any other functionality of the Web UI
Following is the Code
import java.io.*;
import java.net.*;
import java.util.concurrent.TimeUnit;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
#ServerEndpoint("/echo")
public class Websocket {
#OnOpen
public void onOpen(Session session){
System.out.println(session.getId() + " has opened a connection");
try {
session.getBasicRemote().sendText("Connection Established");
} catch (IOException ex) {
ex.printStackTrace();
}
onping(session);
}
public void onping(Session session) throws IOException
{ if (session.isOpen())
{
session.getBasicRemote().sendText("In PING");
String ip = "200.168.100.46";
InetAddress inet = InetAddress.getByName(ip);
if(inet.isReachable(1000))
{
session.getBasicRemote().sendText("Alive");
}
}
else
{
System.out.println("Error");
}
}
#OnClose
public void onClose(Session session){
System.out.println("Session " +session.getId()+" has ended");
}
}
And the Client Side Code is
<!DOCTYPE html>
<html>
<head>
<title>Websocket</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>
<input type="text" id="messageinput"/>
</div>
<div>
<button type="button" onclick="openSocket();" >Open</button>
<button type="button" onclick="closeSocket();" >Close</button>
<button type="button" onclick="pingSocket();" >Ping</button>
</div>
<!-- Server responses get written here -->
<div id="messages"></div>
<!-- Script to utilise the WebSocket -->
<script type="text/javascript">
var webSocket;
var messages = document.getElementById("messages");
function openSocket(){
// Ensures only one connection is open at a time
if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
writeResponse("WebSocket is already opened.");
return;
}
// Create a new instance of the websocket
webSocket = new WebSocket("ws://localhost:8080/Websocket/echo");
/**
* Binds functions to the listeners for the websocket.
*/
webSocket.onopen = function(event){
// For reasons I can't determine, onopen gets called twice
// and the first time event.data is undefined.
// Leave a comment if you know the answer.
if(event.data === undefined)
return;
writeResponse(event.data);
};
webSocket.onmessage = function(event){
writeResponse(event.data);
};
webSocket.onclose = function(event){
writeResponse("Connection closed");
};
}
/**
* Sends the value of the text input to the server
*/
function send(){
var text = document.getElementById("messageinput").value;
webSocket.send(text);
}
function pingSocket(){
var text = document.getElementById("messageinput").value;
webSocket.send("PING");
}
function closeSocket(){
var text = document.getElementById("messageinput").value;
webSocket.send(text);
webSocket.close();
}
function writeResponse(text){
messages.innerHTML += "<br/>" + text;
}
</script>
</body>
</html>
So can you let me know what am i doing wrong?
Thanks