Modifying server side text file - javascript

Currently I am working on static HTML website. Now I am using following javascript code to read server side text file:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "results.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>content</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Here on click event data is just displayed.But now I want to change the content of text file on click event.I want to increment the number by 1 which resides in the file as content.
Please help me to do this...Thank you so much in advance.!!
EDIT:
I am using windows hosting.

You may do it like this
This is the index page. I have done it in JSP.
index.jsp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "newjsp.jsp", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv">
<h2>content</h2>
</div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Then the server side coding
newjsp.jsp
<%#page contentType="text/html" pageEncoding="UTF-8" import="java.io.*"%>
<%
try {
BufferedReader in = new BufferedReader(new FileReader("C:/Users/sar/Documents/NetBeansProjects/WebApplication1/web/results.txt"));
// change the path to the txt file
String line;
int a = 0;
if((line = in.readLine()) != null)
a = Integer.parseInt(line)+1;
else
a = 1;
PrintWriter pw = new PrintWriter(new FileOutputStream("C:/Users/sar/Documents/NetBeansProjects/WebApplication1/web/results.txt"));
// change the path to the txt file
pw.println(a);
pw.close();
out.println(a);
}
catch(Exception e)
{
e.printStackTrace();
}
%>
You will have to create a results.txt file at the location specified.

Related

show result dynamically in search box

I want a search box which shows the result just below it when I click the search button without reloading the page.
for this I've js function called ShowUsers(str)
like this
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
And a html form like this :
<form>
<input type="text" name="q"/>
<script type="text/javascript">var x = document.getElementById("q").value; </script>
<input type="button" value="search" onclick="showUser(x)">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
I've one php file to show the result called as GetUser.php
I think the var x deos'nt pass to the ShowUser(str) function in the input tag I think this is not a right way to pass a js var into html event
so what can i do to show the data
Access document.getElementById("q").value directly in showUser function rather than passing x to showUser function.
function showUser() {
var str = document.getElementById("txtHint").value;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}

Javascript XMLHttpRequest onreadystatechanged not firing?

I have an html file and a .txt file in the same directory hosted on a webserver. The html file contains the following code:
<html>
<head>
<script>
window.onload = function() {
receiveMessage();
}
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.open("GET", "message.txt", true);
xmlhttp.send();
xmlhttp.onreadystatechanged = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
}
</script>
</head>
<body>
</body>
</html>
Since the text file message.txt contains "hello world", a javascript alert box containing that message should pop up when the response is received, but it's not. What am I doing wrong?
The property you are looking for is onreadystatechange not onreadystatechanged. There is no d on the end.
reorder the request and change function onreadystatechanged to onreadystatechange:
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","message.txt",true);
xmlhttp.send();
}
put the open and send calls after the onready statechanged event like in http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>

loading servlet from jsp and trying to pass multiple parameters

im trying to load a servlet using java script from a jsp. i am also trying to pass two parameter. the page loads but now im printing a sytem out from the servlet it suppose to give me the id and the vehicle vaules but it gives the vehicle felid as null.
ScanServlet doGet was called id = 1 vehicle= [object HTMLParagraphElement]vehicle=null
this is the code
<body onload="notifyOnLoad(<%=request.getParameter("imgid")%>)">
<img id="imgBarcode" src="ImageServlet?imgid=<%=request.getParameter("imgid")%>&vehicle=<%=request.getParameter("vehicle")%>" width=<%=request.getAttribute("Width")%> height=<%=request.getAttribute("Height")%>><br/>
<h4>Barcode Details</h4>
<p>Name :- <%=request.getAttribute("name")%></p>
<p>Type :- <%=request.getAttribute("type")%></p>
<p>Value :- <%=request.getAttribute("value")%></p>
<p id="wtf">type :- <%=request.getParameter("vehicle")%></p>
<script type="text/javascript">
function notifyOnLoad(imgid) {
var xmlhttp;
var vehicle =document.getElementById("wtf");
if(window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari;
xmlhttp = new XMLHttpRequest();
}
else{
/*code for IE6, IE5*/
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
window.location = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ScanServlet?imgid="+imgid+"vehicle="+vehicle, true);
xmlhttp.send();
}
</script
>
</body>
You cant directly access the request parameters in the javascript in the way you are trying.
<input type='hidden' name='field1' id='imgid' value='<%=request.getParameter("imgid")%>' />
access the variable in the javascript with its id,
<script type="text/javascript">
function notifyOnLoad(imgid,vehicle) {
var xmlhttp;
var imgid=document.getElementById("imgid");
xmlhttp.open("GET", "ScanServlet?imgid="+mgid+"&vehicle="+vehId, true);
xmlhttp.send();
}

pass text box value from one page to another page without page refresh?

i have two text box i am trying to pass that textbox value from one page to another page with out page refresh i am using ajax for this but i am able to achive only one text box value
Here is my code
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"service="+document.getElementById("city").value, true);
xmlhttp.send();
}
//return false;
</script>
i think i am wrong here in this line
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"service="+document.getElementById("city").value, true);
How can i achieve my goal
Any help will be apprecieted
Your query string pairs need to be seperated with an ampersand:
xmlhttp.open("GET", "testing.php?message="+ document.getElementById("message").value+"&service="+document.getElementById("city").value, true);
//Here -----^

How do you make this ajax example work on opera and firefox?

I have a quick question, the following only works on IE 7 and above, how can I make it work on firefox and opera aswell?
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://www.tdsoft.se/index.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Edit
Thanks for all your answers, now I just have another question regarding the followng code
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Now I want to search through the xmlhttp.responseText (in other words call the function loadXMLDoc()) for key words, like for example "testfile" and if it exists multiple example "testfile_1" and "testfile_2"....."testfile_n" then "doSomething"
like this
function searchADocument(wordToSearchFor){
int numberOfTimesWordOccurs=0;
var thePageToSearchThrough [] = loadXMLDoc();
for (i=0; i<thePageToSearchThrough.length; i++){
if(thePageToSearchThrough[i]==wordToSearchFor)
numberOfTimesWordOccurs++;
}
If (wordToSearchFor > 1)
document.write(" testfile_1" testfile_2 testfile_n
)
Else
window.location="http://selnc05.go.se:8080/component_test/build/testfile.html";
}
I don't know where to start since I don't know what type xmlhttp.responseText is, can I store it in an array and scan it using for loop etc?
Thanks in advance. =)
Try something like this:
ajax("http://www.tdsoft.se/index.html", function(data) {
document.getElementById("myDiv").innerHTML = data;
});
Code
function getXmlHttpObject() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status != 200) {
if (typeof onError == 'function') {
onError(this.responseText);
}
}
else if (typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}​

Categories