...

View Full Version : Ajax: Get innerHTML value in Javascript



forums.siva
07-13-2010, 07:35 AM
Hello,

I am using AJAX and got the output from AJAX like the below line

Ajax function



if (http_request.readyState == 4) {
if (http_request.status == 200) {
var_output = http_request.responseText;
document.getElementById('result').innerHTML = var_output; //value 100 displayed
}
else
{
alert('There was a problem with the request.');
}
}


In my javascript function, i need to get the value 100 from that innerHTML.
Is it possible to get this value?



// I tried this way, but not working
var txt = document.getElementById('result').innerHTML;


or Store it in hidden field and get the value from javascript.

Please suggest any idea to solve this problem

Thanks

semiSkim
07-13-2010, 08:15 AM
1)an example ajax request call



ajaxRequest_JD({
script: '_scripts/editEvent/loadGenre.php',
type: "POST",
inputName: 'id',
inputData: eventID,
action: "ajaxReturn"
})



2) This function will be called once the ajaxRequest has completed (note the action field in the previous code block)



function ajaxReturn(result){
//YOUR CODE HERE
}



3) The main ajax workings, this code should be placed in a file on its own and included on your page.



/*------------------------------------------------------------------
This function creates an ajax request
------------------------------------------------------------------*/
function ajaxRequest_JD(params)
{
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Avalible params --------------------------------------
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

multiple inputs are seperated by a '|'.

REQUIRED
- script (the path to the required script)

OPTIONAL
- inputName (the variables used in the request)
- inputData (the data used in the request)
- type (GET or POST - GET is default)
- action (if it isn't set the executuing code will have to wait for a reply before continuing.)
_______________________________________________________
_______________________________________________________*/

if(params.script == undefined){
alert("JD System Design AJAX API Error! No script has been specified.");
return;
}

var script = params.script || "";
var inputName = params.inputName || "";
var inputData = params.inputData || "";
var type = params.type || "GET";
var action = params.action || "false";

script = trim_JD(script);
inputName=trim_JD(inputName);
type=trim_JD(type);

var numName = getNumInputs_JD(inputName);
var numData = getNumInputs_JD(inputData);

if(numName != numData){
alert("JD System Design AJAX API Error! The number of variables doesn't match the number of inputs.");
return;
}

var singleName = new Array;
var singleData = new Array;

for(var i=0; i<numName; i++){
singleName[i] = getRequiredParam_JD(inputName,i);
singleData[i] = getRequiredParam_JD(inputData,i);
}


if(type == "GET"){
var readyData = "?";
}else{
var readyData = "";
}

readyData = readyData + singleName[0] + "=" + singleData[0];
for(var i=1; i<numName; i++){
readyData = readyData + "&" + singleName[i] + "=" + singleData[i];
}

if(action == "false"){
var synchronous = false;
}else{
var synchronous = true;
}


var xmlhttp;
xmlhttp=GetXmlHttpObject();

if(type == "GET"){
xmlhttp.open(type, script+readyData, synchronous);
xmlhttp.send(null)
}else{
xmlhttp.open(type, script, synchronous);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", readyData.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(readyData);
}


if(synchronous == true){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
action(xmlhttp.responseText);
}
}
}else{
return xmlhttp.responseText;
}

}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}





You can also choose to call the ajax without specifying a different function but this can cause the page to lockup until the request completes. If you want to do this then you simple don't use the second block of code, and modify the first block like so:



var result = ajaxRequest_JD({
script: '_scripts/editEvent/loadGenre.php',
type: "POST",
inputName: 'id',
inputData: eventID
})

forums.siva
07-13-2010, 09:20 AM
I am getting the value of "undefined".

I used the below way



// selval is my variable which contains data and myval is the parameter
// mypost.php?myval=100 --> here selval is 100

var result = ajaxRequest_JD({
script: 'mypost.php',
type: "POST",
inputName: 'myval',
inputData: selval,
action: "true"
})

alert(result);


I got "undefined" in alert

Kor
07-13-2010, 11:19 AM
Are you trying to send a request to a file from another domain? In this case AJAX alone can not do that. You need also a server-side proxy application to perform a cross-domain request.

semiSkim
07-13-2010, 10:49 PM
Your trying to do two types of AJAX at the same time. You either use result to call a function or use var result = for the ajax call. The two types are shown below:



var result = ajaxRequest_JD({
script: 'mypost.php',
type: "POST",
inputName: 'myval',
inputData: selval
})

alert(result);




ajaxRequest_JD({
script: 'mypost.php',
type: "POST",
inputName: 'myval',
inputData: selval,
action: "myFunc"
})

function myFunc(result){
alert(result);
}


The second method is the better one as the first can cause the page to freeze.

Ensure your 'selval' var is set, and your php script is picking up the value named 'myval' correctly



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum