使用onclick事件加载视图

Question

我有以下视图

这是从javascript生成的：

//Zητάει τις κατηγορίες από την βάση
    var appendCategoreis = function(categories){
    $.ajax({
        url: "http://localhost/perouka/index.php/MainController/getCategories",
        dataType: 'json',
        success: function(data) {
            $.each(data,function(item){
                var node = $(categories);

                node.find(".category-title").html(data[item].Name);
                node.find(".category-icon").css({"background-image":"url("+data[item].Icon+")"});
                node.attr("onclick","window.location.href='http://localhost/perouka2/perouka/index.php/ResultsController/loadView'");
                $(".categories").append(node);


            });
        },
        error: function(e) {
            console.log(e);
        }
    });
    }

    //Φορτώνει το template για της κατηγορίες
    $.get( "application/views/templates/category.html", appendCategoreis);

重要的一行是node.attr("onclick","window.location.href='http://localhost/perouka2/perouka/index.php/ResultsController/loadView'");，我在其中为每个类别添加了一个onlick事件。这会调用我的控制器：

class ResultsController extends CI_Controller
{


    public function __construct()
    {
        parent::__construct();
    }

    public function loadView(){
        $this->load->view('navbar');
    }

}

当我运行上面的内容并点击其中一个时，我得到FileError: 'http://localhost/perouka2/perouka/index.php/ResultsController/css/navbar.less' wasn't found (404)

在onclick事件上加载视图的最佳做法是什么？

Answer 1

您需要将视图作为数据返回，例如：

...
public function loadView(){
   echo $this->load->view('navbar', '', true);
}
...

并使用jQuery.load()，如：

$( "#your_element" ).load( "http://localhost/perouka2/perouka/index.php/ResultsController/loadView", function() {
   console.log( "view loaded." );
});