Getting "#" along with URL while running angular application in web browser - java

I have created an application using angularJS framework. While running application on web browser, i am gettting # along with my url. I tried the following below,
var app = angular.module('missingFound', ['ngRoute','ngCookies','UserModel','homeController','DashBoardContrl','TimeLineContrl','MissingPostContrl','FoundPostContrl','GisContrl'])
.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider.when('/', {
templateUrl : 'views/home.html',
controller : 'homeCtrl'
})
.when('/dashboard',{
templateUrl: 'views/dashboard.html',
controller : 'dashboardCntr',
authenticated : true
})
.when('/timeline',{
templateUrl : 'views/timeline.html',
controller : 'timelineCntr',
authenticated : true
})
.when('/missingForm',{
templateUrl : 'views/missingForm.html',
controller : 'missingCntr',
authenticated : true
})
.when('/foundForm',{
templateUrl : 'views/foundForm.html',
controller : 'foundCntr',
authenticated : true
})
.when('/gisPage',{
templateUrl : 'views/gis.html',
authenticated : true
})
.otherwise({
redirectTo:"/"
});
$locationProvider.html5Mode(true);
/* $locationProvider.html5Mode({
enabled: true,
requireBase: false
});*/
}])
.run(['$rootScope','$location','AuthService',
function($rootScope,$location,AuthService){
$rootScope.$on("$routeChangeStart", function(event, next, current){
if(next.$$route.authenticated){
if(!AuthService.getAuthStatus()){
$location.path('/');
}
}
if(next.$$route.originalPath == '/'){
console.log('Login Page');
if(AuthService.getAuthStatus()){
$location.path(current.$$route.originalPath);
}
}
})
}]);
My URL is looking like this - http://localhost:7080/Police4/#/
Its working fine after login when i am navigating to different hmtl page via routing but when i am trying to copy the URL path and opening in differnt tab its showing page not found.
Before with '#' it is working fine, but URL is looking ugly.

Angular's routing URLs by default all put a # character to separate the part controlled by Angular from the rest of the URL. This is needed on some older browsers which did not allow changing the main part of the URL without reloading the page.
You can get rid of this by enabling html5 mode. See, for example, https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
however you will also need to configure your server to recognise the Angular URLs and send the main page for your application even when a URL appears to refer to a sub-page.

Hi This will help you ,
Add this code to your project ,
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
Read
https://docs.angularjs.org/guide/$location

Related

Java Play Framework 2.6 does not return `Access-Control-Allow-Origin` CORS header

Play does not honor my application.conf configuration to return a Access-Control-Allow-Origin header. When I send a request from Ajax, the response is always:
Failed to load http://localhost:9000/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
This is what my application.conf looks like:
# disable the built in filters
play.http.filters = play.api.http.NoHttpFilters
play.filters.enabled += "play.filters.cors.CORSFilter"
play.filters {
cors {
# The allowed origins. If null, all origins are allowed.
allowedOrigins = null
}
}
The only way I have succeeded in getting the Ajax request through, is by adding the line response().setHeader("Access-Control-Allow-Origin", "*"); in the controller. But I want to do it through application.conf so I don't have to add this setHeader() code in all the controllers.
public class HomeController extends Controller {
public Result index() {
// this is the only hack that works
//response().setHeader("Access-Control-Allow-Origin", "*");
return ok(
Json.toJson("A long time ago in a galaxy far, far away....")
);
}
}
My Ajax request looks like this:
$.ajax({
url: "http://localhost:9000",
type: "GET",
dataType: 'json',
success: function(_out) {
alert(_out);
},
fail: function() {
alert("error");
}
});
Why is Play not honoring my application.conf configuration for CORS?
I have determined the problem. In my application.conf:
play.http.filters = play.api.http.NoHttpFilters
play.filters.enabled += "play.filters.cors.CORSFilter"
These two lines are not additive. In other words, the first line disables all filters and the second line enables a filter, but the end result is still that all filters are disabled (even though ENabling comes AFTER DIsabling).

