javascript - Dynamically load content inside a division on click of a button in Laravel - Stack Overflow

admin管理员组

文章数量:1410689

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.

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.

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

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.

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.

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

• javascript
• php
• html
• laravel
• single-page-application

Share Improve this question Follow asked Apr 23, 2017 at 21:59 Mill3rMill3r 54422 gold badges1212 silver badges3333 bronze badges 1

• I'm suggesting to use javascript or jquery to achieve your task – Shashika Commented Apr 24, 2017 at 4:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

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

1. Create a view in resources/views folder like main_content.blade.php and put the code for your main content.

2. create a route in routes/web.php which 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 id to 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>

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

Hope this helps

本文标签： javascriptDynamically load content inside a division on click of a button in LaravelStack Overflow