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
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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.