单击 Laravel 中的按钮动态加载分区内的内容

Dynamically load content inside a division on click of a button in Laravel

提问by Mill3r

I am trying to create an application with laravel and i am having some difficulty in understanding how to dynamically load content into a division according to the button clicked from the menu bar.

我正在尝试使用 laravel 创建一个应用程序，但我在理解如何根据从菜单栏中单击的按钮将内容动态加载到分区中时遇到了一些困难。

I have a top navigation bar, side navigation bar and a main content section on the home page.

我在主页上有一个顶部导航栏、侧面导航栏和一个主要内容部分。

I want the main content to change according to the option selected from the side navigation bar but i am not being able to find the solution.

我希望主要内容根据从侧面导航栏中选择的选项进行更改，但我找不到解决方案。

 @extends('layouts.app')
 @section('title',  '| Homepage')

 @section('content')
  <div id="wrapper" class="active">

      <!-- Sidebar -->
            <!-- Sidebar -->
      <div id="sidebar-wrapper">
          <ul id="sidebar_menu" class="sidebar-nav">
               <li class="sidebar-brand">menu</li>
          </ul>
            @include('includes.sidebar')
      </div>

      <!-- Page content -->
      <div id="page-content-wrapper">
        <!-- Keep all page content within the page-content inset div! -->
        <div class="page-content inset">
          <div class="row">
            <!--this part will change-->
          </div>
        </div>
      </div>
      </div>
@endsection

this is the home.blade.php. I have created it with layout and partial concept of laravel. i want to load a form in the main content area when the user request for it by clicking in the sidebar.

这是 home.blade.php。我用 laravel 的布局和部分概念创建了它。当用户通过单击侧边栏请求它时，我想在主内容区域加载一个表单。

can anyone please help me with the how to do it?

任何人都可以帮助我如何做吗？

回答by Sapnesh Naik

You can use the onclickevent of a button to call a function when that button is clicked.

您可以使用onclick按钮的事件在单击该按钮时调用函数。

but first you have to define routes and views for your dynamic div content. so

但首先你必须为你的动态 div 内容定义路由和视图。所以

1. Create a view in resources/viewsfolder like main_content.blade.phpand put the code for your main content.

2. create a route in routes/web.phpwhich will render the view we just created

   Route::get("/main_content", function() { return View::make("main_content"); });

3. suppose you have a button similar to this in your sidebar.

   <button onclick="load_main_content()" type="button">load</button>

   also remember to assign an idto the div that should change like

   <div class="row" id="main_content_div"> <!--this part will change--> </div>

   then function should be like this

   <script type="text/javascript"> function load_main_content() { $('#main_content_div').load('/main_content/'); } </script>

1. 在resources/views像这样的文件夹中创建一个视图main_content.blade.php并放置主要内容的代码。

2. 创建一个路由，在routes/web.php其中渲染我们刚刚创建的视图

   Route::get("/main_content", function() { return View::make("main_content"); });

3. 假设您的侧边栏中有一个与此类似的按钮。

   <button onclick="load_main_content()" type="button">load</button>

   还记得给id应该改变的 div分配一个

   <div class="row" id="main_content_div"> <!--this part will change--> </div>

   那么函数应该是这样的

   <script type="text/javascript"> function load_main_content() { $('#main_content_div').load('/main_content/'); } </script>

So now whenever the button is clicked the view should automatically load into the div.

所以现在无论何时单击按钮，视图都应该自动加载到 div 中。

Hope this helps

希望这可以帮助