We Keep Coding

Check My Code. Is it a correct way to append?

function saveToDataBase(save_id,textarea_id,question_no,assg_name,testinput,testoutput)
{
document.getElementById(save_id).addEventListener('click',function(){
//alert("Hello");
var question=document.getElementById(textarea_id).value;
var question_id=assignment_name+question_no;
var request;
var url="saveQuesToDataBase.jsp?question="+question+"&question_id="+question_id+"&assg_name="+assg_name;
for(var i=0;i<testinput.length;i++)
{
var v=document.getElementById(testinput[i]).value;
url=url+"&testinput"+i+"="+v;
}
for(var i=0;i<testoutput.length;i++)
{
var v=document.getElementById(testoutput[i]).value;
url=url+"&testoutput"+i+"="+v;
}
var len=testinput.length;
url=url+"&size_of_arr="+len;
if(window.XMLHttpRequest)
{
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
try
{
request.onreadystatechange=function()
{
if(request.readyState==4 && request.status == 200)
{
alert(request.responseText);
}
};
request.open("GET",url,true);
request.send();
}
catch(e){alert("Unable to connect to server");
}
})
}
The function is called on click, but not redirected to saveQuesToDataBase.jsp . Please see if I could append things to url this way ? Tell me the better way.
testinput and testoutput are the two arrays of id's of textareas.
I used loop to retrieve id and to get the value.

For your code design,I have two suggestions:
a. First I would recommend you using jQuery ajax instead of original Ajax,it will hide the implement of different browsers.With it you can make it like below:
$.ajax({
url:your_request_url,
type:"post",//or get
data:your data,
success:function(data){},
error:function(){}
});
b. since Http Get method has parameter length limit,details can be found at maximum length of HTTP GET request?. You need to use POST instead of GET,while using POST,when can using data to pass more parameters to ajax:
var params ={};//define a parameter object
for(var i=0;i<testoutput.length;i++)
{
var v=document.getElementById(testoutput[i]).value;
params["testoutput"+i]=v;
}
$.ajax({
url:your_request_url,
type:"post",//or get
data:params,//passing the parameters.
success:function(data){},
error:function(){}
});

Bug in basic Ajax library

Been trying to create a basic Ajax library using JavaScript based upon a tutorial in the book "Build your own AJAX Web Applications" by Matthew Eernise (see here) as I want to get more in-depth knowledge of AJAX XML-RPC and REST. Based on the book I have created a JavaScript constructor function to get AJAX or an XMLHttpRequest going, but somehow I seem to suffer from an out-of-scope issue and the Ajax class is not defined in the following script:
function Ajax() {
// properties
this.req = null;
this.url = null;
this.method = 'GET';
this.asynch = true;
this.status = null;
this.statusText = '';
this.postData = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = 'text',
// 'text', 'html', 'xml' or 'object'
this.mimeType = null;
} // End Constructor
//Create XMLHttpRequest method with XMLHttpRequest object
this.init = function() {
if (!this.req) {
try {
//Try to create objects for Firefox, Safari, IE7, etc.
this.req = newXMLHttpRequest();
}
catch(e) {
try {
//Try to create object for later versions of IE.
this.req = new ActiveXObject('MSXML2.XMLHTTP');
}
catch(e) {
try {
//Try to create for early versions of IE.
this.req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e) {
//Could not create XMLHttpRequest object.
return false;
}
}
}
}
return this.req;
};
//Sending a Request method
this.doReq = function() {
if (!this.init()) {
alert('Could not create XMLHttpRequest object.');
return;
}
//Setting up a request
//open methods with method, url and asycn yes or no
this.req.open(this.method, this.url, this.asynch);
//Make sure mimetype is OK
if (this.mimeType) {
try {
req.overrideMimeType(this.mimeType);
}
catch(e) {
//couldn't override MIME type ... IE6 or Opera?
}
}
var self = this; // fix loss-of-scope in inner function
this.req.onreadystatechange = function() {
var resp = null;
if (self.req.readyState == 4) {
//do stuff to handle response
switch (self.reponseFormat) {
case 'text':
resp = self.req.responseText;
break;
case 'xml':
resp = self.req.responseXML;
break;
case 'object':
resp = req;
break;
}
if (self.req.status >= 200 && self.req.status <= 299) {
self.handleResp(resp);
}
else {
self.handleErr(resp);
}
}
};
this.req.send(this.postData);
};
this.handleErr = function() {
var errorWin;
try {
errorWin = window.open('', 'errorWin');
errorWin.document.body.innerHTML = this.responseText;
}
catch(e) {
alert('An error occured, but this error message cannot be '
+ 'displayed. This is probably because of your browser\'s '
+ 'pop-up blocker. \n'
+ 'Please allow pop-ups from this website if you want to '
+ 'see the full error messages. \n'
+ '\n'
+ 'Status Code: ' + this.req.status + '\n'
+ 'Status description: ' + this.req.statusText);
}
};
this.abort = function() {
if (this.req) {
this.req.onreadystatechange = function() {};
this.req.abort();
this.req = null;
}
};
this.doGet = function (url, hand, format) {
this.url = url;
this.handleResp = hand;
this.responseFormat = format || 'text' ;
this.doReq();
};
The error I get on the page that loads this script with
var hand = function (str) {
alert(str);
}
var Ajax = new Ajax(); // new instance as can ben done with PHP5 constructor classes
ajax.doGet ('/fakeserverpage.php', hand);
and starts up a new instance of Ajax get the error ajax is not defined even though I did add var self = this; // fix loss-of-scope in inner function
to fix the scope issue. What am I missing?
Update 1
Thanks to a tip here Gave new instance a different name so they don't clash:
var hand = function (str) {
alert(str);
}
var ajax = new Ajax(); // new instance as can ben done with PHP5 constructor classes
ajax.doGet ('/fakeserverpage.php', hand);
Now I am a little further. Now I get a new error: Uncaught TypeError: Object #<Ajax> has no method 'doGet'
Update 2
I tried using Ajax.prototype.init instead of this.init as recommended by a co dev here, but I still have the same error..
Update 3
Thanks to #Soufiana Hassou I improved the code by adding Ajax.prototype to all methods. Did not know it was necessary for all to work with the constructor, but it is. Code is here http://pastebin.com/g86k0z8d . I now get this pop-up saying Could not create XMLHttpRequest object. This error message is built into the method so it is working, but it cannot create the object somehow. This means there must be an error in my request for an XMLHttpRequest as I covered all cases and tested this in Firefox 11 for Mac using code on my local MacPorts MAMP. Either that or there is something else I do not know about..
Update 4
Fixed a typo. Then I got a 404 loading the fake server page. Corrected path ajax.doGet ('/ajax/fakeserverpage.php', hand); so now OK. Only I need to get the PHP to generate the code so I get an OK. The header response is OK, but I do not see the AJAX alert yet. Then I checked the console and found this error:
self.req is undefined
http://localhost/ajax/ajax.js
Line 78
See latest code: http://pastebin.com/g86k0z8d . I added some more Ajax.prototype where I thought they were still needed. Now I get:
this.req is null
http://localhost/ajax/ajax.js
Line 100
Update 5
Made some more changes removing some selfs used initially for the out-of-scope issue using var self = this. Code is still the same pastebin, but I have updated it. Now I have:
Ajax.prototype.handleResp is not a function
http://localhost/ajax/ajax.js
Line 92
Update 6
I cleaned up some of the mistakes I made in the req.onreadystatechange = function() function and now I does run. I turned of Firefox pop-up blocker for localhost and on reload it opened another tab and showed the text undefined. So almost there. No errors, just no pop-up with OK. Chrome showed a pop-up with the undefined in the body. Updated code here: http://pastebin.com/g86k0z8d as usual

You are using the same name for your instance and the class itself.
Also, you are declaring Ajax and using ajax, Javascript is case-sensitive.

First, you have var Ajax = new Ajax(); You should have var ajax = new Ajax(); instead.
Secondly, using this outside of the constructor isn't referring to the Ajax object. Try using its prototype instead:
function Ajax() {
// Set properties here
}
Ajax.prototype.init = function() {
// ...
}
See this article on Javascript classes for more information.

Why does this function not return JSON string?

function addphoto()
{
var ajaxRequest = initAjax();
if (ajaxRequest == false)
{
return false;
}
// Return Ajax result when the state changes later
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
alert(ajaxRequest.responseText);
return ajaxRequest.responseText;
}
}
// Capture form elements
var values = {
"category" : encodeURIComponent(document.addphoto.category.options[document.addphoto.category.selectedIndex].value),
"photo_title" : encodeURIComponent(document.addphoto.photo_title.value),
"photo_descrip" : encodeURIComponent(document.addphoto.photo_descrip.value)
}
var queryString = '?', i = 0;
for (var key in values)
{
if (i != 0)
{
queryString += '&'
}
queryString += key + '=' + values[key];
i++;
}
// Execute Ajax
ajaxRequest.open("POST", "ajaxcheckform.php" + queryString, true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.setRequestHeader("Content-length", queryString.length);
ajaxRequest.setRequestHeader("Connection", "close");
ajaxRequest.send(null);
}
function ajaxCheckform(formname)
{
var response = addphoto(); // <--This is undefined and not sure why
var responseObj = JSON.parse(response);
if (responseObj.success == 1)
{
// Successful form!
alert(responseObj.success_text);
}
else
{
// Error!
alert(responseObj.error);
}
}
I'm sure I must be making some basic error somewhere, but I'm having trouble locating it. In this script, ajaxCheckform() is a function that executes one of several similar functions. Above, I included addphoto(), which is one of several functions I'll need that look like this.
On a side note, I'd love to know I can call upon a function dynamically. The addphoto() function will be only one such function being called up at that moment and I'm trying to find a way to pass formname as the function I need. I've searched Stackoverflow and Google. I've found nothing that works.
Note, I'm aware of jQuery, but I'm not there yet. I need this function to work first.

