Updation in database using Ajax

[Shalini Bhalla]

i have 2 tables bank master and branch details having bankcode as a common feild .

i have designed a form in which i am filtering branches according to a particular bank code using ajax , i an fine till this ..... now i want that fields of these records should come in a separate field so that i can change my data there itselfe and using ajax can update database on onblur event ...... how to do this ?

this is my code for displaying information about banches having similar bank_code
[PHP]elseif($name == "select_bank_code")
{
$sql="SELECT * FROM bankbranches WHERE bank_code = '".$q."'";
$result = mysql_query($sql);
echo "<table width='100%'>";
$i=0;
while($row = mysql_fetch_array($result))
{
$bcode = $row['bank_code'] ;
$brcode = $row['branch_code'] ;
$badd = $row['branch_address'] ;
$pin = $row['branch_address'] ;
$bc = "bank_code";

echo "<input name='branch_code[$i]' type='hidden' value='$row[branch_code]'/>";
echo "<tr><td>Bank Code </td><td><input type='text' name='bcode[$i]' value='".$bcode."' onblur='modufy_rec('".$bcode."','".$brcode."',this .value,'bank_code');'></td>";
echo "<tr><td>Branch Code </td><td><input type='text' name='brcode[$i]' value='".$brcode."' onblur='modufy_rec('".$bcode."','".$brcode."',this .value,'branch_code');'></td>";
echo "<tr><td>Branch address </td><td><input type='text' name='baddress[$i]' value='".$badd."' onblur='modufy_rec('".$bcode."','".$brcode."',this .value,'branch_address');'></td>";
echo "<tr><td>Pincode </td><td><input type='text' name='pincode[$i]' value='".$pin."' onblur='modufy_rec('".$bcode."','".$brcode."',this .value,'pincode');'></td>";

$i+1;
}
echo "</table>";


}[/PHP]

Using this i am getting values displayed but onblur is not working , this fuction takes necessary fields for generating query and this is javascript function which calls PHP ultimatly

[acoder]

You seem to have mixed quotes. If you look at the generated source, you should see the problem. Also look at error messages that you may see in the error console.

[Shalini Bhalla]

I have 2 tables bank master and branch details having common fields bank_code

using Ajax i am displaying branch details of a particular bank_code in a dynamic form in texbox so that if i want to make any change i can change and save it using ajax on onblur event of textbox in which i have made changes ..

I have successfully completed till displaying values in text box , but now i want to save Changes where my ajax function is not executing....

code for displaying dynamic for is :

[PHP]elseif($name == "select_bank_code")
{
$sql="SELECT * FROM bankbranches WHERE bank_code = '".$q."'";
$result = mysql_query($sql);

echo "<form name='form2'><table width='100%'>";
$i=0;
while($row = mysql_fetch_array($result))
{
$bcode = $row['bank_code'] ;
$brcode = $row['branch_code'] ;
$badd = $row['branch_address'] ;
$pin = $row['pincode'] ;
$bc = "bank_code";
$br = "branch_code";
$bad = "beanch_address";
$pc = "Pincode";

echo "<tr><input name='branch_code[\'".$i."]\' type='hidden' value='$row[branch_code]'/>";
echo "<td>Bank Code </td><td><input type=\"text\" name=\"bcode{$i}\" value=\" {$bcode}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$bc}')\" /></td>";
echo "<td>Branch Code </td><td><input type=\"text\" name=\"brcode{$i}\" value=\" {$brcode}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$br}')\" /></td>";
echo "<td>Branch Address </td><td><input type=\"text\" name=\"badd{$i}\" value=\" {$badd}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$bad}')\" /></td>";
echo "<td>Pin</td><td><input type=\"text\" name=\"pin{$i}\" value=\" {$badd}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$pc}')\" /></td>";
$i+1;
}
echo "</table></form>";
[/PHP]


and code for Aajax is :


[HTML]<script>


function modify_rec(bcode,brcode,val,nm)
{

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
alert("fsdsf12");
if(ajaxRequest.readyState == 4){
document.form2.time.value = ajaxRequest.responseText;
}
}
alert("fsdsf13");
url=url+"?bcode=" + bcode + "&brcode=" + brcode + "&fnm=" + nm + "&val=" + val;
alert(url);
ajaxRequest.open("GET", "modify_branches.php" + url , true);
ajaxRequest.send(null);
}
</script>[/HTML]


