AJAX model return data using javascript

I am new to CodeIgniter.

I need to call a JavaScript function on the returned data through a model in CodeIgniter.

View:

<SELECT name="crs" onchange='load_data_ajax(this)'>
    <OPTION value='1'>option 1</OPTION>
    <OPTION value='2'>option 2</OPTION>
</SELECT>
<div id="container"></div>

      

function:

function load_data_ajax(type){
    $.ajax({
        'url' : 'http://myproper.url',
        'type' : 'POST',
        'data' : {'type' : type.value},
        'success' : function(data){ 
            var container = $('#container');
            if(data){
                eval(container.html(data));
            }
        }
    });
}

      

myproper url:

<script type="text/javascript" language="javascript" src="assets/js/tablefilter.js" id="t1"></script> 

<table id='table1' border='1' cellspacing='0' cellpadding='0'>
    <thead><tr>
        <th align='left'>Code</th>
        <th>Name</th>
    </tr></thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>huzefa</td>
    </tr>
    <tr>
        <td>2</td>
        <td>husain</td>
    </tr>
    </tbody>
</table>

<script language="javascript" type="text/javascript" id="t2">
//<![CDATA[ 
    var props = {
        //enable_default_theme: true,
        filters_row_index: 1,
        headers_row_index: 1,
        //remember_grid_values: true,
        remember_page_number: true,
        alternate_rows: true,
        rows_counter: true,
        btn_reset: true,
        btn_reset_text: "Clear",
        loader: true,
        status_bar: true,
        loader: true,
        col_4: "checklist",
        col_3: "checklist",
        display_all_text: "All",
        col_width: ["50px","200px","200px","75px","50px"],
        selectable: true,
        editable: true,
        enable_default_theme: true,  

        ezEditTable_config: {
            default_selection: 'both'
        },


        //Grid layout properties
         sort_config: { sort_types: ['none','string','string','string','string'] },  
     grid_layout: true, grid_width: '700px', grid_height: '800px',  
    grid_enable_cols_resizer: true,  
    mark_active_columns: true, 
        //grid_width: '900px',
        on_filters_loaded: function(o){
                var headersRow = o.headTbl.rows[o.GetHeadersRowIndex()];
                var c = headersRow.cells[0];
                var ezConfig = o.fObj.ezEditTable_config;
                //header checkbox is referenced on ezEditTable configuration object o.ezEditTable.checkBoxAll
                ezConfig.checkBoxAll = tf_Tag(c, 'input')[0];
                //header checkbox always unselected at start
                ezConfig.checkBoxAll.checked = false;
                //Click event is attached to header checkbox, note o.fObj = TF configuration object
                tf_AddEvent(ezConfig.checkBoxAll, 'click', function(e){ o.fObj.toggleAll(o); tf_StopEvent(e); });
            },
            //col_width: ["170px","200px"],
            selectable: true,
            editable: false,
            ezEditTable_config: {
                key_navigation: false,
                key_selection: false,
                selection_model: 'multiple',
                default_selection: 'row',
                selected_row_css: 'ezSlcRow',

                on_after_selected_row: function(o, row){
                    var c = row.cells[0];
                    var checkBox = o.Tag(c, 'input')[0];
                    if(checkBox) checkBox.checked = true;
                },
                on_after_deselected_row: function(o, row){
                    var c = row.cells[0];
                    var checkBox = o.Tag(c, 'input')[0];
                    if(checkBox) checkBox.checked = false;
                    o.config.checkBoxAll.checked = false;
                }
            },
            //Custom select all function used by header checkbox
            toggleAll: function(tf){ //tf = parent object: TF
                var o = tf.ezEditTable; //ezEditTable object referenced inside TF object
                if(o.config.checkBoxAll.checked == false){
                    o.Selection.ClearSelections();
                } else {
                    for(var i=o.startRow; i<o.GetRowsNb(); i++){
                        //If table filtered, only valid rows are selected
                        if(tf.GetValidRowsIndex()==null || tf.GetValidRowsIndex().indexOf(i) != -1)
                            o.Selection.SelectRowByIndex(i);
                    }
                }
            },
        /*** Extensions manager ***/

    grid_enable_cols_resizer: false,  
    mark_active_columns: true,  
        //btn_showHide_cols_text: 'Columns&#9660;'
    }
    //var tf = setFilterGrid("demo",props);

//]]>
</script>

<script type="text/javascript" language="javascript" id="t3">
    var tf = setFilterGrid('table1', props);
</script>

      

Data is returned correctly, but JavaScript effects are not displayed.

When I tested without a model, directly putting the code and JavaScript in the main view file, it shows JavaScript effects correctly.

+3


source to share





All Articles