[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">
<input type="radio" id="radio1" name="radio_select" value="radio1">option1<br>
<input type="radio" id="radio2" name="radio_select" value="radio2">option2<br>
<div id="ajax2_div"></div>
</form>
ajax2_response_view.php
Code:
<form name="testform2" action="someaction" target="sometarget" method="POST">
<input type="radio" id="radio3" name="radio_select" value="radio3">option3<br>
<input type="radio" id="radio4" name="radio_select" value="radio4">option4<br>
<input type="submit" name="submit" id="submit_a" value="Submit">
</form>
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.