Strange problem with post data not showing

Skylight_lady · February 23, 2011

Hi,

This is a strange problem i have. I am using javascript, php, sql and i'm also hiding/showing a div content. When i show this div content by clicking the following link:

<a href="javascript:showEditDiv('edit','<?php echo $this->userInterestID[$i]; ?>','interest');">

It is displayed correctly. However, everything works smoothly in FireFox but in IE the only problem is .....

If you first click the above link the div will open and it will show the correct info without making a change - thats good.

If you make a change and click the "SAVE" button in the opened div it's div will save the info to the database and hide that div while the info will be displayed correctly BUT when i click the javascript:showEditDiv('edit' link again for the row i made a change to then in IE the old information is displayed and not the new change. The change is already made to the db and is displaying correctly there. Weird !!!

Main page:

<?php
defined('_JEXEC') or die('Restricted access');
?>
<script type="text/javascript" src="interest.js"></script>

<div id="userDataEdit" style="display:none;"></div>
<div id="userDataList">
<div style="padding-left:24px;">
<h3>
<img src="images/add_new_big.png" style="padding-right:5px;"></img> 
<a href="javascript:showEditDiv('add','','interest');">add new interest...</a></h3>

</div>
<div style="padding:0 25px 0  0;">
<?php 
if ($this->numInterest > 0) {?>
<table id="hor-minimalist-b">

  <thead>
        <th align="left" scope="col">Description</th>
        <th colspan="2" scope="col"></th>
    </thead>
    <tbody>
  <?php
  $i = 0;
  while ($i < $this->numInterest) {
  ?>
  <tr>
    <td align="left" valign="top"><?php echo $this->interestDesc[$i]; ?></td>
    <td width="20px;"><a href="javascript:showEditDiv('edit','<?php echo $this->userInterestID[$i]; ?>','interest');"><img src="images/edit.png"></img></a></td>
    <td width="20px;"><a href="javascript:confirmDelete('index.php?option=com_interest&view=interest&task=deleteInterest&interestID=<?php echo $this->userInterestID[$i]; ?>');"><img src="images/delete.png"></img></a></td>
   
</tr>
  <?php
  	$i++;
  }
  ?>
  </tbody>
</table>
<?php } ?>
       </div></div>

The Show edit div (called edit_add.php):

<?php
$intID = "";
$userInterestType = "";
$userInterestDesc = "";
include_once('../../inc_connect.php');
if (isset($_GET["id"])) {
    $incID = $_GET["id"];

    $qry = "select * from userinterest where userInterestID = '".$_GET["id"]."'";
    //echo $qry;
    $res = mysql_query($qry);
    $row = mysql_fetch_array($res);
$userInterestType = $row["userInterestID"];
$userInterestDesc = $row["userInterestDesc"];
}
//get all insurances...
$qry = "select * from interest";
$r1 = mysql_query($qry);
$script = "
var lv_int = new Array(); ";
while($rw = mysql_fetch_array($r1)) {
$script .= "lv_int[".$rw["interestID"]."]='".$rw["interestDesc"]."'; ";
}
$res = mysql_query($qry); 
?>
<h3 style="margin:0">
<img src="images/add_new.png" style="padding-right:5px;"></img>
<img src="images/edit.png" style="padding-right:5px;"></img>
Add/Edit Interest</h3>
<hr>
<form action="index.php?option=com_interest&view=interest&task=saveInterest&Itemid=84&interestID=<?php echo $intID;?>" method="post" name="myform" id="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td align="right">Type:</td>
    <td align="left">
    <select name="userInterestType" id="userInterestType" onchange="<?php echo $script; ?> document.myform.userInterestDesc.value = lv_int[this.value];">
    <option value="">Select one...</option>
      <?php
      while($row = mysql_fetch_array($res)) {
      ?>
      <option value="<?php echo $row['interestID']; ?>" <?php if ($row['interestID']==$userInterestType) { ?> selected="selected"<?php } ?>><?php echo $row['interestDesc']; ?></option>
      <?php
      }
      ?>

    </select>
    </td>
  </tr>
  <tr>
    <td align="right">Description:</td>
    <td align="left"><input name="userInterestDesc" type="text" id="userInterestDesc" value="<?php echo $userInterestDesc; ?>" /></td>
  </tr>
  <tr>
    <td align="right"> </td>
    <td align="left">
    <span class="art-button-wrapper">
    	<span class="l"> </span>
    	<span class="r"> </span>
    <input type="submit" name="btnSave" id="btnSave" value="SAVE" onclick="return checkFields('interest');" class="button art-button" />
    </span>
    <span class="art-button-wrapper">
    	<span class="l"> </span>
    	<span class="r"> </span>
    <input type="button" name="btnCancel" value="CANCEL" onclick="hideEditDiv();" class="button art-button" />
    </span>
    </td>
  </tr>
