I'm trying to download a XML file via a jquery .get() request. unfortunately the returned data seems to be empty (0 length string), even if the browser downloads correctly the XML file (the request returns a 200 http code via firebug)
here's my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
Test sportevai<br/>
<script type="text/javascript" src="http://risultati.sportevai.it/sportevai_widget.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get('http://servername.com/xml/10225.xml', function(data) {
alert(data.length);
$('.xcf').html(data);
});
});
</script>
<div id="xcf">div response</div>
</body>
</html>
You can't get XML from a remote domain like this, you can only fetch JSONP. The same-origin policy prevents it. What will happen is exactly what you're experiencing, everything will appear normal except that the response will be empty.
You'll have to proxy the request through your domain/site or go a different route altogether, if you have to use XML. If you can fetch JSONP, you can do this strictly in JavaScript.
Related
I'm working on a JAVA web application which plays the role of a search engine. Its backend is developed with AngularJS. And I have a small PHP code which tries to send a data from an input text to the JAVA web app via an iframe. the data is stocked in a localStorage.
Here is below the PHP Code :
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
function redirect(){
var toSearch = document.getElementById('wordToSearch').innerHTML;
console.log("toSearch : ", toSearch);
localStorage.setItem('wordToSearch', 'bdd');
window.location.href = "http://localhost:8050/searchEngine/#/search";
}
</script>
<form action="http://localhost:8050/searchEngine/#/search">
<input type="text" name="word" id="wordToSearch">
<input type="submit" value="Search" onclick="redirect()">
</form>
</body>
</html>
Precisely, I'm trying to retrieve the "wordToSearch" item value stored within the localStorage
Here is below the code where i add my iFrame to my application :
<iframe src='http://localhost:8040/test/index.php'></iframe>
This is the result i get in the developer tools :
Developer Tools Result
Can anyone help me please ?
So TL;DR, you're saying you want JavaScript code running on a page whose origin is http://localhost:8050 to access the localStorage for origin http://localhost:8040 (or vice-versa)?
You can't do that. Web storage is specific to the origin, which includes the port.
You can do it using cookie, set value to http://localhost:8050 and get value from http://localhost:8040. Visit https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
I'm actually trying to access variable of other HTML file using JS.
I mean, I have a file (file1.htm) that open dialog box and I would like to send information of the file selected to another file (file2.htm) and modify a value in this file. I found solution but only for JS files, and not HTML :/
I had already done it with 2 files but file1a was the parent of the other, so I used
parent.framWin = window; in file2a and
framWin.divX=document.getElementById("one").offsetWidth; for example in file1a to modify the variable divX in file2a (I'm pretty sure this is not the best solution, but it works ;) ). Here, in this case, file1 and file2 are not parent, and they are just located in the same folder.
I tried <script type="text/javascript" src="file1.htm"> to access var but it doesn't seem to work.
Do you have any idea how I can accomplish this?
Thanks a lot!
(Here's my code :
file1.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function OK(e){
var name = document.getElementById("dialog").value;
//Here I would like to do something like File2.NameSpace1 = name;
//And File2.modifyMyName(); // But here, it's another question, to use JS script in another file ;)
}
//-->
</script>
</head>
<body >
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile' onchange="OK()" id="dialog">
</form>
</body>
</html>
and file2.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SiteMap</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
<!--
var NameSpace1;
function modifyMyName(){
document.GetElementById("first").src = NameSpace1;
}
//-->
</script>
</head>
<body>
<div>
<img src ="" id="first" />
</div>
</body>
I know this won't work properly because there are some errors here in the syntax. But the problem is visible ;)
Thanks again :)
You can't simply modify the content of file on the server using client side code.
The examples you've cited just change the data that is loaded into the browser at the time the code runs while leaving the data on the server untouched.
There are two approaches you can take to this:
Store the changes in the browser.
In page one, use localstorage to record information about the change you want to make. (You'd probably want to convert the image into a data: scheme URL to achieve this given your example code).
In page two, have some more JS that reads from localstorage and uses that information to make the change to itself after it loads.
Send the changes to the server.
Submit a form (so you don't need to use client side code at all) or use Ajax to send information about the change to the server.
Have server side code read it and then store it in a session (if you want the change to be on a per-user basis) or somewhere more permanent (in a database if you are sensible but you could modify the file directly) (if you want it to be shared between users).
Page two would then be a server side program that would read that data and use it to generate the page.
You can use localStorage to perform this operation.
function OK(e){
var name = document.getElementById("dialog").value;
window.localStorage.setItem('dialogValue', "Name");
}
And In your file2.html
function modifyMyName(){
var NameSpace1 = window.localStorage.getItem('dialogValue');
document.GetElementById("first").src = NameSpace1;
}
I want to load the content of a webpage in a div. Here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
When the this item is clicked, the webpage should be loaded inside the content id:
<ul><li><a id="menu_top" href='testing.html'><span>My account</span></a></li></ul>
<div id="content"> </div>
JS:
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
testing.html:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
SUCCESS!
</body>
</html>
Unfortunately, the above code does not work. I have checked it multiple times but could not find the issue.
#Milind Anantwar is correct - must have the $(document).ready wrap your JS:
$(document).ready(function(){
$("#menu_top").click(function() {
var href = $ (this).attr('href');
alert(href);
$("#content").load(href);
return false;
});
});
I also tested whether or not the UL or OL tags affected it as #psicopoo mentioned, but it didn't seem to in Chrome. *ALSO, make sure that "testing.html" is a valid page to load.
*As noted on http://api.jquery.com/load/: "Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol."
I think you're encountering an issue with the page you're trying to load. I copied your code exactly and it works in Fiddle, see if this works for you, if so, it's probably your page:
testing.html
JS Fiddle:
http://jsfiddle.net/fb4j6y6d/
I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false
I have found several other questions here on S.O. (and the web in general) that ask roughly this same question, but the answers always seem to suggest other ways of structuring code that avoid the need for addressing this underlying issue.
For example, many people suggest (and a good suggestion, I agree) to put your code in the jquery load method's callback, on the calling page and not the called page. However I have unique scripts that may appear in certain resources, so I would not want to do that for every load and nor do I necessarily know what these scripts will be.
Here is a test setup to demonstrate what I'm trying to do. The short summary is that when I load partial.htm from main.htm, its script does not fire.
main.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>main file</title>
</head>
<body>
<ul id="links">
<li>some page1</li>
<li>some page 2</li>
<li>some other partial page</li>
</ul>
<div id="panel" style="display:none; padding:20px; background-color:#CCC;">
LOADED CONTENT WILL GO HERE
</div>
<script type="text/javascript" src="/path/to/jquery-1.3.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$('#links a').click(function() {
var $panel = $('#panel');
$panel.show();
$panel.html('Please wait...');
var href = $(this).attr('href');
$('#panel').load(href + ' #content');
return false;
});
});
</script>
</body>
</html>
OK, very simple functionality on this page. Imagine there are many more links, and some of them may require scripting while others do not.
Here is partial.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>partial file</title>
</head>
<body>
<div id="content">
<p>Hey, I am the partial file!</p>
<script type="text/javascript">
alert('I am some JS in the partial file! But sadly I do not execute...');
</script>
</div>
<div>
I am some other content on the page that won't be included by jquery.load()...
</div>
</body>
</html>
Notice that my script in partial.htm does not fire. So, my question remains: how to get this to fire, excluding any answers that tell me to put this in the .load() method's callback. (This would be because I may not have the fore-knowledge of which scripts these partial pages may contain or require!)
Thank you!
Update #1:
I suppose an acceptable answer is simply "you can't." However, I'd like to know if this is definitively the case. I haven't been able to find anything that officially states this yet.
Also, when I use firebug to inspect the panel region afterwards, there is no script element present at all. It is as if it is being parsed out by load.
Update #2:
I've narrowed this down to be a problem only when using the selector as part of the href. Loading the entire "somepage.html" will execute the script, but loading "somepage.html #someregion" does not.
$panel.load('somepage.html'); // my script fires!
$panel.load('somepage.html #someregion'); // script does not fire
I'm going to try and hunt down why this may be the case in the jquery source...
Well it seems that this is by design. Apparently to make IE happy, the rest of us suffer. Here's the relevant code in the jquery source:
// See if a selector was specified
self.html( selector ?
// Create a dummy div to hold the results
jQuery("<div/>")
// inject the contents of the document in, removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append(res.responseText.replace(/<script(.|\s)*?\/script>/g, ""))
// Locate the specified elements
.find(selector) :
// If not, just inject the full result
res.responseText );
I'm wondering if, instead of just stripping out the scripts, I could modify the jquery source to include them in some other way that makes IE happy? I still have yet to find anything else on the web discussing this matter, I'm sure I'm not the only person stumped by this?
I have run across issues before with IE not running injected <script>s that didn't contain the defer attribute. This discussion thread has some good information about the topic: innerHTML and SCRIPT tag