when i am calling modify_rec()

using alert i can see that values have been passed in function but when i am trying to alert url from modify_rec() nothing have been printed ....

can anbody solve the problem

[acoder]

Merged threads since it relates to the same problem (title).

Show the generated source as the HTML appears on the client-side in your browser (View Source).

[Shalini Bhalla]

i am not understanding exactly what you want to know ?

[acoder]

OK, I'll try again. Can you see this part:
[PHP]echo "<tr><input name='branch_code[\'".$i."]\' type='hidden' value='$row[branch_code]'/>";
echo "<td>Bank Code </td><td><input type=\"text\" name=\"bcode{$i}\" value=\" {$bcode}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$bc}')\" /></td>";
echo "<td>Branch Code </td><td><input type=\"text\" name=\"brcode{$i}\" value=\" {$brcode}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$br}')\" /></td>";
echo "<td>Branch Address </td><td><input type=\"text\" name=\"badd{$i}\" value=\" {$badd}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$bad}')\" /></td>";
echo "<td>Pin</td><td><input type=\"text\" name=\"pin{$i}\" value=\" {$badd}\" onblur=\"modify_rec('{$bcode}', '{$brcode}', this.value,'{$pc}')\" /></td>";[/PHP] That's PHP which I can understand, but I'd rather see the HTML. If you load the page in your browser and then in the browser menu select View -> Source (or Page Source). This will show you the HTML code as rendered in the browser. Find the form/table code and post that here.

[Shalini Bhalla]

This is the code vhich i am getting after executing ajax first time

[HTML]



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BANK BRABCH DETAILS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style1.css" rel="stylesheet" type="text/css">
<script>


var xmlHttp

function showUser(str , nm)
{


xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="get_bank_branch_code.php";
url=url+"?q="+str+"&name="+nm;
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}


function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHt tp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

</script>

<script>


function modify_rec(bcode,brcode,val,nm)
{

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
alert("fsdsf12");
if(ajaxRequest.readyState == 4){
document.form2.time.value = ajaxRequest.responseText;
}
}
alert("fsdsf13");
url=url+"?bcode=" + bcode + "&brcode=" + brcode + "&fnm=" + nm + "&val=" + val;
alert(url);
ajaxRequest.open("GET", "modify_branches.php" + url , true);
ajaxRequest.send(null);
}
</script>

</head>

<body >
<form name="form1" >
<div align="center">
<table width="103%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabborder">
<tr>
<td colspan="4"><div align="left">
<input type="button" name="new_rec" value="Add New Record " >
</div></td>

</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td colspan="4" class="box">Bank Master </td>
</tr>
<tr>

<td colspan="4"><div align="center">
<table width="100%" border="0" cellpadding="3" cellspacing="3">
<tr>
<td width="17%" height="30">Branch Code </td>
<td width="8%" height="30"><select name="select _bank_branch_codes" onchange="showUser(this.value , this.name);">
<option value="" selected >Search </option>
<option value='b101'>b101</option><option value='b102'>b102</option> </select></td>

<td width="11%" height="30">Bank Code</td>
<td width="9%" height="30"><select name="select_bank_code" class="tabborder" id="select5" onchange="showUser(this.value , this.name);">
<option value="" selected >Search </option>
<option value='01'>01</option><option value='02'>02</option> </select></td>
<td width="9%">Pin Code </td>
<td width="46%"><input type="text" name="pin" onblur="showUser(this.value , this.name);"></td>

</tr>
<tr>
<td colspan="6"><div id="txtHint"><b>User info will be listed here.</b></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>

<td colspan="2" class="box"><input name="save_chg" type="submit" id="save_chg" value="Save Changes"></td>
<td colspan="2" class="box"><input type="submit" name="Submit" value="Delete"></td>
</tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td colspan="4" class="box"><div align="left">List Of All Banks </div></td>

