ajax based tab control issue.Please Help

[eluser]Vaibhav132[/eluser]
I have tried my best to explain this issue.

The myaccount_view page

Code:

<div id="schedulePane">
    <ul id="tabs" class="ls-tabs">
     <li class="selected" title="edit_profile">
      <a id="edit_profile" title="edit_profile" class="active" href="#">Edit Profile</a>
     </li>
     <li class="nselected" title="approved_deals">
      <a id="approved_deals" title="approved_deals" class="inactive" href="#">Approved Deals</a>
     </li>
     <li class="nselected" title="pending_deals">
      <a id="pending_deals" title="pending_deals" class="inactive" href="#">Pending Deals</a>  
     </li>
     <li class="nselected" title="change_password">
      <a id="change_password" title="change_password" class="inactive" href="#">Change Password</a>
     </li>
     <li class="nselected" title="cancelled_deals">
      <a id="cancelled_deals" title="cancelled_deals" class="inactive" href="#">Cancelled Deals</a>
     </li>
    </ul>
    <div id="loader">
     <img  src="&lt;? echo base_url();?&gt;images/ajax-loader (2).gif">
    </div>
    <div id="content" class="content">
     &lt;?php require_once('edit_profile_view.php');?&gt;
    </div>
   </div>

The Javascript for the tab control.

Code:

window.onload = initPage;

function initPage(e){

  $('#loader').hide();
  var tabs = document.getElementById("tabs");
  
  addEventHandler(tabs, "click", showTab);
}

function showTab(e) {

  document.getElementById("loader").style.visibility='visible';
  $('#loader').show();
  
  var me = getActivatedObject(e);
  var selectedTab = me.title;

  var tabs = document.getElementById("tabs").getElementsByTagName("a");
  
  for (var i=0; i<tabs.length; i++) {
    var currentTab = tabs[i];

if (currentTab.title == selectedTab) {

      currentTab.className = 'active';
    } else {
      currentTab.className = 'inactive';
    }
  }
  var nav = document.getElementById("tabs").getElementsByTagName('li');
  for (var i=0; i< nav.length; i++) {
    var currentTab = nav[i];

if (currentTab.title == selectedTab) {
      currentTab.className = 'selected';
    } else {
      currentTab.className = 'nselected';
    }
  }

  var request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return false;
  }
  $('#content').hide("fast");
   request

  [color=red]request.open("GET", "http://localhost/project/index.php/main/ajax_php/" + selectedTab, true);[/color]
  
  request.send(null);
  request = null;
}

function showSchedule() {
  if (request.readyState == 4) {
    if (request.status == 200) {
    $('#loader').hide();  
    $('#content').show();  
   document.getElementById("content")[removed] = request.responseText;
  
    }
  }
}

Controller is called depending on the selected tab.
for eg. if i select edit profile
htttp://localhost/project/index.php/main/ajax_php/" + selectedTab
"selectedTab now equals edit profile"

In my controller i call

Code:

function ajax_php(){
$get_value =  $this->uri->segment(3);
        if($get_value == 'edit_profile'){
  $this->load->view('edit_profile_view');
}

Edit Profile View

Code:

[removed]
    $(document).ready(function(){
  $('#account_creation_form').submit(function() {
    
   var fname = $("#first_name").val();
   var lname = $("#last_name").val();
   var zip = $("#zip").val();
   var country = $("#country").val();
   var dataString = 'first_name='+ fname;
            
   if(fname==null || fname=="" || lname==null || lname=="" || zip==null || zip=="" ){
    alert("All fields are required");
    return false;
   }
   else{
    [color=red]$.ajax({
     type: "POST",
     url: "http://localhost/baeemo/index.php/main/editor",
     data: "first_name="+fname+"&last;_name="+lname+"&zip;="+zip+"&country;="+country,
     cache: false,
     success: function(html){
      $("#edit_div").hide();
      $("#edit_success").html(html).show();
     }
    });[/color]
   }
   return false;
  });
    });
</script>
<?php                  
$username = $this->session->userdata('username');
$CI = &get;_instance();
$CI->load->model('edit_model');
$query = $CI->edit_model->all_get($username);
foreach($query->result() as $row){
$first_name = $row->first_name;
$last_name = $row->last_name;
$zip = $row->zip;
$country = $row->country;
}

echo '<div id="edit_div">';
echo '<br/>';
//echo validation_errors('<br><br><br><span class="error">','</span>');
$id = array('id'=>'account_creation_form');

echo form_open('',$id);

echo '<div class="append-bottom">';
echo form_label('Last Name');
echo '<br/>';
$lName = array('name'=>'last_name','id'=>'last_name','value'=>$last_name,'class'=>'ls-text');
echo form_input($lName);
echo '</div>';

echo '<div class="append-bottom">';
echo form_label('Zip/Postal Code');
echo '<br/>';
$zip1 = array('name'=>'zip','id' =>'zip','value'=>$zip,'class'=>'ls-text');
echo form_input($zip1);
echo '</div>';

echo '<div class="append-bottom">';
[color=red]$data = array('type'=> 'submit', 'class' => 'button medium sixth','name'=>'edit_profile_submit','value'=> 'Save changes','content' => 'save changes' );
echo form_button($data);[/color]
echo '</div>';

echo form_close('');

echo '</div>';

?&gt;

Now the issue..
In the edit profile when i click on "Save Changes" submit button.
the controller main/ajax_php is called and it load the edit_profile view is loaded
and all other tabs are missing..it doesn't call the controller the which i have mentioned in the script("http://localhost/baeemo/index.php/main/editor",)



PLEASE LEMME KNOW IF YOU NEED MORE CLARIFICATION ON THE ISSUE