I am using CI with Twitter Bootstrap for a basic site:
In my main layout view this is how the main content area is setup:
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span8">
<?php echo $this->load->view($subview); ?>
</div>
<div class="span3" id="sidebar">
<?php echo $this->load->view($this->global_data['sidebarview']); ?>
</div>
</div>
</div>
One sidebar view is this:
<div class="container-fluid" id="sidebar-about">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header"><i class="icon-info-sign"></i> More about us</li>
<li class="active">Who are we?</li>
<li>Why we did it?</li>
<li>What we promise?</li>
<li class="nav-header"><i class="icon-asterisk"></i> Services</li>
<li>Free</li>
<li>Premium</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
Every link in this sidebar i want to update the div with class="span8" from my main layout.
How should i do that? Should i use ajax calls to update the content of the span8 div? or just create more methods in about controller?
Related
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
I have already read some links regarding Bootstrap tab in Laravel but none of them is working for me.
I have 3 views (movies, scheduled_movies, group_movies) each view has its respective controller. Now I want to show all these views using bootstrap tab component. I tried a lot, but tabs don't work properly or sometimes all the data of three view shown in the first tab and sometimes only tabs are shown but not the data.
Here is my code-
app.blade.php
#include('components.navbar')
#yield('base')
base.blade.php
#extends('layouts.app')
#section('base')
<div class="container-fluid">
<div class="row">
<div class="col-2 d-none d-md-block bg-light sidebar" >
#include('components.sidebar')
</div>
<main id="main" class="col-10 ml-sm-auto col-lg-10 px-3">
#yield('content')
</main>
</div>
</div>
#endsection
I have separate tab.blade.php where all my bootstrap tab code is written. and I have included all 3 views using #include
tab.blade.php
#extends('layouts.base')
#section('content')
<div class="p-3">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies"
aria-selected="true">All movies</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheduled-movies-tab" data-toggle="tab" href="#scheduled-movies" role="tab"
aria-controls="scheduled-movies" aria-selected="false">Scheduled Movies</a>
</li>
<li class="nav-item">
<a class="nav-link" id="group-movies-tab" data-toggle="tab" href="#group-movies" role="tab" aria-controls="group-movies"
aria-selected="false">Group Movies</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show" id="movies" role="tabpanel" aria-labelledby="movies-tab">
#include('movies.all_movies.index')
</div>
<div class="tab-pane fade" id="scheduled-movies" role="tabpanel" aria-labelledby="scheduled-movies-tab">
#include('movies.scheduled-movies.index')
</div>
<div class="tab-pane fade" id="group-movies" role="tabpanel" aria-labelledby="group-movies-tab">
#include('movies.group-movies.index')
</div>
</div>
</div>
#endsection
MoviesController
class MoviesController extends Controller
{
public function index()
{
$movies = Movie::all();
return view('movies.all_movies.index')->with('movies', $movies);
}
}
The same code is written in ScheduledMoviesController.
This is my web.php file
Route::get('movies', 'MoviesController#index');
Route::get('scheduled-movies', 'ScheduledMoviesController#index');
Route::get('group-videos', 'GroupMoviesController#index')->middleware('verified');
Till now I have figured out some cases
Maybe my blade syntax #yield or #include is wrong.
Maybe routing is wrong (because of the first page of the tab showing data from all three).
this is my first post
just the site i needed cause im kinda new to all this
im trying to validate my page and there is 1 error that i dont know what to do with
Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
if i remove the div part
my page is not looking the same as it does with it and it works on all browsers right now with the errors
this is the piece of code that is making the error
<div class="picture_content margin-left">
<ul class="image_box_story2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slider1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</section>
any help on how to fix this would be apreciated alot
thanks for taking the time
btw i downloaded a bootstrap temp and the Original file has the same errors
The error is
<ul class="image_box_story2">
a ul is a list and can only have li children, not div, that list doesn't have any li children at all.
Perhaps you can change it to <div class="image_box_story2"> (and change (</ul> to </div>) that would make it valid, but whether it displays Ok depends on the css you have not shown.
Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>
I'm used to using Joomla 1.5, and am trying to switch to 2.5.
I have 2 modules in the right position, I expect that there would be 2 boxes (which is what I want), one box for each module. But for some reason it's just adding the second module to the first box.
It's not copying the divs (main_top_box, main_mid_box, main_bottom_box) inside the if statement: <?php if($this->countModules('right')) { ?>, instead it's just putting the <jdoc:include type="modules" name="right"/> commands side by side.
You were able to do this with the code I've used in Joomla 1.5. Have they removed this functionality?
Here's what I see:
Here's what I should see:
Joomla Code:
<?php if($this->countModules('right')) { ?>
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<jdoc:include type="modules" name="right"/>
</div>
</div>
</div>
<?php } ?>
Code Output(Source):
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<div class="custom" >
<h3>Services</h3>
<ul>
<li>Family Law</li>
<li>Collaborative Law</li>
<li>Real Estate</li>
<li>Wills</li>
<li>Estate Planning</li>
<li>Estates</li>
</ul>
<p> </p>
</div>
<div class="custom" >
<h3>Test</h3>
<p>Testing the Right Box</p>
</div>
</div>
</div>
</div>
Should Be(Source):
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<h3>Services</h3>
<ul>
<li>Family Law</li>
<li>Collaborative Law</li>
<li>Real Estate</li>
<li>Wills</li>
<li>Estate Planning</li>
<li>Estates</li>
</ul>
</div>
</div>
</div>
<div class="main_top_box">
<div class="main_mid_box">
<div class="main_bottom_box">
<h3>Test</h3>
<p>Testing the Right Box</p>
</div>
</div>
</div>
You can do this by these to methods
Either Change the order of display the module in the same position in the module manager.
Create separate module position for both the modules and assign them accordingly.