Extjs and Spring MVC XMLHttpRequest cannot load Response for preflight has invalid HTTP status code 403

When I call from sencha:
proxy: {
type: 'ajax',
url: 'http://localhost:8585/academy/api/alumno/list/',
reader: {
type: 'json',
rootProperty: 'alumnos'
}
},
I receipt on spring mvc:
#Controller
#RequestMapping("/alumno")
public class AlumnoController {
#Autowired
AlumnoApi alumnoApi;
#RequestMapping(value = "list", produces = "application/json")
#ResponseBody
public List<DtoAlumno> findAll(){
return alumnoApi.findAll();
}
Showing the following error
XMLHttpRequest cannot load http://localhost:8585/academy/api/alumno/list/?_dc=1467319530160. Response for preflight has invalid HTTP status code 403
if I open the address: http://localhost:8585/academy/api/alumno/list/?_dc=1467319530160 in the browser shown json file correctly
I have activated the plugin Toggle CORS, if I turn off Toggle shows an error CORS.
I fixed this issue on a server where the services are on the same server but the DB is not.
Setup:
Ubuntu 14 server (not on localhost)
Tomcat running on port 8080 (application runs standard port 80 outside tomcat)
Domain assigned to IP of server (root reaches application, :8080 reaches tomcat services)
.htaccess file to limit access to services.
Problem
Calling Extjs.dataStore.read() would throw a 400 series error with preflight error having invalid HTTP. (same as OP above)
Solution
Update .htaccess file to include proxy rewrite and don't use port in URL for datastore.
The base URL within the browser must match your pre-service call, port and all, for the URL given to the Extjs.dataStore.proxy.url
Example:
URL in browser:
http://localhost:5517/MyApp //(this is your EXTJS app location note the port number)
In Extjs:
Ext.define('MyApp.store.myDataStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.myDataStoreModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'myDataStore',
autoLoad: true,
model: 'MyApp.model.myDataStoreModel',
proxy: {
type: 'ajax',
url: 'http://localhost:5517/mainservice/subservice?q=test', //URL localhost:<port> needs to match URL in browser (or use domain without ports)
reader: {
type: 'json',
rootProperty: function(data) {
console.info('data ='); console.info(data); return data; //show raw return
}
}
}
}, cfg)]);
}
});
//Ext.StoreMgr.get('myDataStore').read(); //to call read event
in .htaccess file:
Options +FollowSymLnks
RewriteEngine on
RewriteRule ^mainservice/subservice(.*)$ http://localhost:8585/mainservice/subservice$1 [P]
Worth noting,
I cannot test this in localhost as my spring services are attached to other servers / databases outside what I can reach with a localhost.
The moment the browser's URL doesn't match the URL referenced in the proxy spring will give the error you have above.
I don't know if this will help you as you don't appear to be using an .htaccess file but it could help others who are experience similar issues as it was how I found your post.

Not fetching dynamic dropdown using jquery spring mvc and hibernate

While click on an add button i have given the jquery code to navigate next page.
Here is my jQuery code:
$("#id-add-mer").click(function(){
location.href="../ecom/addMer";
});
here is my controller:
#RequestMapping(value = "/addMer", method = RequestMethod.GET)
public String addMerchant() {
return "merchantRegistration";
}
here it redirects to that page, but i have 3 dynamically fetching dropdown inside this page. i'm trying to fetch the values by adding an onload event in the body tag. here is my ajax code
function loadDropDown(){
$.ajax({
type: 'POST',
url: "ecom/loadInd",
data: {},
dataType: "json",
success: function(data) {
count = Object.keys(data).length;
$("#id-industry").empty();
for(i=0;i<count;i++){
$("#id-industry").append('<option value="'+data[i].id+'">'+data[i].type+'</option>');
}
loadBank();
},
error: function(jqXHR, textStatus, errorThrown) {
alert("1Server Exception");
}
});
}
i'm making an ajax call to fetch 2nd dropdown at the success of 1st call. while loading this page as welcome file displays the fetched dropdowns, i'm using spring mvc and hibernate to retrieve the records. But here i'm getting the error. Can anyone tell me how can i fix this issue..Thanks in advance...
Its better if you can mention here, what you get as error message in your code. Otherwise try to follow below steps to identify the issue.
First of all you better check whether your http request can access your server. you can use third party tools as well as built-in element viewer for that.
if there is no issue with communication with controller then check the what will return from "/loadInd". Simply you can debug or you can use alert box to inside success block.
Happy Coding....

