Member Avatar for mikecronauer

I am using a web page to input data into mysql using php.

I am using ajax to pull back the same data from a php file on the same web page.

I click my "get data" button (it runs my ajax/php function) right after I make an update to the database, and the data will not refresh! It only will show the newly input data if I fully close and re open my browser (internet explorer). I tried refreshing the page and then re running the function but it does not work. I actually have to fully close the ie session and open it back up to get the new data to show up.

Why is this?

  • 2 Contributors
  • 5 Replies
  • 263 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by mikecronauer
Member Avatar for Nyight

What does your code look like? You don't have to post the full thing but posting the possible problematic areas would be very helpful.

[Edit]
And if you do, PLEASE remember to wrap it in the code tags.

Edited by Nyight because: n/a
Member Avatar for mikecronauer

I trying to get this to work off of an "email" table that I have available to me....

HTML FILE - This file has the form to push the data into MYSQL and has the button to run the function to pull data back using ajax from a php file that talks to sql

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>--------------------------</title>
<link type="text/css" rel="stylesheet" href="sig.css" />
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="testpull.js"></script>
</head>
<body>
<div id="allcontent">
<div id="sidebar">
<br />
<p id="home">
-------------------------
<form method="post" action="addemail.php">
    <label for="username">User name:</label>
    <input type="text" id="username" name="username" /><br />
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" /><br />
    <input type="submit" name="Submit" value="Submit" />
  </form>
---------------------

---------------
<button type="button" onclick="showdata()">showdata</button>
<div id="placedata">
</div>
</div>
</div>
</body>
</html>

addemail.php --- no ajax here, HTML feeds mysql using post ----

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Kill Debt Get Rich</title>
  <link type="text/css" rel="stylesheet" href="sig.css" />
</head>
<body>

<?php
  $dbc = mysqli_connect('localhost', '-----, -----,------')
    or die('Error connecting to MySQL server.');

  $user_name = $_POST['username'];
  $email = $_POST['email'];

  $query = "INSERT INTO email_list (user_name, email)  VALUES ('$username', '$email')";
  mysqli_query($dbc, $query)
    or die('Error querying database.');

  echo 'Email added.';

  mysqli_close($dbc);
?>

</body>
</html>

If I add 10 items to MYSQL I want to be able to instantly view them by clicking my "show data button" .... so the rest is Javascript / AJAX talking to a php file

My showdata function is in my test pull js file ... (notice createrequest function is within the showdata function ... I will show that js file next) ALSO the getalldata.php file will communicate with the mysql and return the values

function showdata()
{
request = createRequest();
if (request==null){
	return;
	}
var url = "getalldata.php";
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}


function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
    
      placedata.innerHTML = request.responseText;
    }
  }
}

Here is my utils file just so I can reuse the same code later on ...

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }	
  return request;
}

now for the php code that runs to get the data ...

<?php
$con = mysql_connect('localhost', ---, '---');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("----", $con);

$result = mysql_query("SELECT * FROM email_list");

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
    echo " ---- ";
    echo "<td>" . $row['user_name'] . "</td>";
    echo " ---- ";
    echo "<td>" . $row['email'] . "</td>";
    echo "<br />";
  echo "</tr>";
  }

mysql_close($con);
?>

There are so many different technologies going on, I am trying to piece them all together. I wish there was a book that focused specfically on just how PHP AND AJAX interact with one another. It seems it is always PHP & MYSQL grouped together.

Anyway, the only way this code works after I click the show data button is if I fully close and re open the browser first. Even if I hit refresh on the browser to clear out the table first it still wont recognize that I input 10 new lines, it actually pulls in the old table... the data that was previously there. It is like the previous table is stuck in memory somewhere.

Member Avatar for Nyight

Have you tried putting alerts() within the javascript at critical locations to make sure the information is actually being sent as well as received? I see you have a lot of simple returns instead of alerts so that's what made me wonder if you were checking them for errors.
E.g.

function showdata()
{
request = createRequest();
if (request==null){
	alert("request is null, no ajax will be done"); // Check to make sure the request is actually being created.
	return;
	}
var url = "getalldata.php";
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}
 
 
function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      placedata.innerHTML = request.responseText;
	alert(placedata.innerHTML); // Check to make sure the text is actually being put into it.
    }
  }
}

Another thing you might want to consider switching to would be jQuery. jQuery simplifies the process of ajax quite a bit (though it can take away some of the functionality of it as well).

Anyway, I'd recommend doing a manual stack trace and make sure each step is doing what it's suppose to be doing. E.g. make sure the button works by putting an alert at the very top of the showdata(), trace showdata() back one step at a time, go into createRequest() and make sure those try()'s aren't screwing things up, then manually view your php page that ajax is suppose to be talking to to make sure it's actually posting the information correctly so that ajax can grab it, etc...

Member Avatar for mikecronauer

I used the alerts, that helped my understaning.

Here is the thing though ... the code is working, just not more than once within the same browser session. So if you add three lines to the table and click the show data button, it works, but if you go to add more lines and click the show data button, the no new lines show up. Even if you click refresh. You have to completely close the browser and then reopen it for it to work.

Am I allowed to give you the web address so you can see what I mean? (not sure the rules of this forum)

Member Avatar for mikecronauer

OK first I want to say ... Nyigt ...thank you so much for all of your help! You were right, IE was caching the results and this was messing up the ajax call. It was pulling non current results ... results stored away in the browsers cache. Line 8 the adjustment or "cache buster" is what solved this issue . . . the appending of a date and time. Basically it makes the URL unique, so it is different the next time someone runs it, so it does not pull the cached result.

Thanks again, there is no way I would have known about this if not for your help.

function showdata()
{
request = createRequest();
if (request==null){
	return;
	}
	
var url = 'getalldata.php?+randNum=' + new Date().getTime();
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}


function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
    
      placedata.innerHTML = request.responseText;
    }
  }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.