It is not addphoto() thats undefined but response is undefined. ajaxRequest is asynchronous and the addphoto() function will return before the request completes.
try this
function addphoto() {...
// Return Ajax result when the state changes later
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
alert(ajaxRequest.responseText);
var responseObj = JSON.parse(ajaxRequest.responseText);
if (responseObj.success == 1) {
// Successful form!
alert(responseObj.success_text);
}
else {
// Error!
alert(responseObj.error);
}
}
}
....
}
function ajaxCheckform(formname) {
addphoto();
}

That's because response is set to the return of addphoto(), which is nothing. What you want to do is have ajaxCheckForm get called when the AJAX call is completed:
// Return Ajax result when the state changes later
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4)
{
ajaxCheckform(ajaxRequest.responseText);
}
}
Then your ajaxCheckform will work with that data:
function ajaxCheckform(responseText)
{
var responseObj = JSON.parse(responseText);
if (responseObj.success == 1)
{
// Successful form!
alert(responseObj.success_text);
}
else
{
// Error!
alert(responseObj.error);
}
}

You can't return from an event handler (which onreadystatechange is).
You have to do the work inside that event handler.

addphoto() does not return anything (or rather, returns inconsistently) ... the onreadystatechange event's handler is returning the value, but there is no caller that will receive that json string.
I'd highly suggest that you abstract these details away with something like jquery ... just follow the docs for suggested usage and this code will be much simpler

