Francisunoxx Francisunoxx - 5 months ago 50
jQuery Question

How to append blade template in panel-body

I created a two panel one for the user's options and the second panel is the transition of the panel. As you can see below I have a group of buttons every-time the user click the buttons the left panel will changed it's content every-time it clicks. But it won't work if I click on the buttons.

enter image description here

I used

empty()
so it will be empty first the
panel-body
on my left container after that I will append in the
panel-body
section

Master page below.

<!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>





OPTIONS:


  • 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

Laravel Blade Template, or PHP file inside the /resources/views inside Laravel framework is not accessible using URL directly, to be precise, everything under /resources folder and even all other folders except /public, are not accessible. Only public folder can be accessed directly by using URL in laravel framework. You must notice that the view inside resources folder can only be returned after come from route -> controller -> view to be simple.

Thus, this part of your code

$(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");
    });
});

is trying to access your server in certain URL. lets take example your domain is test.laravel.dev and you are in root of your domain (in your browser you can see http://test.laravel.dev), and you run these script there. It means that you are trying to do AJAX request to url http://test.laravel.dev/curriculumOption.blade.php and http://test.laravel.dev/subjectOption.blade.php. What will happens? this will try to find route in your routes.php file, looking for "/curriculumOption.blade.php" or "/subjectOption.blade.php" which i am sure it's not exists there. what you can do is, if you still need the blade template to be processed before returning as AJAX response, you can make it like this:

routes.php

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

CurriculumOptionController.php

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

with the curriculumOption.blade.php is under /resources/views folder, and change your ajax request to:

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

This will work, please try and ask if have any other problem.

Explanation #1 Due to some security reason and also as a feature for laravel, most of the folders except public cannot be accessed without PHP preprocessor. When you are making a request in browser, the HTTP request is being sent to your browser to the server. in this case, if you make get request, you dont pass any other additional form parameters to server. Server read the request URL from your browser and then there are some server configuration in how are they going to pass the parameter to PHP preprocessor. These configuration is set in .htaccess file for apache HTTP server, nginx configuration for NGINX, and web.config for IIS server. You can notice that the .htaccess file is included in your /public folder of laravel project and the /public folder is the default for your domain, lets say your domain is test.laravel.dev, then test.laravel.dev is equal to /public and test.laravel.dev/index.php is refering to /public/index.php file. The rest that can be put in /public usually are css, javascript, and image files. Templates, Controller, Routes, etc are not accessible from URL. They are being managed by the framework. /resource folder is not accessible for security reason also. The only way is to access it from route or controller. If you dont define what to do with a certain URI, laravel framework will not give a proper response which is most likely erorr. Your /management/curriculumOption.blade.php can't be accessed simply because you dont have a route with

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

even though i dont think you can put .blade.php in the parameters also, but worth to try. There are only 2 options(need citation) to access certain URL to be responded in Laravel:

  1. Define it in routes.php
  2. put it in public folder
Comments