Codeigniter with Ajax

[eluser]Joshi[/eluser]
Hi,

I am very new to ci and Ajax. I have a requirement where i have to dynamically display data in the texbox in onChange event of a drop down.I have tried the code and the data is not passed from the php to the javascript. I have posted the code for your reference.

Code:

sample.php

// My Ajax Function
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{

                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

                }

                catch(e1){

                    xmlhttp=false;

                }

            }

        }

            

        return xmlhttp;

    }

    

    function getBankDetails(strURL) {        

        

        var req = getXMLHTTP();

        

        if (req) {

            

            req.onreadystatechange = function() {

                if (req.readyState == 4) {

                    // only if "OK"

                    if (req.status == 200) {
                                                                                              document.getElementById('bankNameForACH')[removed]=req.responseText;                                

                                                          

                    } else {

                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);

                    }

                }                

            }            
            alert(strURL);

            req.open("GET", strURL, true);

            req.send(null);

        }

                

    }

<table id="ACH" width="100%"  border="0" cellspacing="5" cellpadding="0">
<tr>
    <td  width="120" align="right" class="tahoma12blk">Account No :<span id='require'>*</span></td>
        <select name="accountNoForACH" id="accountNoForACH">
          &lt;?php if($bnkDetails)
            {
            foreach($bnkDetails as $in){?&gt;
                  <option value="&lt;?php echo decrypt($in->accountNo) ?&gt;">&lt;?php echo decrypt($in->accountNo) ?&gt;</option>
                 &lt;?}    
            }?&gt;
          </select>
      </td>
</tr>
<tr>
    <td  width="120" align="right" class="tahoma12blk">Bank Name :<span id='require'>*</span></td>
    <td>&lt;input type="textbox" id="bankNameForACH" name="bankNameForACH" class="input"/&gt;&lt;/td>
</tr>
<tr>
    <td  width="120" align="right" class="tahoma12blk">Routing No : <span id='require'>*</span></td>
    <td>&lt;input type='textbox' name='routingNoForACH' id="routingNoForACH" class="input"/&gt;&lt;/td>
</tr>
</table>

// The function in itemDesc.php
function getDetails($accID){
$decryptAccount = encrypt($accID);
$bankDetails = $this->accounts->getBankAccount($decryptAccount);
$data = array();
$data['bankNameForACH'] = $bankDetails->bankName;
$data['routingNoForACH'] = $bankDetails->routingNo;
$this->load->view('member/sample', $data);

}

I donot know the reason why i dont get the value filled in bankNameForACH and routingNoForACH fields.
I am using document.getElementById('bankNameForACH')[removed]=req.responseText; to print the value.Is this the correct way or should i add or replace this with anything else?Please let me know what am i doing wrong in my code? Looking forward to hear from you at the earliest.


Thanks,
Joshi

[eluser]pickupman[/eluser]
If you are new to AJAX, take a look at jQuery. It will make your life so much easier. Your ajax call would be about 6 lines long.
Also, if working on ajax regardless of method use firebug for firefox. It will allow you to see the exact ajax request, headers, and response. Very helpful sometimes for figuring out a problem.

[eluser]Joshi[/eluser]
Thanks for your reply.Can anyone provide me sample code?

[eluser]kkith[/eluser]
Maybe I missed it, but are you sure the ajax is function is getting called? I don't see an onchange event handler in your code.

Also, I'm not sure if the javascript you used to set the values for the input fields work in your ajax response handler.

I agree with the poster above, I don't use raw javascript anymore, I use jquery entirely.

Here is the documentation for the jquery ajax api...
http://api.jquery.com/category/ajax/

Whenever I use ajax, I use this jquery ajax shorthand...
http://api.jquery.com/jQuery.post/

They should have plenty of examples.

[eluser]Joshi[/eluser]
Here is my code :

Code:

<table id="ACH" width="100%"  border="0" cellspacing="5" cellpadding="0">

    <tr>
    <td  width="120" align="right" class="tahoma12blk">Account No :<span id='require'>*</span></td>
    <select name="accountNoForACH" id="accountNoForACH">
    &lt;?php if($bnkDetails)
        {
        foreach($bnkDetails as $in){?&gt;
            <option value="&lt;?php echo decrypt($in->accountNo) ?&gt;">&lt;?php echo &lt;?php echo decrypt($in->accountNo) ?&gt;; ?&gt;</option>
        &lt;?}    
      }?&gt;
    </select>
    </td>
</tr>
  <tr>
    <td  width="120" align="right" class="tahoma12blk">Bank Name :<span id='require'>*</span></td>
    <td><span id="bankName">&lt;input type="textbox" id="bankNameForACH" name="bankNameForACH" value="&lt;?php echo $bankNameForACH ?&gt;" class="input"/&gt;&lt;/span></td>
  </tr>
</table>

I have tried many possibilities ,it doesn't seems to work. i have used onchange in <select></select>
Statement. i have used onchange event in select method but it doesn't get printed in the post.
Please help me correct the problem.

[eluser]kkith[/eluser]
Yeah, I don't see any code that calls the ajax function. Where is the onChange call?

[eluser]Joshi[/eluser]
i have used onchange event in select method but it doesn’t get printed in the post.
<select name="accountNoForACH" id="accountNoForACH">
&lt;?php if($bnkDetails)
{

foreach($bnkDetails as $in){?&gt;
<option value="&lt;?php echo decrypt($in->accountNo) ?&gt;">&lt;?php echo decrypt($in->accountNo) ?&gt;</option>
&lt;?}
}?&gt;
</select>


[quote author="kkith" date="1275324023"]Yeah, I don't see any code that calls the ajax function. Where is the onChange call?[/quote]

[eluser]kkith[/eluser]
ok, here is an example of onchange with a select tag.

http://lab.artlung.com/dropdown/

[eluser]kkith[/eluser]
Strange that the forums don't render the javascript in the post. One thing I suggest for debugging is to use the LiveHTTPheaders addon for firefox. It tells me if the Ajax code is even calling the php ajax handler. If you see information going by when you choose an option, then you know the call is being made. If the call isn't even being made, then you have a javascript problem rather than a backend php ajax handler problem.

[quote author="Joshi" date="1275324140"]i have used onchange event in select method but it doesn’t get printed in the post.
<select name="accountNoForACH" id="accountNoForACH">
&lt;?php if($bnkDetails)
{

foreach($bnkDetails as $in){?&gt;
<option value="&lt;?php echo decrypt($in->accountNo) ?&gt;">&lt;?php echo str_pad(substr((decrypt($in->accountNo)),-4), strlen(decrypt($in->accountNo)), '*', STR_PAD_LEFT); ?&gt;</option>
&lt;?}
}?&gt;
</select>


[quote author="kkith" date="1275324023"]Yeah, I don't see any code that calls the ajax function. Where is the onChange call?[/quote][/quote]

[eluser]Joshi[/eluser]
This is a very simple javascript. I have a drop down and a two text boxes. I am designing a site related to payment. The drop down will have a list of account number for a user. When the user selects the account number from the drop down, i need to fetch the details say Bank Name, Routing number for that account number and fill in the text box with these values. The text boxes should automatically populate with the values based on the drop down select. Can u provide any sample link or code to do this?