Dear Paul,
I can confirm that because if it is null then my drop down list wont be built with all the values from ajax.
Well that’s odd, because taking the ajax part out of the equation by substituting a suitable replacement for the responseText, the code you posted seems to do the job well.
<table id="myTable">
<tr id="row0"></tr>
<tr id="row1"></tr>
<!-- script adds row two here -->
</table>
<script>
var xmlhttp = {
responseText: 'responseText content for the second cell'
};
var x=document.getElementById('myTable').insertRow(2);
var y=x.insertCell(0);
var z=x.insertCell(1);
var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
y.innerHTML="<label class=description for=element_1>Master <font color='red'>*</font></label> ";
while (newdiv.hasChildNodes())
{
z.appendChild(newdiv.firstChild);
}
</script>
I do see though that you’re adding a row with insertRow(2) which requires that the table already has rows 0 and 1 existing within it.
That’s about the only other reason why your script won’t work, if the table doesn’t have enough rows already inside of it.
Dear Paul,
No the row 0 and 1 is fixed and wont be altered at all. Is there forever. Only I call dynamically to add and remove will be row 2 and the rest. My odd problem here why in IE it works fine but not in Firefox and Chrome. I am also lost.
Does the sample test code from my previous post work for you in Firefox? If it does work, compare it with your own scripting code and you will find that the two are virtually identical.
That then means that the scripting code may not be the problem.
Use something like this, it works.
function parseMe(FormNameHere){
var XMLHttp;
try {
XMLHttp = new ActiveXObject("Msxml2.XMLHttp");
}
catch(e) {
try {
XMLHttp = new ActiveXObject("Microsoft.XMLHttp");
}
catch(i) {
XMLHttp = (typeof(XMLHttpRequest) != undefined) ? new XMLHttpRequest() : false;
}
}
if (XMLHttp==null){
alert("Browser does not support HTTP Request! Try using Firefox!");
return false;
}
var VariableOne = encodeURIComponent(document.forms["FormNameHere"].elements["VariableOne"].value);
var VariableTwo = encodeURIComponent(document.forms["FormNameHere"].elements["VariableTwo"].value);
var url="getMasterList.php";
var params="v1="+VariableTwo+"&v2="+VariableOne;
XMLHttp.open("POST",url,true);
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XMLHttp.setRequestHeader("Content-length", params.length);
XMLHttp.setRequestHeader("Connection", "close");
XMLHttp.onreadystatechange = function () {
if (XMLHttp.readyState == 4) {
document.getElementById("myTable").innerHTML = XMLHttp.responseText;
}
};
XMLHttp.send(params);
return false;
}
<form action="#" method="POST" id="FormNameHere" name="FormNameHere" onSubmit="return parseMe(this);">
<div class="col2InnerRow">
<input class="text-input" name="VariableOne" id="VariableOne" type="hidden">
<input class="text-input" name="VariableTwo" id="VariableTwo" type="hidden">
<p><input type="submit" class="submit" value="Submit"></p>
</div>
</form>
Dear Paul,
I have further extended your code so that I can submit the form as below.The fortunate part now when I post it is ok in both firefox and IE. Immediately below is also my fully getMaster function can see both are identical.
<?php
session_start();
if($_POST[‘submit’])
{
echo “Master ID:”.$_POST[‘masterID’];
}
?>
<html>
<body>
<form action=“<?=$_SERVER[‘PHP_SELF’]?>” method=“post” name=“form1” id=form1 >
<table id=“myTable”>
<tr id=“row0”></tr>
<tr id=“row1”></tr>
<!-- script adds row two here –>
</table>
<input class=“buttons” type=“Submit” name=“submit” value=“submit” >
</form>
<script>
var xmlhttp =
{
responseText: ‘<input type=text name=masterID id=masterID value=4>’
};
var x=document.getElementById(‘myTable’).insertRow(2);
var y=x.insertCell(0);
var z=x.insertCell(1);
var newdiv = document.createElement(“div”);
newdiv.innerHTML = xmlhttp.responseText;
y.innerHTML="<label class=description for=element_1>Master <font color=‘red’>*</font></label> ";
while (newdiv.hasChildNodes())
{ z.appendChild(newdiv.firstChild);
}
</script>
</body>
</html>
My getMaster.
function getMaster(entID,nextElement,str)
{
var table = document.getElementById(‘myTable’);
var rowCount = table.rows.length;
//alert("Row count : "+rowCount);
if(rowCount>2)
{
for(var i=2; i<rowCount; i++)
{
var row = table.rows[i];
table.deleteRow(i);
rowCount--;
i--;
}
}
differentiator=Math.floor(Math.random()50000);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var x=document.getElementById(‘myTable’).insertRow(2);
var y=x.insertCell(0);
var z=x.insertCell(1);
var newdiv = document.createElement(“div”);
newdiv.innerHTML = xmlhttp.responseText;
y.innerHTML="<label class=description for=element_1>Master <font color=‘red’></font></label> ";
while (newdiv.hasChildNodes())
{ z.appendChild(newdiv.firstChild);
}
var a=document.getElementById('myTable').insertRow(3);
var b=a.insertCell(0);
var c=a.insertCell(1);
b.innerHTML="";
c.innerHTML="<p class=error id='masterIDError'>";
if(nextElement=="trailer")
{
getTrailer(entID);
}
else
{
getSlaves(entID,str);
}
}
}
xmlhttp.open(“GET”,“getMasterList.php?e=”+entID+“&d=”+differentiator,true);
xmlhttp.send();
}
Dear Linuxfreelancer,
I dont quite get you why you need this.
XMLHttp.onreadystatechange = function ()
{
if (XMLHttp.readyState == 4)
{
document.getElementById(“myTable”).innerHTML = XMLHttp.responseText;
}
};
After posting the form, this returns the value returned by the parsing php script. So the form can be in the div and after submission, the form is replaced by a message like “thank you for submitting” or whatever you want to show there.
I use something like this on a social networking script’s “facebook like wall”. After submitting, the div contents are updated with the new status message posted, just like on facebook. I hope this makes sense.
Why are you doing this?
<?=$_SERVER[‘PHP_SELF’]?>
That is kind of a waste of resources. Just put the script name or even “#”.
Also, start using full tags because your scripts will break soon if you use shorthand, should be:
<?PHP $_SERVER[‘PHP_SELF’]?>
I hate to ask, for fear of ruining the hard work you’ve done so far, but is there a reason you’re not using a JavaScript library? It makes this sort of stuff much more concise/manageable.
I kind of like custom myself… most of the time, custom lets you tighten up the code better without any filler you don’t need. That’s just my 2 cents.
I need to see the full code, can you pass me the url, that is even better.
Dear LinuxFreeLancer,
I just put like this. Again in IE the alert appear but not in Firefox. So what could be thins problem?
var VariableOne = encodeURIComponent(document.forms[“form1”].elements[“masterID”].value);
alert(“MAster ID:”+VariableOne);
Dear Anthony,
I do not of any specific library which could do my task exactly?
use post tag nd new div=“” change the attributes
Please use complete sentences so it makes sense, we are not in your mind so shorthand isn’t so good in this instance.
Here’s a very simple jQuery implementation to make a [URL=“http://api.jquery.com/jQuery.post/”]POST request to the server, then [URL=“http://api.jquery.com/append/”]append the result to a HTML table.
<?php
if('POST' === $_SERVER['REQUEST_METHOD']){
echo 'The server says the time is ' . date('r') ;
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<title>
Sitepoint.com Demo
</title>
<style type="text/css">
#request{
padding: 5px;
margin: 5px;
border: solid 1px #ccc;
text-decoration: none;
}
#request:hover{
background-color: #eee;
}
</style>
</head>
<body>
<table id="results">
<thead>
<tr>
<th>Request #</th>
<th>Response</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a id="request" href="#">Request Server Time</a>
<script type="text/javascript">
$(document).ready(function(){
$('#request').click(function(){
$.post('index.php', function(time){
var requestNumber = $('#results tbody tr').length + 1;
$('#results tbody').append('<tr><td>' + requestNumber + '</td><td>' + time + '</td></tr>');
})
});
});
</script>
</body>
</html>
The URL for this is here, so you can see it live.
Dear LinuxFreelancer,
Here is my link http://183.78.169.53/scv/a2.php. You can just fill a text value into the A1 input box. Then just select the vehicle drop down list and will see a master list. Just pick any master list and submit the form. You will notice the masterID does not appear when I capture the post values.
Woah, that’s pretty JS heavy. Have you managed to look at any of the JS libraries yet?
Asset : TestngA1masterID : 4
I got that after I submitted, TestngA1 was my A1 text, looks like it posts fine… unless I am missing something?