I'm using JSF 2.1, PrimeFaces 3.3.1.
Trying to put Yandex Maps on my page, to show events on map.
So, my xhtml:
<?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"
...
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition template="./Template.xhtml">
<ui:define name="content">
<script src="//api-maps.yandex.ru/2.0/?load=package.full;lang=ru-RU" type="text/javascript"></script>
<script src="/js/yMapsEditableCircle.js" type="text/javascript"></script>-->
<script type="text/javascript">
var myMapRes;
ymaps.ready(init);
function init() {
myMapRes = new ymaps.Map('resultMap', {
center:["#{calculatorGeo.cgm.selectedCity.latitude}", "#{calculatorGeo.cgm.selectedCity.longitude}"],
zoom:12
});
//taking coordinates from bean to js
var coords = ['#{calculatorGeo.cgm.coords}'];
//#{calculatorGeo.cgm.coords} - String variable containing smth like this: [54.9888,56.3434],[54.458,56.3456],...,[58.23458,55.2345]
var myCollection = [];
for (var i = 0; i<coords.length; i++) {
myCollection.push(new ymaps.Placemark(coords[i]));
}
var clusterer = new ymaps.Clusterer({preset: 'twirl#redClusterIcons',
gridSize: 100,
synchAdd: false,
minClusterSize: 2});
clusterer.add(myCollection);
myMapRes.geoObjects.add(clusterer);
}
</script>
<div id="resultMap" style="width:800px; height:600px; border: 1px solid"></div>
</ui:define>
</ui:composition>
</h:body>
Error in for statement in javascript, what am I doing wrong?
Error text: Fatal Error: Element type "coords.length" must be followed by either attribute specifications, ">" or "/>".
Tried to put js up to the tag, not worked too.
As you are writing XHTML you should define everything inside the script tag as CDATA:
<script type="text/javascript">
//<![CDATA[
// Your JS-Code
//]]>
<script>
The error is because of the < in the head of the for loop.
Related
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!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>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
I have list of cars models, and i trying to insert the value of select to the cookie with jQuery.
this is my code:
<!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">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var singleValues = $("#car").val(); //I NEED TO BE INSIDE
$('#continue').click(function() {
$.cookie("car", singleValues);
})
$('#continue').click(function() {
var singleValues = $("#car").val();
$.cookie("car", singleValues);
})
</script>
</head>
<body>
<select id='car'>
<option value="mazda">mazda</option>
<option value="honda">honda</option>
</select>
<a href='/' id='continue'>#<div id='continue_button'></div></a>
</body>
</html>
but the cookie didnt make.... why?
thank you very much about your help :)
You need to wrap your code in a document ready handler. Try this:
<script type="text/javascript">
$(function() {
$('#continue').click(function() {
var singleValues = $("#car").val();
$.cookie("car", singleValues);
})
});
</script>
Currently your code is attaching the events before the elements exist in the DOM.
Here is the running code on fiddleYou will see that It is working perfectly fine here but when I run this code in eclipse using glassfish server 3.2.1 in a xhtml page then it gives this error
javax.servlet.ServletException: Error Parsing /MasterPage/MiDASMaster.xhtml: Error Traced[line: 135] Open quote is expected for attribute "{1}" associated with an element type "class".
Here is the code of xhtml page(exactly same like fiddle) I tried it on Jsbin as well
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.highlight {
background:yellow;
}
.removeHighlight {
background:green;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.8.3.js"/>
</head>
<body>
<script type="text/javascript">
function test(){
alert(document.getElementById("divId"));
var regex = new RegExp('this',"gi");
document.getElementById("divId").innerHTML
=document.getElementById("divId").innerHTML.replace(regex, function(matched)
{
return '<span class=\'highlight\'>' + matched + '</span>';
});
}
</script>
<div id="divId">
This is the text This is the text This is the text This is the text
This is the text This is the text This is the the text
</div>
..
Your XHTML is probably malformed.
Put your Javascript code into a CDATA section.
<script type="text/javascript">
<![CDATA[
alert("Your javascript here");
]]>
</script>
I have made a Language Translator but that translates hard coded strings in a html page using java script. I would to make it flexible by allowing user enter a string into a textbox/textarea and my app can then translate it for the user.
Any help would be appreciable :)
Heres my code: (please note to enter your own API key)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('content');
// Setting the text in the div.
content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of the request
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
You can use the google translate api
You can make calls to the api and get a translated version. Refer this
Put this in html
<button type="button" onclick="initialize()">Translate</button>
And this in your initialize function if content is a textbox
content.value = "your translated text"
This will change your text in the same box
When I try to run this script i get error in IE:
Unterminated string constant
<!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 runat="server">
<script language="javascript" type="text/javascript">
var designDocumen;
var designEditor;
Initialize();
function Initialize() {
designEditor = $get('myframe');
designDocument = this.designEditor.contentWindow.document;
var outerHTML =
"<!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>Design Editor Frame</title>" +
"<style type='text/css'>" +
"body {background-color:Green;}"+
"</style>" +
"</head>" +
"<body></body>" +
"</html>";
designDocument.open("text/html", "replace");
designDocument.write(outerHTML);
designDocument.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="myframe" height="500px" width="500px">
</iframe>
</div>
</form>
</body>
</html>
How do I solve this? How to correct this string?
UPDATE:
The problem is with the line:
"<title>Design Editor Frame</title>"
if i remove it, it works!
There's a + missing after "body {background-color:Green;}".
You're missing a + after this line "body {background-color:Green;}".
Four things;
you declare designDocumen but use designDocument later
you need to define the function Initialize() before you call it
you need this script to be place at the bottom of your body element otherwise the iframe will not be available.
you have no definition for $get so you will need to include the correct script library to use this method.