Jump to content

AJAX reponse no updating div!


louis83

Recommended Posts

Hi All,

My ajax request is processed correctly and a reponse is sent (i know this coz my firebug says so).but the darn thing doesnt update my div-tag as stated.Any clue why this is the case?

Cheers ;D!

 

/*

* Created on 12-Nov-07

*

* This file is the ajax-handler of non-cake microsites

* It is to be included by all formspring-forms requiring specialized validation

*

*/

function createRequestObject() {

 

  var req;

 

  if(window.XMLHttpRequest){

      // Firefox, Safari, Opera...

      req = new XMLHttpRequest();

  } else if(window.ActiveXObject) {

      // Internet Explorer 5+

      req = new ActiveXObject("Microsoft.XMLHTTP");

  } else {

      // There is an error creating the object,

      // just as an old browser is being used.

      alert('Problem creating the XMLHttpRequest object');

  }

 

  return req;

 

}

 

// Make the XMLHttpRequest object

var http = createRequestObject();

 

function sendRequest(fname,updatediv) {

  // Extract textfield value

  var fvalue = document.getElementById('field'+fname).value;

  // Open PHP script for requests

  http.abort;

  http.open('post', 'uniqueValidator.php');

  http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  http.onreadystatechange = handleResponse(updatediv);

  http.send('field='+fname+'&value='+fvalue);

  setTimeout("sendRequest(fname,updatediv)", 60000);

}

 

function handleResponse(updatediv) {

if (http.readyState == 4) {

    if (http.status == 200) {

      var response = http.responseText;

      if(response) {

        // UPDATE ajaxTest content

        document.getElementById(updatediv).innerHTML = response;

      }

    } else

      alert("status is " + request.status);

  }

}

 

----with this page----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

  <head>

    <title>

      validation_test

    </title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<script type="text/javascript" src="js/ajax.js">

</script>

<script type="text/javascript" src="http://www.hardwarezone.com/lib/core/fValidate.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.formspring.com/forms/form.css" media="all" />

<style type="text/css">

<!--

.txt {

font-family: Verdana, Arial,  Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

line-height: 15px;

color: #FFFFFF;

}

 

.header {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #FFFFFF;

}

body {

margin-top: 0px;

background-image: url();

background-color: white;

}

label.errHilite{

font-weight:bold;

color: #ff0000;

}

-->

</style>

  </head>

  <body>

    <form method="post" enctype="multipart/form-data" action="http://www.formspring.com/forms/index.php" id="mainForm" class="form" onSubmit= "return validateForm(this,false,false,false,false,2)" name="mainForm">

      <input type="hidden" id="form" name="form" value="171847" /> <input type="hidden" id="viewkey" name="viewkey" value="zD5ltkELaR" /> <input type="hidden" id="submit" name="submit" value="1" />

      <div id="formMainDiv">

        <div id="formPage1">

          <div class="formRow" id="fieldRow1770760">

            <div class="formField">

            <label for="field1770760">Name:</label><br />

              <input type="text" id="field1770760" name="field1770760" size="50" value="" class="requiredField formPage1Required" alt="blank" />

            </div>

          </div>

          <div class="formRow" id="fieldRow1770761">

            <div class="formField">

              <label for="field1770761">NRIC:</label><br />

              <input type="text" id="field1770761" name="field1770761" onBlur="sendRequest('1770761','formSubmitButton');" size="50" value="" class="requiredField formPage1Required" alt="blank" />

            </div>

          </div>

        </div>

        <div id="formSubmitButton" class="formSubmit">

          <input type="submit" value="Submit Form" />

        </div>

      </div>

<div id="ajaxTest" style="display:none;"><input type="text" name="1770761_valid" value="" alt="blank"/></div>

 

    </form><a href="http://www.formspring.com/" title="FormSpring Online Form Builder"><img src="http://www.formspring.com/forms/count.php?171847" alt="Form View Counter" width="1" height="1" border="0" /></a>

  </body>

</html>

Link to comment
https://forums.phpfreaks.com/topic/77569-ajax-reponse-no-updating-div/
Share on other sites

  • 2 weeks later...

well actually he is going to div = formSubmitButton

 

but he needs to move his Javascript to bottom and wrap it in

 

<script language="JavaScript" type="text/javascript">

<!--

 

your JS here

 

//-->

</script>

 

IE wont let you reference an object until it is rendered, so put you JS below and give it a try

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.