You're sending a GET style parameter list to a POST method.
You need to send that string in the body of your HTTP request.

var response = addphoto(); // <--This is undefined and not sure why
The addphoto() function never has a return statement in it, so it returns undefined. And the ajaxRequest is asynchrous and wont return immediately.

Multi-Array of XML Requests

OMG, I am in need of a way to set up arrays of XML Requests based on the idShout - 1.
So it would be something like this...
var req = new Array();
req[idShout - 1] = ALL XML Data...
Here's what I got so far but it's not working at all :(
var idShout;
var req = new Array();
function htmlRequest(url, params, method)
{
req[req.push] = ajax_function();
for (i=0;i<req.length;i++)
{
(function (i) {
if (req[i])
{
if (method == "GET")
{
req[i].onreadystatechange = function()
{
if (req[i].readyState != 4)
return;
if (req[i].responseText !== null && req[i].status == 200)
{
document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
}
}
}
req[i].open(method,url,true);
if (method == "POST")
req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (params == "")
req[i].send(null);
else
req[i].send(params);
return req[i];
}
else
return null;
})(i);
}
}
function ajax_function()
{
var ajax_request = null;
try
{
// Opera 8.0+, Firefox, Safari
ajax_request = new XMLHttpRequest();
}
catch (e)
{
// IE Browsers
try
{
ajax_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
//No browser support, rare case
return null;
}
}
}
return ajax_request;
}
function send(which)
{
var send_data = "shoutmessage=" + document.getElementById("shout_message" + which).value;
var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;send_shout="+ which;
htmlRequest(url, send_data, "POST");
document.getElementById("shout_message" + which).value = "";
document.getElementById("shout_message" + which).focus();
return true;
}
function startShouts(refreshRate, shoutCount)
{
clearInterval(Timer[shoutCount-1]);
idShout = shoutCount;
show_shouts();
Timer[shoutCount - 1] = setInterval("show_shouts()", refreshRate);
return;
}
function show_shouts()
{
var url = smf_prepareScriptUrl(smf_scripturl) + "action=dreamaction;sa=shoutbox;xml;get_shouts=" + idShout;
htmlRequest(url, "", "GET");
}
Any help at all on this would be greatly appreciated...
Basically, I'm setting the Timer Arrays in a different function before this, and I call startShouts which is supposed to show all of the information, but startShouts gets called more than once, which is why I have idShout set to equal shoutCount. So it will go something like this: shoutCount = 1, shoutCount = 2, shoutCount = 3, everytime it is being called. So I set the req[idShout - 1] array and it should return the result right??
Well, I get no errors in Firefox in the error console with this code above, but it doesn't work... Any ideas anyone?? As it needs to output into more than 1 area... argg.
Thanks for any help you can offer here :)
Thanks guys :)
Also, a little more info on this...
Basically there is 1 or more Shoutboxes on any given page (Don't ask why?), I need to be able to grab the info of this and put it into the document.getElementById("shoutbox_area" + idShout), since the idShout for each element changes incrementing by 1 for each Shoutbox that is on that page. The values for the Shoutbox can be different, example the refreshRate can be different. 1 Shoutbox can have a refresh rate of like 2000 milliseconds, while the other can have a rate of 250 milliseconds, they need to be different and refresh at the times that are defined for them, so this is why I decided to make a Timer array, though not sure I have setup the Timer array the way it is meant to be setup for the setInterval function. Here is the way it get's done in a different javascript function that runs just before startShouts gets called...
This part is outside of the function and within the document itself:
var Timer = new Array();
And this part is in the function...
Timer[shoutCount - 1] = "";
So not sure if this is correctly setup for Timers...?

Since XHRs are asynchronous, by the time the readystatechange callback function fires the value of i has changed. You need to create a separate closure for the i variable during your loop. The easiest way to do this is wrap an anonymous function around the code block and call it with i passed as the first argument:
for (i=0;i<req.length;i++)
{
(function (i) {
if (req[i])
{
if (HttpMethod == "GET")
{
req[i].onreadystatechange = function()
{
if (req[i].readyState != 4)
return;
if (req[i].responseText !== null && req[i].status == 200)
{
document.getElementById("shoutbox_area" + idShout).innerHTML = req[i].responseText;
}
}
}
req[i].open(HttpMethod,url,true);
if (HttpMethod == "POST")
req[i].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if (params == "")
req[i].send(null);
else
req[i].send(params);
return req[i];
}
else
return null;
})(i);
}

JS to jQuery to the fullest

I have this:
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
var nocache = 0;
function insert() {
document.getElementById('insert_response').innerHTML = "To Sek .. "
var bID= encodeURI(document.getElementById('bID').value);
var kommentar= encodeURI(document.getElementById('kommentar').value);
nocache = Math.random();
http.open('get', 'insert.php?bID='+bID+'&kommentar=' +kommentar+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('insert_response').innerHTML = response;
if ($("#box[value=1]").length > 0) { window.parent.showMessage("Video Is OK"); }
}
}
And i want to "shorten" the code, and make it use jQuery to the fullest. eg, i have heard of serialize(); instead of using http.open etc.., but how should i use it in this case?
And do i really need all that in createobject() to make the http?

Untested, but I'm pretty sure this is what you need:
function onInsertComplete(data,textstatus){
$("#insert_response").html(data);
}
function doInsert(){
$("#insert_response").html("To Sek...");
var nocache = '0';
var data = { bID : $("#bID").val(), kommentar: $("#kommentar").val(), nocache: nocache };
$.get('insert.php', data, onInsertComplete);
if ($("#box[value=1]").length > 0) {
window.parent.showMessage("Video Is OK");
}
}

Most of this can be cleaned up with a call to the get method in jQuery.
First, it will abstract away the browser-specific details for you, so you don't have to check how get XMLHttpRequest.
You can then use jQuery to get elements through selectors. To select any element by id, you would use the following syntax:
$("#<id>")
The hashtag indicates that you want to select the elements with the id specified. From there you can use some of the general attribute functions to get the values inside of specific elements.
Finally, you can use Javascript's ability to generate closures to create and pass one as the callback to the get function, which is executed when the call completes. You would then use the same selectors general attribute functions to change the values on the client side when the call completes.

Something on this line?
http://api.jquery.com/load/
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});