Here is the code of my "app.js" :
var app = angular.module('WebUI',[]);
app.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
app.config(function($locationProvider){
$locationProvider.html5Mode(true);
});
Here is the code of my controller :
var Controller = function ($scope,$http)
{
$scope.thingsList=[];
$http({method: 'GET', url: 'http://192.168.1.4/search'}).success(function(data)
{
results=data.results;
angular.forEach(results,function(result)
{
$scope.thingsList.push(result.split('/')[1]);
});
}).error(function(data){});
}
Here is the code of my HTML page :
<!DOCTYPE html>
<head>
<title>All</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
</head>
<body>
HOME
<div id='content' ng-app='WebUI' ng-controller='Controller'>
<li ng-repeat="thing in thingsList">
{{thing}}
</li>
</div>
</body>
</html>
The point here is that I am generating the links using ng-repeat and the list that I get from my controller.js. But what happens is that : When I click "HOME" it gets redirects to the home page and when I click any of the "thing" i.e. generated link, then it throws an error :
Error: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///home/abc/home.html' cannot be created in a document with origin 'null'.
I tried searching online for this error but could not find anything useful. So if anybody knows where the problem is, please help :)
A history state object with URL 'file:///home/abc/home.html' cannot be created in a document with origin 'null'.
Seems you're using angular routing on file urls, and without a server.
Try with a server.
Actually found the answer to my own question.
I searched online and found that generating too many "file:///" links cause a security issue that's why they are not allowed.
Then I tried hosting it on a server http:// and testing, then the URL changed, but the page was not refreshed...so again error.
Then I found out that
`app.config(function($locationProvider){
$locationProvider.html5Mode(true);
});`
This portion of code was throwing errors due to which I was unable to use ng-route and other things.
But location needed this code to parse the get parameters in the URL, so I took reference from What's the most concise way to read query parameters in AngularJS? and I was able to pass the get parameters in the URL using another way like : url#/?target=bob and I was able to parse the parameters now.
So problem solved. $location was able to parse the parameters and I was also now able to access the links which earlier gave error.
try using ng-href
https://docs.angularjs.org/api/ng/directive/ngHref
Hope this helps.
Try using window location:
<li ng-repeat="thing in thingsList">
<a ng-click="gotoHome()">{{thing}}</a>
</li>
In JS,
$scope.gotoHome = function(){
window.location="#/home";
//Give your link above.
}
Hope it helps...
Related
I am building a flask website and am trying to make a search bar that is always on the top menù, I would have liked to handle it in the Python backend but I could not find a way to do that without including whithin each backed page the code to handle it (which if it is the only way is fine) so I decided to try making it work with JavaScript. This is my code (without the parts which I found unrelated to the problem):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="search" id="searchbar"/>
<button id="goto">Search</button>
</form>
<script>
document.getElementById("goto").addEventListener("click", goTo);
function goTo()
{
var result = document.getElementById("searchbar").value;
window.location.href = "/users/"+result;
}
</script>
</body>
</html>
What it is supposed to do is redirect me to "http://myip/users/WhatItyped" while it just adds "/?" to the end of the URL, any idea of why this is?
Update: I found out that if I add an alert before defining result it works
Try using window.location.pathname
JavaScript Window Location states href points to the full URL, including protocol & hostname. Since you are not changing either of those, you can just change the relative path from the root using pathname.
This has also been answered before:
How can I extract and then change the url path using javascript?
I have just started using page.js, a routing library that I intend to use to make a single page application with handlebars. I will use the routes to call different handlebar templates. So far, this functionality is working and is as quick as I had hoped.
I am currently encountering an issue where refreshing the page (pressing F5) or copying the URL, and pasting it into a new tab gives me a 404 not found error. It is not calling the not found page that I created in my app.
The code below is a copy of: https://github.com/visionmedia/page.js/tree/master/examples/notfound
<!DOCTYPE html>
<html>
<head>
<title>Not Found</title>
<script src="/page.js"></script>
</head>
<body>
<h1>Not Found</h1>
<p></p>
<ul>
<li>/</li>
<li>/about</li>
<li>/contact</li>
<li>/not-found</li>
</ul>
<script>
page.base('/notfound');
page('/', index);
page('/about', about);
page('/contact', contact);
page('*', notfound);
page();
function index() {
document.querySelector('p')
.textContent = 'viewing index';
}
function about() {
document.querySelector('p')
.textContent = 'viewing about';
}
function contact() {
document.querySelector('p')
.textContent = 'viewing contact';
}
function notfound() {
document.querySelector('p')
.textContent = 'not found';
}
</script>
</body>
When I refresh this page, I am presented with my localhost's 404 page. I get the same result when I use the link http://127.0.0.1/notfound/about.
My question is this: does page.js support refreshing the browser, or using links to access specific portions of my application?
It seems that the question I should really be asking is this: Would it be possible for the web server to redirect all navigation to the page that loads the application? The answer is Yes.
It seems that refreshing the browser would be a common case. An acceptable solution to this would also be to catch any refresh attempts, and redirect them to the main page. Using links to access specific portions of my application is not as crucial, but would be a nice touch.
function demoHTML(request, response)
{
var html = ' <html> <body> <h1>Hello World</h1> </body> </html>';
response.write( html );
//prefix header with Custom-Header. See nlobjResponse.setHeader(name, value)
response.setHeader('Custom-Header-Demo', 'Demo');
}
After deploying the Script the following error is coming...
ERROR
You are not allowed to navigate directly to this page
I had the same problem, make sure the Status is set to "Released".
As #Rockstar stated, check the Audience tab on your Script Deployment. Make sure that the applicable Roles or Employees are allowed to access the page, and make sure that the user/role that you are using have access as well. By default, no permissions are given to anyone on the Deployment.
I'm trying to solve a issue regarding to JSON data (getting and post it). Bellow I posted my code which doesn't work and I don't know why? I checked with Firebug and says that it's ok: 200 OK sourceforge.net 1.4 KB 216.34.181.60:80
What I'm trying to do, is to get some stats from a sourceforge project and put it into a div tag.
The link is a valid json (http://sourceforge.net/projects/rdss/files/stats/json?start_date=2010-12-01&end_date=2012-11-24).
<html>
<head>...</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$.getJSON("http://sourceforge.net/projects/rdss/files/stats/json?start_date=2010-12-01&end_date=2012-11-24", function(data) {
$.each(data.posts, function(i,data) {
var div_data = "<div>"+data.oses+"</div>";
$(div_data).appendTo("#testjson");
});
});
return false;
});
});
</script>
<div id="testjson"></div>
</body>
</html>
This is a cross domain issue. Check the console. You need write a proxy at the server side to get around. Based on your server side language, you can Google a proxy snippet.
You are trying to do a cross-browser request: http://en.wikipedia.org/wiki/Same-origin_policy.
So, getJSON is failing and trowing exception.. see "No 'Access-Control-Allow-Origin' header is present on the requested resource"
When this happens you can workaround using CORS.
But for this workaround work, you need server be CORS-enabled, what unfortunately sourceforge isn't.
You can see this by checking response header. It has the key Access-Control-Allow-Origin:*.
Usually, you can do this by accessing Developer Tools in Browsers:
- Select Network tab.
- Identify JSON page and select.
- Open Header tab
- Go to Response Headers section.
See an example:
I am having trouble displaying some jason from a page.
The data is there but I think it might have to do with this line:
document.write(fbResults.cats[0].title);
Here is the full html source:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON('http://mydomain.com/api/get_cats', function(fbResults) {
document.write(fbResults.cats[0].title);
});
});
</script>
</head>
<body>
</body>
</html>
And here is the data that it's reading:
{"cats":[
{"id":"1","title":"mytitle1","colour":"#EE297C"},
{"id":"2","title":"mytitle2","colour":"#EE412F"},
{"id":"3","title":"mytitle3","colour":"#F5821F"},
{"id":"4","title":"mytitle4","colour":"#00AEEF"},
{"id":"5","title":"mytitle5","colour":"#00B495"},
{"id":"6","title":"mytitle6","colour":"#006476"}
]}
It is not displaying anything on the page.
On firebug console I get this error:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.
No traces of the json data there
What I'm I doing whong?
You shouldn't document.write after the page has loaded (which is certainly the case here).
If you want to write it to the page, you'll need to create HTML and append it. Just replace the document.write:
$('body').append('<p>'+fbResults.cats[0].title+'</p>');
Update:
Your example makes a fully qualified URL call. Is that server the exact same one that you're running the page from? If it isn't the XHR will just eat the request (and sometime not tell you). If you need to go cross domain, you'll need to use JSONp. If you're attempting to run this locally while pulling data from the net, it'll break.
Try this
$.each(fbResults.cats,function(index,item){
document.write(item.title);
});
Working sample : http://jsfiddle.net/zWhEE/8/
its seems work for me please check this
http://jsfiddle.net/TxTCs/1/