Simple AJAX does not work the second time

[eluser]haixu2000[/eluser]
Snippet of my html:

Code:

<a href="#">call ajax1</a>
<div id='ajax1_div'></div>

javascripts:

Code:

function ajax1()
{
  var xhr;
  //get_ajax_object() is testing and make sure browser got ajax support
  //using either XMLHttpRequest() or
  //window.createRequest() or
  //ActiveXObject("Msxml2.XMLHTTP") or
  //ActiveXObject("Microsoft.XMLHTTP")
  xhr = get_ajax_object();
  if(xhr)
  {
    xhr.open("POST","index.php/ajax1_response",true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Connection", "close");
    xhr.onreadystatechange=function()
    {
      if(this.readyState == 4)
      {
        document.getElementById('ajax1_div')[removed]=this.responseText;
      }
    }
  }
  xhr.send(null);
}

function ajax2(selected_option)
{
  var xhr;
  //get_ajax_object() is testing and make sure browser got ajax support
  //using either XMLHttpRequest() or
  //window.createRequest() or
  //ActiveXObject("Msxml2.XMLHTTP") or
  //ActiveXObject("Microsoft.XMLHTTP")
  xhr = get_ajax_object();
  if(xhr)
  {
    xhr.open("POST","index.php/ajax2_response",true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Connection", "close");
    xhr.onreadystatechange=function()
    {
      if(this.readyState == 4)
      {
        //need to check for valid response here
        document.getElementById('ajax2_div')[removed]=this.responseText;
      }
    }
  }
  xhr.send(selected_option);
}

my controllers located in myapp/controllers

Code:

class Ajax1_response extends CI_Controller
{
  public function index()
  {
    $this->load->view('ajax1_response_view');
  }
}

class Ajax2_response extends CI_Controller
{
  public function index()
  {
    $this->load->view('ajax2_response_view');
  }
}

my views located in myapp/views
ajax1_response_view.php

Code:

<form name="testform" action="someaction" target="sometarget" method="POST">
&lt;input type="radio" id="radio1" name="radio_select" value="radio1"&gt;option1<br>
&lt;input type="radio" id="radio2" name="radio_select" value="radio2"&gt;option2<br>
<div id="ajax2_div"></div>
&lt;/form&gt;

ajax2_response_view.php

Code:

<form name="testform2" action="someaction" target="sometarget" method="POST">
&lt;input type="radio" id="radio3" name="radio_select" value="radio3"&gt;option3<br>
&lt;input type="radio" id="radio4" name="radio_select" value="radio4"&gt;option4<br>
&lt;input type="submit" name="submit" id="submit_a" value="Submit"&gt;
&lt;/form&gt;

When I click on "call ajax1", ajax1 javascript worked fine and I got ajax1 controller executed and return ajax1_response_view which is inserted into ajax1_div. Now I click on option1 or option2 from newly inserted ajax1_div section, ajax2 javascript is called. However ajax2 controller is not invoke. What is wrong with this code? I can't seem to get the second ajax call to work.

[eluser]CroNiX[/eluser]
Try not using a relative url.

[eluser]haixu2000[/eluser]
I tried hard coded the absolute path in ajax1 and ajax2 javascript function such as

Code:

http://localhost/hx/index.php/ajax1_response (where http://localhost/hx is my base_url())
http://localhost/hx/index.php/ajax2_response (where http://localhost/hx is my base_url())

This does not make any difference. The first ajax1 call is working fine but the second ajax2 call does not work.

My config.php settings:

Code:

$config['base_url']='http://localhost/hx';

My routes.php settings:

Code:

$route['default-controller'] = "main";

This is my app entry point controller

My index.php settings:

Code:

$system_path = 'CI/system';
$application_folder = 'myapp';

My directory structure:
CI
-->system
css
images
js
myapp
-->controllers
-->views
-->...

By the way, on the [code] [/code] tags in this forum seem to remove my onclick="ajax1();true" portion for some reason.

[eluser]Matalina[/eluser]
gonna as a question to clarify.

The first click will write the html for the second click yes?

If so the reason the second isn't working is because it was loaded AFTER the javascript so thus the javascript cannot see it. You either need to load the javascript with the new html, or you need to attach your ajax code to a higher node so that ic an still be seen.

I can't help with the javascript exactly I use jQuery for most of javascript needs.

[eluser]Aken[/eluser]
To elaborate on what Matalina said - your ajax1_response_view code did not exist on the page when it loaded and the Javascript added handlers to appropriate DOM elements. So when the code is added, there are no handlers set up for it, so Javascript doesn't know to look for any actions relating to those elements (such as click, mouseover, etc).

Post the part of your Javascript that targets the click or change action.

[eluser]haixu2000[/eluser]
I know both js functions (ajax1 and ajax2) are called.
I put alert message in them and know they are both completed the call.
The ajax2_response controller is the one that is not responding.
I am thinking there may be something wrong with my configurations or the way I am calling the second ajax2_response controller.
I have

Code:

onclick="ajax1();true" and onclick="ajax2();true"

but this forum seem to remove it somehow. These js calls are part of the radio inputs for both corresponding to both views (ajax1_response_view and ajax2_response_view).

[eluser]haixu2000[/eluser]
I found a bug in my code and fixed it. It is not in the code I posted though.
The fact that I am reading over my post to make sure it is clear, I spotted the bug in my real code. Thank you for all your helps.