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, '"');
}
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 have a JavaScript in HTML file that call a php file in a $.get jquery API. When I run the HTML file on my computer where WAMP is running (for php), I can't get the result of php function on the screen,neither the text of h1 tag nor the the output of print function. Thanks for a lot your answer.
Regards
Here is my html file AJAXTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<script type = "text/javascript"
src = "jquery-1.3.2.min.js">
</script>
<script type = "text/javascript">
$(init);
function init(){
alert("init passage 2" + " Andy");
$.get("http://localhost/greetUser.php", { "userName": "Andy" }, processResult);
alert("processresult passage" + data);
$("#output").html(data);
}
function processResult(data, textStatus){
alert("processresult passage" + data);
$("#output").html(data);
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
and here is my php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<title>greetUser.php</title>
</head>
<body>
<div>
<h1>Réponse</h1>
<?php
$userName = $_REQUEST["userName"];
print "<p>Salut, $userName!</p> ";
?>
</div>
</body>
</html>
It looks like everything should largely be working, but one thing that I can see that would break it, is that you have the
alert("processresult passage" + data);
$("#output").html(data);
being called inside of the init() function, directly after the $.get call.
At this point in the execution, the 'data' variable does not exist and using it will cause an error and halt all javascript from continuing, as the execution has to wait until the request is returned to be able to process it (in the processResult function, which you appear to be handling correctly)
Removing those lines, I think should solve your problem.
Try this:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/greetUser.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
UPDATE
I don't understand the downvote, but if you try this, it works:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/file.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
PHP file:
<?php
$userName = $_POST["username"];
print "<p>Salut, $userName!</p> ";
?>
I am trying to test for the filling out of an HTML form and the subsequent change of an HTML elements Text. I need to create some form of event using jasmine-jquery...
HTML
<div class="response" id="text-response">Unknown</div>
<div class="form-holder">
<form>
<input id="input-text" type="text" name="user-input" placeholder="Test Your Text" value="">
<input id="submit-button" type="submit" value="Submit">
</form>
</div>
I am trying to test drive id='text-response' changing to 'Correct' based on some script logic.
describe('Interface logic', function(){
it('Will return correct if logic applies', function(){
expect('#emotion').toContainText('Correct');
});
});
Any help would be much appreciated
You might just need to trigger an event, for example:
$('#submit-button').click();
That should fire the click event. Then you can check for whatever condition this event changes on the page.
$('#submit-button').click();
Was the solution for me but the spec runner constant refresh is because you're hitting http://localhost:3000/specs/ rather than http://localhost:3000/SpecRunner.html
If you have your form html in a separate template in a file named for example
templates/form.tmpl.html
and your jquery in a separate file also named for example
js/validation.js
And containing validation code like
$(".form-holder").on("submit", function() {
event.preventDefault();
var userInput = $('#input-text').val();
if (userInput === 'the correct text') {
$('#text-response').text('Correct');
return;
}
$('#text-response').text('Incorrect');
});
Then your test spec can be something similar to this
describe('Interface logic', function() {
jasmine.getFixtures().fixturesPath = '';
beforeEach(function() {
loadFixtures('templates/form.tmpl.html');
appendSetFixtures('<script src="js/validation.js"></script>')
});
it('Will return correct if logic applies', function(){
$('#input-text').val('the correct text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Correct');
});
it('Will return incorrect if logic applies', function(){
$('#input-text').val('the incorrect text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Incorrect');
});
});
And the spec runner html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spec Runner</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
<script src="lib/jasmine-2.2/boot.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="specs/form.spec.js"></script>
</head>
<body>
</body>
</html>
So, there's a textarea and under that send button on panel wich is showing after puting first character, isButtonVisible() method controlls this. It sends text from textarea by AJAX send() method to data.php, where data from textarea has to be saved in .txt document. .js file name is ng-controllers.js Can anyone help me with this? I have no experience in angular.js
Here's how my HTML file look like:
<!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="pl" lang="pl" ng-app="Textarea"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
<title>Angular - Textarea</title>
<link rel="stylesheet" type="text/css" href="./Angular - Textarea_files/style.css">
<script type="text/javascript" src="./Angular - Textarea_files/jquery.min.js"></script><style type="text/css"></style>
<script type="text/javascript" src="./Angular - Textarea_files/angular.min.js"></script>
<script type="text/javascript" src="./Angular - Textarea_files/ng-controllers.js"></script>
</head>
<body style="padding:0px; margin:0px;" onload="">
<div class="Cont" ng-controller="TextAreaCtrl as ctrl">
<div class="TextAreaCont">
<textarea ng-model="text" placeholder="Write something..." style="margin: 0px; height: 106px; width: 795px;"></textarea>
</div>
<div class="ButtonCont" ng-show="ctrl.isButtonVisible()">
<button ng-click="ctrl.send()">Send</button>
</div>
</div>
</body></html>
Ajax calls in angualr use the $http provider
full documentation here
It's very close to how you do $.ajax in jquery, i.e.
var httpPost = $http({
method: "post",
url: "example.com/posts",
data: {
// some data here
}
});
Then you assign a function to run on success
httpPost.success(
function( html ) {
// do something here
}
);
It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(.
I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value.
Any help!!
I've tried
window.parent.document.getElementById(window.name)
window.parent.document.getElementById('test').value
window.opener.document.getElementById('teast').value
window.parent.opener.document.getElementById('teast').value
window.opener.parent.document.getElementById('teast').value
Almost all the permutation and combination. And its pure HTML.
Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.
window.opener.document.getElementById('test').value should work.
I've tried that, it ain't work. I'm posting the code
test.html
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="chatMessages"></div>
<script>
var newWin = null;
var OpenWindow = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
alert(window.parent.document.getElementById(window.name));
newWin = window.open(strURL, 'alertWindow', strOptions);
//newWin.document.getElementById("child").value='Str';
newWin.focus();
// send_data(data);
}
function chat() {
popUp('../alert.jsp','console',250,600);
}
</script>
<form name="AlertReceiverOnHeader" onclick="chat()">
<input type="text" value="teast" id="teast" name="teast"/>
</form>
</html>
child.html
<!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=UTF-8">
<title>Alert</title>
</head>
<body onload="load()">
<script language="JavaScript">
function load() {
alert('In load');
alert("001="+window.parent.document.getElementById('teast'));
alert("002="+window.parent.document.getElementById(window.name));
alert("003="+window.opener.document.getElementById('teast').value);
}
</script>
<form name="child">
<input type="text" id="child" value="child"/>
</form>
</body>
</html>