XPages and REST : Error 500 from IBM Notes Client

i'm trying to get a JSON representation of a view with an ajax request from a XPage.
First of all, i did it with the following url https://myserver/mydb/myview?readviewentries&outputformat=JSON&count=-1.
It works in browsers but not in IBM Notes Client (my application have to work in the both), i got an error 404, i read on internet that we can't use that syntax in the Notes client. So i tried to use the restService element from XPages to get my JSON.
I create a XPage with the following code :
<xe:restService id="restService1" pathInfo="JoursFeries">
<xe:this.service>
<xe:viewJsonService defaultColumns="true"
databaseName="Applis/JoursFeries.nsf" viewName="JoursFeries">
</xe:viewJsonService>
</xe:this.service>
</xe:restService>
I changed my URL to call my Rest service like that : myXpage.xsp/JoursFeries (My new XPage is on the same database as the calling XPage). One more time, it works on browsers but still not in IBM Notes client. I called it like that :
var feries = {
url : "xRestJoursFeries.xsp/JoursFeries",
handleAs : "json",
sync : true,
preventCache : this.urlPreventCache,
load : function(json) {
// My callback function
}
}
dojo.xhrGet(feries);
When I activate my XPage debugger in Notes client, I just can see that the page returns an error 500, my console just said that :
WARNING CLFAD####W: State data not available for /xRestJoursFeries because no control tree was found in the cache. ::class.methot=com.ibm.xsp.application.ViewHandlerExImpl_restoreView() ::thread=Thread-348 ::loggername=anonymous
I tried many parameters on my XPages which provides the REST service, but without success.
Thank you in advance.
The URL's in xPINC are different. You will need to change the URL's. Check this page for some info.
http://xomino.com/2013/02/03/xpinc-browser-url-format-and-why-my-demo-failed-at-ibmconnect-part-2/
You could utilize #ClientType() in an if statement to choose onee URL over another.
You could also run xpages on the server and the app would work in both.

jQuery cannot access java webservice

I'm trying to write a simple 'proof of concept' front end for our webservice. The webservice is a java webapp returning simple xml running in tomcat.
The front end consists of simple html pages with some jquery functions. I'm developing the pages on my local machine while the webservice runs on one of our servers.
Basically this is what I do:
var url = "http://ourserver.com:51088/service/action/?param=123";
$.get(url,function(data,status) {
alert("Data: " + data + "\nStatus: " + status);
});
When I put the url in the Firefox address bar, I get the resulting xml.
When I run the jquery code Firebug shows the resulting xml, but the alert never shows.
Thinking it might be a cross-browser scripting problem, I wrote a little node.js proxy server that passes any localhost:51088/path to ourserver.com:51088/path. So I changed the url var to
var url = "http://localhost:51088/service/action/?param=123";
Again, testing this url in the browser results in the xml. So the node.js proxy server is working fine.
When I run the jquery code in Firebug I now consistently get Reload the page to get source for: http://localhost:51088/.....
I'm at a loss now.
UPDATE: after reading more I changed the jquery code to:
$.ajax( {
type: "GET",
contentType: "application/xml",
url: url,
datatype: "text xml",
xhrFields: {
withCredentials: true
},
succes: function(xml) { alert(xml) },
error: function(obj, status, err) { alert ("error\nstatus: " + status + "\nerr: " + err)}
});
Now it doesn't matter if I use the remote url or the local url. Both return the xml in the console log, but the success function is still not called.
You misspelled the "success" option.
Seems to me your proxy is not working as you expect.
And as to your first problem, seems to me that it is cross-domain request issue.

Categories