AJAX & IE [Solved]

[eluser]Carlos Mora[/eluser]
Hi,

learning AJAX isn't an easy task

I've made some advances in CI+AJAX that works fine in FireFox, but they don't in IE7. The view has a table that shows records, and a form to insert records in that table. If the insertion is successfull, the new contents of the table is returned, and assigned with
$(#table_id).html( data.newdata) ;

that works fine in Chrome and Firefox, but doesn't in IE7. In IE, after assign the new contents the table disapears!

No luck yet STFW,


The view:

Code:

<div id="primaryContentContainer">
    <div id="primaryContent">
        <div class="box">
            <div class="boxContent center">
                <table cellspacing="0" cellpadding="4" border="0" id="tablas_list">
                &lt;?php echo $table; ?&gt;
                </table>
                <div class="center">
                    &lt;?=form_open("/admin/gestion/procesar", 'onsubmit="return false;" id="form" class="form3"')?&gt;
                    <p>
                            <label for="nombre">Nueva tabla:</label>
                            &lt;input type="text" name="nombre" id="nombre" /&gt;
                            <br/>
                            <span id="nombre_error" class="input-error"></span>
                    </p>
                    <p class="center">
                            &lt;input type="submit" value="Añadir" id="submit"/&gt;
                    </p>
                    &lt;?=form_close()?&gt;
                </div>
            </div>
        </div>
    </div>
</div>

the header of the view:

Code:

<title>Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<?php echo $dir_tema;?>portal.css" type="text/css" />
<!--[if lt IE 8]>
[removed][removed]
[removed][removed]
<![endif]--&gt;
&lt;link rel="shortcut icon" type="image/x-icon" href="&lt;?php echo $favicon; ?&gt;" /&gt;
[removed][removed]
[removed]
$(document).ready(function() {
    $("#form").submit(function() {
        var nombre = $("#nombre").val();
        $.post("/system.php/admin/gestion/procesar", { nombre:nombre },
        function(data){
                    if(data.success){
            $("#nombre_error").html('');
            $("#nombre").val('');
                        $("#tablas_list").html(data.newdata);
                        $("#tablas_list").innerHtml(data.newdata);
                    }else{
                        $("#nombre_error").html(data.nombre);
                    }
        },'json');
    });
});

function deleteRow(id){
    if( confirm('¿Confirma el borrado?') ){
        $.post("/system.php/admin/gestion/delete", { id:id },
            function(data){
                if(data.success){
                    $("#tablas_list").html(data.newdata);
                }else{
                    alert(data.error);
                }
            },'json');
    }
}
[removed]

and the controller:

Code:

<?php

class Gestion extends Controller {

    function Gestion() {
        parent::Controller();
        $user = $_SESSION['user'];
        if($user['usuario'] != 'atisa.admin' ) {
            // este no es
            redirect('logout.php');
        }
        $this->load->model('admin_model', 'admin');

    }

    function index() {
        $this->load->helper("form");
        $data["heading"] = "Lista de tablas";
        $data["page"] = 'admin/view'; // pass the actual view to use as a parameter
        $data['table'] = $this->_buildTables();
        $this->load->view('admin/container',$data);
    }

    function add() {
        $data['formdata'] = $this->admin->getBlank();
        $data["heading"] = "Crear Tabla";
        $data["page"] = 'admin/nuevatabla';
        $this->load->view('container',$data);
    }

    function _buildTables() {
        $data['records'] = $this->admin->getTables();
        ob_start();
        $this->load->view('admin/tablas_partial',$data);
        $buffer = ob_get_contents();
        @ob_end_clean();

        return $buffer;
    }
    function procesar() {

        $this->load->library("validation");

        $fields['nombre'] = 'nombre';
        $this->validation->set_fields($fields);
        $this->validation->set_error_delimiters('', '');

        $rules['nombre'] = 'trim|required';
        $this->validation->set_rules($rules);

        if ($this->validation->run() == FALSE) {
            $data = array(
                    'nombre' => $this->validation->nombre_error,
                    'success' => FALSE
            );
            echo json_encode($data);
        } else {
            $data = array(
                    'nombre' => $this->input->post("nombre")
            );

            $this->admin->newRecord( $data );
            $data['success'] = TRUE;
            $data['newdata']= $this->_buildTables();
            echo json_encode($data);
        }
    }

next message has the partial that generates the table (no room left in this post)...

[eluser]Carlos Mora[/eluser]
the missing partial

Code:

<tr>
                            <th>Id</th><th width="90%">tabla</th><th></th>
                        </tr>

                        &lt;?php

                        $FilaB = TRUE;
                        $i=0;
                        foreach( $records->result() as $row):
                            $i++;
                            $FilaB = !$FilaB;
                            ?&gt;
                            <tr class="&lt;?php echo $FilaB?"rowB":"rowA"; ?&gt;">
                                <td>&lt;?php echo $row->id?&gt;</td>
                                <td>
&lt;!-- the following line is shown bad in the forum post, but trust me , it works! --&gt;
                                    <a >id?&gt;">
                                        &lt;?php echo $row->nombre;?&gt;
                                    </a>

                                </td>
                                <td>
&lt;!-- the following line is shown bad in the forum post, but trust me , it works! --&gt;
                                    <a >id?&gt;); return false;" href="#">borrar</a>
                                </td>
                            </tr>
                        &lt;?php endforeach; ?&gt;

May be there is a different way to assign the html text to a table in IE, but not found noting yet.

Regards.

[eluser]Carlos Mora[/eluser]
well, things works again. It's a VERY strange ¿bug? :

if in IE7 we try $('#aTable').html(' <some contents' ) the spaces at the beggining makes IE fail and the table disapears. Removing the initial spaces in the partial corrected the problem.

Code:

function _buildTables() {
        $data['records'] = $this->admin->getTables();
        ob_start();
        $this->load->view('admin/tablas_partial',$data);
        $buffer = ob_get_contents();
        @ob_end_clean();
        // begin added
        $buffer = trim( $buffer);
        // end added

        return $buffer;
    }

Regards