Question

我为用户的选项创建了两个面板，第二个面板是面板的过渡。如下所示，每次用户点击按钮时，我都会有一组按钮，左侧面板每次点击都会更改内容。但如果点击按钮，它就无法工作。

我使用了empty()，因此在我的左侧容器中panel-body之后它将为空，之后我会在panel-body部分附加

下面的母版页。

<!DOCTYPE html>
<html>
<head>

<link rel = "stylesheet" href = "{{ URL::asset('css/bootstrap.min.css') }}">
<script type = "text/javascript" src = "{{ URL::asset('js/jquery.js') }}"></script>

<script>

    $(document).on("click", "#curriculum", function ()
    {
        $.get("curriculumOption.blade.php", function (data)
        {
            $("#rightContainer").empty();
            $("#rightContainer").append(data);
            alert("This is curriculum");
        });
    });

    $(document).on("click", "#subjects", function ()
    {
        $.get("subjectsOption.blade.php", function (data)
        {   
            $("#rightContainer").empty();
            $("#rightContainer").append(data);
            alert("This is subjects");
        });
    });

</script>

</head>
<body>
@include ('layouts.navigation.user')
<div class="container-fluid">

    <div class="row">

        <div class="col-lg-3">

            <div class = "panel panel-default">

                <div class = "panel-body" style = "height: 300px">

                    <div class = "btn-group" data-toggle = "buttons">

                        <label class = "btn btn-primary btn-lg">
                        <input type = "checkbox" id = "curriculum"> Curriculum
                        </label><br>

                        <label class = "btn btn-primary btn-lg">
                            <input type = "checkbox" id = "subjects"> Subjects
                        </label><br>


                    </div>



                </div>

            </div>

        </div>




        <div class="col-lg-6">

            <div class = "panel panel-default">

                <div class = "panel-body" id = "rightContainer" style = "height: 300px; overflow-y: scroll;">

                    //RIGHT CONTAINER

                </div>

            </div>

        </div>

    </div>

</div>

选项：

subjectsOption
curriculumOption

subjectsOption.blade.php

<div class = "btn-group" data-toggle = "buttons">

    <label class = "btn btn-primary btn-lg">
    <input type = "checkbox" id = "subjectList"> Subject List
    </label><br>

    <label class = "btn btn-primary btn-lg">
    <input type = "checkbox" id = "createSubjects"> Create Subjects
    </label><br>

<div>

curriculumOption.blade.php

<div class = "btn-group" data-toggle = "buttons">

    <label class = "btn btn-primary btn-lg">
    <input type = "checkbox" id = "curriculumList"> Curriculum List
    </label><br>

    <label class = "btn btn-primary btn-lg">
    <input type = "checkbox" id = "createCurriculum"> Create Curriculum
    </label><br>

</div>

Answer 1

我不明白为什么你在标签上输入复选框。我刚刚删除了复选框并为标签添加了ID。

使用html（）函数添加插入php文件数据。

  <!DOCTYPE html>
    <html>
    <head>

<link rel = "stylesheet" href = "{{ URL::asset('css/bootstrap.min.css') }}">
<script type = "text/javascript" src = "{{ URL::asset('js/jquery.js') }}"></script>

<script>

    $(document).on("click", "#curriculum", function ()
    {
        $.get("curriculumOption.blade.php", function (data)
        {
            //$("#rightContainer").empty();
            $("#rightContainer").html(data);
            alert("This is curriculum");
        });
    });

    $(document).on("click", "#subjects", function ()
    {
        $.get("subjectsOption.blade.php", function (data)
        {   
            //$("#rightContainer").empty();
            $("#rightContainer").html(data);
            alert("This is subjects");
        });
    });

</script>

</head>
<body>
@include ('layouts.navigation.user')
<div class="container-fluid">

    <div class="row">

        <div class="col-lg-3">

            <div class = "panel panel-default">

                <div class = "panel-body" style = "height: 300px">

                    <div class = "btn-group" data-toggle = "buttons">

                        <label class = "btn btn-primary btn-lg"  id = "curriculum">
                        Curriculum
                        </label><br>

                        <label class = "btn btn-primary btn-lg" id = "subjects">
                            Subjects
                        </label><br>


                    </div>



                </div>

            </div>

        </div>




        <div class="col-lg-6">

            <div class = "panel panel-default">

                <div class = "panel-body" id = "rightContainer" style = "height: 300px; overflow-y: scroll;">

                    //RIGHT CONTAINER

                </div>

            </div>

        </div>

    </div>