</table>
</form>

Javascript with additional code for another page:

function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;	
try{
	xmlhttp=new XMLHttpRequest();
}
catch(e)	{		
	try{			
		xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(e){
		try{
		req = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e1){
			xmlhttp=false;
		}
	}
}

return xmlhttp;
}
function showEditDiv(lv_action,lv_recid,lv_view) {		

var req = getXMLHTTP();
strURL = "components/com_interest/views/"+lv_view+"/edit_add.php";
if (lv_recid!='') {
	strURL = strURL + "?id=" + lv_recid;
}

if (lv_view=="interest") {
	strURL = "components/com_interest/views/interest/one_"+lv_action+".php";
	if (lv_recid!='') {
		var ids = lv_recid.split("|");
		lv_monthid = ids[0];
		lv_recid = ids[1];
		if (lv_recid!='x') {
			strURL = strURL + "?id=" + lv_recid + "&monthinterestID="+lv_monthid;
		} else {
			strURL = strURL + "?monthinterestID="+lv_monthid;
		}
	}
}
//alert(strURL);
if (req) {
	req.onreadystatechange = function() {
		if (req.readyState == 4) {
			// only if "OK"
			if (req.status == 200) {						
				document.getElementById('userDataEdit').innerHTML=req.responseText;	
				document.getElementById('userDataEdit').style.display = 'inline';
				document.getElementById('userDataList').style.display = 'none';

			} else {
				alert("There was a problem while using XMLHTTP:\n" + req.statusText);
			}
		}				
	};
	req.open("GET", strURL, true);
	req.send(null);
}

}
function hideEditDiv() {
document.getElementById('userDataEdit').style.display = 'none';
document.getElementById('userDataList').style.display = 'inline';
}
function checkFields(lv_view) {
var fields=new Array();
var errMsg=new Array();

switch(lv_view) {	
case "interest":
	fields[0]="userInterestDesc";
	errMsg[0]="Please enter a insurance description";
	break;	
}
lv_err = "";
for (var i = 0; i < fields.length; i++) {
	if(document.getElementById(fields[i]).value=="") {
		lv_err = errMsg[i]; 
	}
}
if (lv_err=="") {
	return true;
} else {
	alert(lv_err);
	return false;
}	
}
function confirmDelete(strURL) {
var answer = confirm ("Do you really want to delete this record?");
if (answer)	{
	window.location=strURL;
} 

}

I hope this is enough info. Can someone please help??

ChemicalBliss · February 24, 2011

Aside from being a Javascript question, specifically, a Javascript DOM Modification Compatibility Issue -

Quite a common problem, I would check here for some good info and a quick-fix solution: http://domscripting.com/blog/display/99

To re-iterate...

Instead of just editing the DOM like this:

var container = document.getElementById("container");
container.innerHTML = xhr.responseText;

You would first create a new element and edit the inner HTML of that, then insert this next to an element:

var newdiv = document.createElement("div");
newdiv.innerHTML = xhr.responseText;
var container = document.getElementById("container");
container.appendChild(newdiv);

hope this helps

Psycho · February 24, 2011

I'm ot an AJAX expert by any means, But, I recall there is a well know problem in IE that when you make a call via AJAX if the query string has not changed you will get back the exact same results every time because IE caches the results.

WHen I encountered this in the past I worked around it by adding a random value to the AJAX request. That forces IE to get fresh data. For example, I think strURL is the URL you are passing through AJAX. Just add something like this to add a timestamp to the end of the url

strURL += 'timestamp='+getTime()

I recall reading something a while ago that had a more elegant solution. So, you might want to do some more research into it. But, the above should be very easy to try

EDIT: This is probably either a JavaScript or AJAX problem. Moving to JS forum for now.

Skylight_lady · February 24, 2011

It does sound like a caching problem with IE. That was my first thought. I tried the timestamp without any like sorting it:

var d = new Date();
strURL = "components/com_interest/views/"+lv_view+"/edit-add.php?timestamp="+d.getTime();

So i moved on to try the DOM solution. I'm am clueless how to add that solution to the code. Thats brand new to me.

I have another solution that works fine - this solution doesn't use the hide or show div. It's added to a new page and works. I would prefer to sort this IE problem first ..... otherwise it will be wreaking my head.

Any hints on how to ADD the DOM code to that script?

Psycho · February 24, 2011

The DOM solution will only work if the problem is due to the client side JavaScript display code. If it is a caching problem the DOM "solution" will not work. You need to identify the cause of the problem and then implement the correct solution.

To determine if it is a caching problem you can have the javascript alert() the response back from the AJAX call. If that response is the same every time when it should be different - then it is a caching problem. If the data returned back from the AJAX call is correct - but is not getting displayed in the DIV, then it is a DOM issue.

ChemicalBliss · February 24, 2011

Basically the problem is here:

   if (req) {
      req.onreadystatechange = function() {
         if (req.readyState == 4) {
            // only if "OK"
            if (req.status == 200) {                  
               document.getElementById('userDataEdit').innerHTML=req.responseText;   
               document.getElementById('userDataEdit').style.display = 'inline';
               document.getElementById('userDataList').style.display = 'none';
               
            } else {
               alert("There was a problem while using XMLHTTP:\n" + req.statusText);
            }
         }            
      };
      req.open("GET", strURL, true);
      req.send(null);
   }

Either as mjdamato stated a caching problem (you can fix with a no-cache/pragma header - google if you want), or a known IE DOM innerHTML editing bug (possibly also related to some sort of caching the DOM, just a guess).

You should, as mjdamato stated, find the cause of the issue -> Debug!

Debugging code is real simple and it looks like you know how to already since you have commented an alert() to check the url you were fetching data from.

This time though, check the result of the xmlhttp request. If the result is the same as the data that was on the page then you have a problem with IE' caching as mjdamato stated.

On the other hand

If the results are as predicted (you should use no-cache headers anyway just to be safe), and it is just not updating the div properly, then something like this should do the trick:

            if (req.status == 200) {
               var newdiv = document.createElement("div");
               newdiv.innerHTML = req.responseText;

               var userDataEditDiv = document.getElementById('userDataEdit');   
               userDataEditDiv.appendChild(newdiv);
               
               document.getElementById('userDataEdit').style.display = 'inline';
               document.getElementById('userDataList').style.display = 'none';
               
            } else {
               alert("There was a problem while using XMLHTTP:\n" + req.statusText);
            }

hope this helps

Skylight_lady · February 24, 2011

Ok. The last solution didn't work.

var newdiv = document.createElement("div");
               newdiv.innerHTML = req.responseText;

               var userDataEditDiv = document.getElementById('userDataEdit');   
               userDataEditDiv.appendChild(newdiv);
               
               document.getElementById('userDataEdit').style.display = 'inline';
               document.getElementById('userDataList').style.display = 'none';

What it actually does is it ADD's a brand new page everytime the edit link is clicked e.g if i hit it 3 time by opening and closing it then 3 of those hidden divs will open up, the more times i hit it the more times the hidden div's will show up.

Also, caching the page will give me blank data when the hidden div is shown. How do i debugg this in the browser .... i'm not a javascript expert but have a fair amt of understanding of it. I have used:

javascript:alert("document.getElementById('userDataEdit').innerHTML=req.responseText;")

etc in the web browser without finding the problem.

Psycho · February 24, 2011

Alert the response back from the AJAX call. Is it what you expect? If not, then it is probably a caching issue. Otherwise, it is probably a problem with populating the response in the existing DIV

   if (req) {
      req.onreadystatechange = function() {
         if (req.readyState == 4) {
            // only if "OK"
            if (req.status == 200) {
//ADD THIS NEXT LINE
               alert(req.responseText);        
               document.getElementById('userDataEdit').innerHTML=req.responseText;   
               document.getElementById('userDataEdit').style.display = 'inline';
               document.getElementById('userDataList').style.display = 'none';
               
            } else {
               alert("There was a problem while using XMLHTTP:\n" + req.statusText);
            }
         }            
      };
      req.open("GET", strURL, true);
      req.send(null);
   }

Skylight_lady · February 24, 2011

Thanks. That alert has shown all the html tags, form and their values. It shows correctly when the user clicks edit ... i then change the interestType which will automatically add the interestDesc into the other input box and have the type selected. Once i clicked save button that window closes and shows in the table. Now, i go to re-edit the row and the ALERT shows the same data from the first time and not the new values. So this is the same problem .... sorry if i'm continually repeating it.

Psycho · February 24, 2011

Right, the AJAX query is pulling cached data as I stated in my first post. You can either add a random parameter to the URL of the AJAX query as I suggested or research the other solution that is available.

Here are a couple of links on the issue (I just googled them just now - I did not read them)

http://www.codecouch.com/2009/01/how-to-stop-internet-explorer-from-caching-ajax-requests/

http://ajaxian.com/archives/ajax-ie-caching-issue

http://weblogs.asp.net/pleloup/archive/2006/06/08/451583.aspx

Sign In

Strange problem with post data not showing

Recommended Posts

Skylight_lady

Link to comment

Share on other sites

ChemicalBliss

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Skylight_lady

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

ChemicalBliss

Link to comment

Share on other sites

Skylight_lady

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Skylight_lady

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information