</tr>
<tr class="tabborder">
<td width="7%" class="tabborder"><div align="center">S.No</div></td>
<td width="8%" class="tabborder"><div align="center">Bank Code</div></td>
<td width="49%" class="tabborder"><div align="center"> Branch Code </div></td>
<td width="36%" class="tabborder"><div align="center">Branch Address </div></td>

</tr>
<tr class='tabborder'><td class='tabborder' align='center'>1</td><td class='tabborder' align='left'>b101</td><td class='tabborder' align='left'>01</td><td class='tabborder' align='left'>janakpuri</td></tr> <tr class='tabborder'><td class='tabborder' align='center'>2</td><td class='tabborder' align='left'>b102</td><td class='tabborder' align='left'>01</td><td class='tabborder' align='left'>Vikaspuri</td></tr> </table>
</div>
</form>

</body>
</html>
[/HTML]

[acoder]

Ah, I see. The code will obviously be added via Ajax.

OK, so now load the requested page directly in the browser with the parameters you would pass when making the Ajax request, e.g. "get_bank_branch_code.php?q=01&name=select_bank_co de" and check the source and display that here.

[Shalini Bhalla]

After requesting above url with variable what ever code i got was corrected and noe i am getting this but , values still are not getting updated


[HTML]<form name='form2'><table width='100%'><tr><input name='branch_code[0]' type='hidden' value='b101'/>

<td>Bank Code </td><td><input type="text" name="bcode[0]" value=" 01" onblur="modify_rec('01', 'b101', this.value,'bank_code')" /></td>

<td>Branch Code </td><td><input type="text" name="brcode[0]" value=" b101" onblur="modify_rec('01', 'b101', this.value,'branch_code')" /></td>

<td>Branch Address </td><td><input type="text" name="badd[0]" value=" janakpuri" onblur="modify_rec('01', 'b101', this.value,'beanch_address')" /></td>

<td>Pin</td><td><input type="text" name="pincode[0]" value=" 110018" onblur="modify_rec('01', 'b101', this.value,'Pincode')" /></td>


<tr><input name='branch_code[1]' type='hidden' value='b102'/>

<td>Bank Code </td><td><input type="text" name="bcode[1]" value=" 01" onblur="modify_rec('01', 'b102', this.value,'bank_code')" /></td>

<td>Branch Code </td><td><input type="text" name="brcode[1]" value=" b102" onblur="modify_rec('01', 'b102', this.value,'branch_code')" /></td>

<td>Branch Address </td><td><input type="text" name="badd[1]" value=" Vikaspuri" onblur="modify_rec('01', 'b102', this.value,'beanch_address')" /></td>

<td>Pin</td><td><input type="text" name="pincode[1]" value=" 110048" onblur="modify_rec('01', 'b102', this.value,'Pincode')" /></td></table></form>[/HTML]

[acoder]

If you look at the values, each of them has a space before them. That's the problem. Remove the spaces and it should hopefully work.

[Shalini Bhalla]

i have done it , and now the same thing is there , the valus are being passed but url is not coming when i try to print

[acoder]

Then check that modify_branch.php does what is expected.

If you try the link directly with example parameters, e.g. "modify_branch.php?bcode=01&brcode=b101&fnm=bank_c ode&val=(put the value here)".

[Shalini Bhalla]

Thanks a lot sir , you have helped me alot to get ubderstand my problem , actually mu modify_branches is 100% correct , is getting update from direct request , but why not usin ajax function ?........

[acoder]

OK, on ready state 4, you've got this line:

document.form2.time.value = ajaxRequest.responseText;

I don't see a time field in form2. What does modify_branch.php output?

[Shalini Bhalla]

now what to do with this ? i am able to pass the name of existing feild in my for bur name is in variable how to concatenate it with documnet.______

[acoder]

If I understand you correctly, you want to use a variable as a field. You can use the forms/elements array:

document.forms[varContainingFormName].elements[varContainingElemName];
 

[Shalini Bhalla]

My updation is perfactly done now i want to write a code for delete but again stucking .....................


my file code is given above , now i want to delete all searched records ot a same time usin ajax .............how to go about it

[acoder]

That's good to hear. How did you solve it?

As for the deletion, that would take place on the server-side. First, get that working. Once you have it working, you need to pass the correct parameters to delete the records most probably as a POST request.