</div>

Answer 2

Laravel框架模板或Laravel框架内/ resources /视图内的PHP文件无法直接使用URL访问，确切地说，/ resources文件夹下的所有内容甚至除/ public之外的所有其他文件夹都无法访问。只能使用laravel框架中的URL直接访问公用文件夹。您必须注意，资源文件夹内的视图只能在来自路线后返回 - ＆gt;控制器 - ＆gt;看起来很简单。

因此，这部分代码

$(document).on("click", "#curriculum", function ()
{
    $.get("curriculumOption.blade.php", function (data)
    {
        $("#rightContainer").empty();
        $("#rightContainer").append(data);
        alert("This is curriculum");
    });
});

$(document).on("click", "#subjects", function ()
{
    $.get("subjectsOption.blade.php", function (data)
    {   
        $("#rightContainer").empty();
        $("#rightContainer").append(data);
        alert("This is subjects");
    });
});

正在尝试以特定网址访问您的服务器。举个例子，你的域名是test.laravel.dev，你在你的域的根目录中（在浏览器中你可以看到http://test.laravel.dev），然后在那里运行这些脚本。这意味着您正在尝试对网址http://test.laravel.dev/curriculumOption.blade.php和http://test.laravel.dev/subjectOption.blade.php执行AJAX请求。会发生什么？这将尝试在routes.php文件中找到路由，寻找＆＃34; /curriculumOption.blade.php"或＆＃34; /subjectOption.blade.php"我相信它不存在。你可以做的是，如果你仍然需要在返回AJAX响应之前处理刀片模板，你可以这样做：

<强> routes.php文件

Route::get("/curriculumOption","CurriculumOptionController@show");

<强> CurriculumOptionController.php

public function show()
{
     //do your things here
     return view("curriculumOption");
}

使用CurriculumOption.blade.php的

位于/ resources / views文件夹下，并将您的ajax请求更改为：

$(document).on("click", "#curriculum", function ()
{
    $.get("/curriculumOption", function (data)
    {
        $("#rightContainer").empty();
        $("#rightContainer").append(data);
        alert("This is curriculum");
    });
});

这样可以，请尝试询问是否还有其他问题。

解释＃1 由于某些安全原因以及作为laravel的功能，除了public之外的大多数文件夹在没有PHP预处理器的情况下无法访问。当您在浏览器中发出请求时，HTTP请求将被发送到您的浏览器到服务器。在这种情况下，如果您发出get请求，则不要将任何其他表单参数传递给服务器。服务器从浏览器读取请求URL，然后有一些服务器配置，它们如何将参数传递给PHP预处理器。这些配置在.htaccess文件中设置为apache HTTP服务器，nginx配置为NGINX，web.config设置为IIS服务器。您可以注意到.htaccess文件包含在laravel项目的 / public 文件夹中， / public 文件夹是您网域的默认文件夹，假设您的域名是test .laravel.dev，然后 test.laravel.dev 等于 / public ， test.laravel.dev/index.php 指的是 /public/index.php 文件。其余可以放在 / public 中的通常是css，javascript和图像文件。无法从URL访问模板，控制器，路由等。它们由框架管理。出于安全原因，无法访问 / resource 文件夹。唯一的方法是从路由或控制器访问它。 如果您没有定义如何处理某个URI，则laravel框架将不会给出正确的响应，这很可能是erorr 。您的/management/curriculumOption.blade.php无法访问，因为您没有路线

   Route::get("/management/curriculumOption.blade.php"/, .....)

即使我不认为你也可以把.blade.php放在参数中，但值得一试。在Laravel中只有2个选项（需要引用）来访问要响应的特定URL：

在routes.php
将其放入公用文件夹

如何在面板体中附加刀片模板

2 个答案: