Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax: Get innerHTML value in Javascript

    Hello,

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

    Ajax function

    Code:
    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?

    Code:
    // 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

  • #2
    Regular Coder
    Join Date
    Feb 2010
    Posts
    104
    Thanks
    5
    Thanked 3 Times in 3 Posts
    1)an example ajax request call

    Code:
    	
    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)

    Code:
    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.

    Code:
    /*------------------------------------------------------------------
    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:

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

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting wrong

    I am getting the value of "undefined".

    I used the below way

    Code:
    // 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

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Feb 2010
    Posts
    104
    Thanks
    5
    Thanked 3 Times in 3 Posts
    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:

    Code:
     var result = ajaxRequest_JD({
        script:          'mypost.php',
        type:           "POST",
        inputName:   'myval',
        inputData:    selval
    })
    	
    	alert(result);
    Code:
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •