In my J2EE web application I've used Extjs. I am brand new to J2EE. There is a button(plan) in a layer.
Here is my javascript file code segment for creating a button in the layer.
contentE1 : 'tourPlanning', //my layer
title : 'Tour Planning',
items : [ new Ext.Button({
text : 'Plan',
handler : function() {
document.getElementById("mapView").innerHTML = '\TourPlan.jsp';
}
}),
What I want is I need to set a jsp page(TourPlan.jsp) as a content(for my mapView div-I have a Google map view in my page). The output becomes, it sets the map view div content to Tourplan.jsp.
My TourPlan.jsp file(as an example) if like this.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Tour Plan</title>
</head>
<body>
<h1>Plan Your Tor</h1>
<!-- More Content Here -->
</body>
</html>
I am new to all of these thing, so I would be much appreciated if anyone could be so kind enough to explain how should I do such a thing.
You can try like this
<div id="mapView" style="display:hidden;">
<%# include file="TourPlan.jsp" %>
</div>
<script>
contentE1 : 'tourPlanning', //my layer
title : 'Tour Planning',
items : [ new Ext.Button({
text : 'Plan',
handler : function() {
document.getElementById("mapView").style.display="block";
}
}),
</script>
Hope it will help you.
Related
i am new to Knockout.js. I was trying to execute the following code to see the grid view of data. i took most of the code from Official Knockout website examples. but console in google shows error!! output is blank.Any suggestions?
The data array is passed as parameter in the pageGridModel().
<%# page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<!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 type="text/javascript" src="knockout-3.4.0.js"></script>
</head>
<body>
<div data-bind='simpleGrid: gridViewModel'>
</div>
<script type="text/javascript">
var initialdata=[
{name:"aaaa1",price : 101,sales :110},
{name:"aaaa2",price : 102,sales :210},
{name:"aaaa3",price : 103,sales :310},
{name:"aaaa4",price : 104,sales :410},
{name:"aaaa5",price : 105,sales :510},
{name:"aaaa6",price : 106,sales :610},
{name:"aaaa7",price : 107,sales :710},
];
var pageGridModel= function(items){
this.items=ko.observableArray(items);
this.addItem=function(){
this.items.push({name:"aaaa1",price : 101,sales :110});
};
this.sortItem=function(){
this.items.sort();
};
this.jumpToFirstPage=function(){
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel =new ko.simpleGrid.viewModel({
data :this.items,
columns:[{headerText:"NAME" ,rowText:"name"},
{headerText:"PRICE" ,rowText:"price"},
{headerText:"SALES" ,rowText:"sales"},
],
pageSize:4
});
};
ko.applyBindings(new pageGridModel(initialdata));
</script>
</body>
</html>
You are missing the knockout.simpleGrid.1.3.js script reference in your head tag. simpleGrid is an optional plugin that is not included with the main KO library.
Here is it working in jsfiddle.
<div data-bind='simpleGrid: gridViewModel'>
</div>
I used jquery getJSON method to get the two strings from java servlet. one string contains the type of data like simple string, XML and HTML and another string contains data. I need to open a popup window with different size based on contents.
Below the code used to get the strings.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>AJAX calls using Jquery in Servlet</title>
<script src="http://code.jquery.com/jquery-latest.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function(event) {
var applid=$('#applicationid').val();
var applname=$('#appname').val();
$.getJSON('ActionServlet',
{
appid:applid,
appname:applname
},function(data) {
var errortype = data.errortype;
var errorMsg = data.errorMsg;
});
});
});
</script>
</head>
<body>
<form id="form1">
<h1>AJAX Demo using Jquery in JSP and Servlet</h1>
Enter your Name:
<input type="text" id="applicationid"/>
<input type="text" id="appname"/>
<input type="button" id="submit" value="Ajax Submit"/>
<br/>
<div id="hello" title="Hello World!"></div>
</form>
</body>
</html>
You can user fancybox. It gives options for opening the passed html string check here
To open a new window you can use the window.open() function.
To display the XML as raw text, you need to escape the special characters.
Javascript does not have builtin function for it (like htmlentities() in php).
You can try the following code:
function htmlentities(str)
{
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
I am using extjs 3.2. I just tried one sample for grid row coloring with reference to http://skirtlesden.com/articles/styling-extjs-grid-cells. added grid view config in gridExample.js file which is holding static gird.,
viewConfig: {
stripeRows: false,
getRowClass: function(record) {
return record.get('age') < 18 ? 'child-row' : 'adult-row';
}
and added CSS in html page.
HTML code is,
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>success</title>
<link href="/testing/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/testing/ext/resources/css/test.css" rel="stylesheet" type="text/css" />
<style>
.child-row .x-grid-cell {
background-color: #ffe2e2;
color: #900;
}
.adult-row .x-grid-cell {
background-color: #e2ffe2;
color: #090;
}
</style>
<script src="/testing/ext/adapter/ext/ext-base.js"></script>
<script src="/testing/ext/ext-all.js"></script>
<script src="/testing/JS/gridExample.js"></script>
</head>
<body>
</body>
</html>
But grid row color not changed. Most of forums sure about code. So, is it any problem with css in html page? Thanks in advance.
Ext 3.x uses CSS classes of the form x-grid3-... for grid elements.
You can inspect this 3.2 example's markup to see for yourself.
So, your CSS should be:
.child-row .x-grid3-cell {
background-color: #ffe2e2;
color: #900;
}
I had to add !important to those properties to get something similar to work.
.child-row .x-grid-cell {
background-color: #ffe2e2 !important;
color: #900 !important;
}
I have just written my first app in phonegap that simply replaces a text string on the screen each time you activate a link.
The original string stays where it is and the new string is written over the top. If you then activate the link again the second string is replaced with a new one but still over the top of the first string.
I have tried clearing the variable to fix this but no luck.
Is this a platform limitation or am i doing something wrong?
Code is below
<!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" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
ideaSpace.innerHTML=idea;
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
Thanks
Simon
I have no experience with phonegap, but in the past I found some problems trying to set innerHTML in xhtml documents, it don't check if the string you are using causes the document to still a valid xml and just throws an error, to achieve the same effect try:
<!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" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
//ideaSpace.innerHTML=idea;
ideaSpace.removeChild(ideaSpace.firstChild);
ideaSpace.appendChild(document.createTextNode(idea));
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
I have read the answers for the question window.onload vs <body onload=""/>. In that Q&A, many claim that window.onload and body.onload are identical. This is not what I experience.
Consider the two test pages:
<!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 1</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
</script>
</head>
<body onload="resetMenu();" onunload="resetMenu();">
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p>google
</p>
</body>
</html>
And:
<!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 2</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
window.onload = resetMenu();
window.onunload = resetMenu();
</script>
</head>
<body>
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p>google
</p>
</body>
</html>
With the "test 1" page, if you select an item from the drop down menu and the click the link to navigate away from the page and then hit the back button the menu will be reset to its initial state. This doesn't happen for the "test 2" page though. Why?
While this is a test, my goal is to do something similar on an aspx page using RegisterStartupScript or RegisterClientScriptBlock so I want to be able to recreate the behaviour of "test 1" without using the body onload/onunload but using window.onload/onunload.
Crescent is correct, by using:
window.onload = resetMenu();
You are making window.onload equal to the return value of the resetMenu function, rather than providing the function which should be called onload (and unload). So you should use:
window.onload = resetMenu;
window.onunload = resetMenu;
But why do you need to reset the menu when the page is unloaded?
Note: You can also use anonymous functions as the onload handler :)