CodeIgniter Forums
CI+AJAX+jquery form works on FF2 but not IE6 - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: CI+AJAX+jquery form works on FF2 but not IE6 (/showthread.php?tid=6761)



CI+AJAX+jquery form works on FF2 but not IE6 - El Forum - 03-10-2008

[eluser]Unknown[/eluser]
Hi there,

I'm new to using all these so please help me out. Basically all I want is a page with the top part a dropdown selection field where a user can choose a particular value (ie. year) to view the corresponding report.

Here is my controller class "summary.php":
Code:
<?php
class Summary extends Controller
{
   function index()
   {
      $hash_id = $this->session->userdata('id');
      $badge = $this->session->userdata('badge');

      if (!$hash_id || !$badge) {
         /*
         ** No session data found, either direct link access or session time out
         */
         $data['title'] = "VLRS Enquiry - Not Authenticated";

         $this->load->view('header', $data);
         $this->load->view('not_authenticate');
         $this->load->view('footer');
      } else {
         /*
         ** Session data found, user logged in via DP
         */
         $data['title'] = "VLRS Enquiry";
         $data['badge'] = $badge;
         $data['year_list'] = $this->vlrs_model->get_avail_years($hash_id);

         $this->load->view('header', $data);
         $this->load->view('summary', $data);
         $this->load->view('footer');
      }
   }

   function retrieve()
   {
      $hash_id = $this->session->userdata('id');
      $rpt_year = $this->input->post('year');

      if ($hash_id && $rpt_year > 0) {
         $query = $this->vlrs_model->get_summary($hash_id, $rpt_year);

         if ($query) {
            // Prepare result in HTML table
            $tmpl = array(
                    'table_open'          => '<table width="100%" border="0" cellpadding="2" cellspacing="0">',
                    'heading_row_start'   => '<tr>',
                    'heading_row_end'     => '</tr>',
                    'heading_cell_start'  => '<th>',
                    'heading_cell_end'    => '</th>',
                    );
            $this->table->set_template($tmpl);
            $this->table->set_caption("Results for $rpt_year");
            $this->table->set_heading(array('Month', 'Media', 'Media URL', 'Length', 'Viewed'));

            foreach ($query->result() as $row)
            {
               $this->table->add_row(
                                    "$row->month",
                                    "$row->media_name",
                                    "$row->media_url",
                                    "$row->media_length",
                                    "$row->view_time"
                                    );
            }
            echo $this->table->generate();
         }
         echo "<p>id: $hash_id<br>year: $rpt_year</p>";
      }
   }
}
?&gt;

And here is the view (summary.php) defined:
Code:
&lt;?php
echo css_asset('tablesorter-blue.css');
echo js_asset('jquery.tablesorter.js');
echo js_asset('jquery.blockUI.js');
echo js_asset('jquery.form.js');
?&gt;

$(document).ready(function() {
//$('#select_form').load(url, function() {
   $('#select_form').ajaxForm({
      target: '#resultTarget',
      beforeSubmit: showRequest,
//      success: function() {
//         $('#resultTarget').fadeIn('slow');
//      }
      success: showResponse
   });
   $("#select_form").ajaxError(function(event, request, settings){
      $(this).append("<li>Error requesting page " + settings.url + "</li>");
   });

   function showRequest(formData, jqForm, options) {
      var queryString = $.param(formData);
      alert('about to submit: \n\n' + queryString);
      return true;
   }

   function showResponse(responseText, statusText) {
      $('#resultTarget').fadeIn('slow');
      alert('status: ' + statusText + '\n\nresponseText: \n' + responseText);
   }
});

&lt;?php
echo form_open('summary/retrieve', array('id' => 'select_form'));
$tmpl = array(
             'table_open'      => '<table width="100%" border="0" cellspacing="2" cellpadding="2" class="user_info">'
             );
$this->table->set_template($tmpl);

$options = array( '' => '-' );
foreach ($year_list as $year) {
   $options[$year['year']] = $year['year'];
}

$this->table->add_row("User Account", $badge, form_label("Please select a year", "select_year"), form_dropdown('year', $options, "-") . form_submit('go', 'Go'));
echo $this->table->generate();
echo form_close();
?&gt;
<hr>
<div id="resultTarget">
</div>

Please ignore the login and session data check part, that only redirect user to the login page if not logged in. So when access the link with http://<my.host.com>/vlrs/summary, the page will load up with a page showing the user id and possible choice of years selectable; when the user picked a year and hit the go button, the ajax call to the retrieve function would return the result in an HTML table and be shown in the div element "resultTarget". The above code works fine on FF2, but doesn't work on IE6 at all, the ajaxError event got fired saying that the requesting page could not be loaded...

Does anyone have the idea how to make this work in IE?
Many thanks!!