Question

There is my code:

var formObject = {
    run : function(obj) {
        if (obj.val() === '') {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
        } 
        else
       {
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('update.php', { id : id, value : v }, function(data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                } else
                {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    }
};
$(function() {
    $('.update').on("change", function() {
        formObject.run($(this));
    });
});

I need to call specific controller in order to populate the select form automatically.
In this line of code i am calling an url:

jQuery.getJSON('update.php', { id : id, value : v }, function(data)

I it possible to call a codeigniter view instead this ‘update.php’ file, or i have to do it in other way? Thanks.

Answer 1

class Controller{       
    public function mymethod(){     
        //make sure its an ajax request
        if(!$this->input->is_ajax_request())
        {
            show_error('Invalid Request');
            return;
        }           
        if(!$this->input->post('id') OR !$this->input->post('val'))
        {
            echo(json_encode(array(
                'error'  : 1
            )));
            return;
        }
        $query_from_db = ''; //mysql query ?            
        if( $query_from_db )
        {
            //send to browser, no view
            return $this->output
                        ->set_content_type('application/json')
                        ->set_output(json_encode($query_from_db));
        }           
    }
}

/**
 * Put this global var in your main view 
 * So its avail to all your files
**/
var SITE = "<?=site_url()?>";

/** Somefile.js **/
;(function($){

    var formObject = {
        init : function(){
            if($("#formID")) this.run();//only load if a form with specific id exists
        },
        run : function(){
            //limited nested functions
            //only execution
            var update = function(obj){
                //check for empty value
                if(obj.val() == '')
                {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                    return;
                }

                var data  = {
                    id  : obj.attr('id'),
                    val : obj.val()
                };

                return doAjax(data); //doAjax function execution
            };

            var doAjax = function(data){
                return $.getJSON( SITE + "controller/mymethod", data, function(callback){
                    if(callback.error)
                    {
                        obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                        return;
                    }

                    obj.next('.update').html(callback.list).removeAttr('disabled');

                });
            };

            $('.update').on("change", function() {
                update($(this));//update function execution
            });
        }
    }               
    $(function(){
        formObject.init();
    });
})(jQuery);