How to make tabs and data dynamic

Level 50

Do you mean something like this ?

Level 2

@ohffs Thank You very much for your response

Exactly that's what i'm looking for

but how to make it dynamic

Thank You

ohffs

Level 50

Looks like you can tie into the tab events and then I guess use an ajax call? Eg,

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  tab = e.target
  $.get( "api/tabcontent/" + tab, function( data ) {
    $( tab ).html( data );
  });
});

(that's off the top of my head though). Google around for 'bootstrap 3 tabs ajax' and you should find some examples :-)

https://laracasts.com/discuss/channels/laravel/problem-sending-mail-swift-transportexception

Level 2

@ohffs Thank for your time

I'm very very new to laravel, so i'ts a kinda frustrating that not getting solution and the pressure in here damn

I'll see what i can do. Thanks Though

please let me know if you find any working solution

And do you know any solution for this

Thank You

sdsdsds

Level 1

This may not be correct and there may be a better way. But why can't you add a Column named "slug" to your table and do something like this.

change the controller to get the data to the view

class AvoServiceController extends BaseController {

public function servicepage()
{
$serve = AvoService::all();

return view('pages.services', compact('serve'));
}

}

and then run a loop to display the data into the html

<div role="tabpanel">

    <ul class="nav nav-tabs nav-justified" role="tablist">

        @if($serve)
        @foreach($serve as $serves)
                <li role="presentation" class="active">
                    <a href="#{{$serves->slug}}" aria-controls="{{$serves->slug}}" role="tab" data-toggle="tab">
                        {{$serves->services}}
                    </a>
                </li>
            @endforeach
        @endif
    </ul>
    <div class="tab-content">
        @if($serve)
        @foreach($serve as $serves)

                <div role="tabpanel" class="tab-pane active" id="{{$serves->slug}}">
                    <div class="col-md-9 col-xs-12">
                        <p> {{$serves->services_description}} </p>
                    </div>
                    <div class="col-md-3 col-xs-9">
                        <img class="img-responsive" src="{{$serves->service_image}}">
                    </div>
                </div>


            @endforeach

    </div>

1 like

Level 88

@Ryan.B In this case you don't need a slug

<a href="#{{$serves->slug}}" aria-controls="tab-{{$serves->id}}" role="tab" data-toggle="tab">

<div role="tabpanel" class="tab-pane active" id="tab-{{$serves->id}}">

2 likes

Level 2

@Ryan.B @bobbybouwmann Thank You so much for your response

I created a column called tab_link and did the following

id   services     services_description    service_image  tab_link
1   Graphic Design     Description 1    image link         home    //home and profile the id of each tab
2   App Development     Description 2    image link        profile
So on.......

And The following in view

      <div role="tabpanel">
        <!-- Nav tabs -->
          <ul class="nav nav-tabs nav-justified" role="tablist">

          @if($serve)
          @foreach($serve as $serves)
            <li role="presentation" class="active">
               <a href="#{{$serves->tab_link}}" aria-controls="tab-{{$serves->id}}" role="tab" data-toggle="tab">
                  {{$serves->service}}
                </a>
            </li>
          @endforeach
          @endif

          </ul>

        <!-- Tab panes -->
        <div class="tab-content">

        @if($serve)
        @foreach($serve as $serves)
          <div role="tabpanel" class="tab-pane active" id="tab-{{$serves->id}}">
            <div class="col-md-9 col-xs-12"> 
                <p>{{$serves->service_description}}</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src={{$serves->service_image}}>
            </div>
          </div>
        @endforeach
        @endif

        </div>

And I have a "active" conflict since i'm looping all the tabs are active which suppose to be on click "active"

And i'm Getting all the data in the first tab

          <ul class="nav nav-tabs nav-justified" role="tablist">

          @if($serve)
          @foreach($serve as $serves)
            <li role="presentation" class="active">   //This active
               <a href="#{{$serves->tab_link}}" aria-controls="{{$serves->tab_link}}" role="tab" data-toggle="tab">
                  {{$serves->service}}
                </a>
            </li>
          @endforeach
          @endif

          </ul>

I think i'ts Progressing, i really need some help now

Thank You

Level 88

I think you need to start with the basics first and learn how loops work and also how these bootstrap tabs work before you continue!

We can tell you exactly how it's done, but you probably don't learn from it!

Also I see you ask a lot of questions in these threads. Let's start with one question at the time. I will help you through it ;)

1 like

Level 2

@bobbybouwmann Thank You for your time

i got what you said and i updated my previous post, your way works I just have an "active" conflict i guess, since i'm looping the list.

rest is working fine thanks to you

Thank You

Level 88

Well the active stuff is simple. You should only set the active class on 1 item in the loop at the beginning and that's it.

 // Notice the count here (this is the index of the array)
 @foreach($serve as $count => $serves)
     // We only add the class if it's the first item of the loop
    <li role="presentation"  @if ($count == 0) class="active" @endif>
        <a href="#{{$serves->tab_link}}" aria-controls="tab-{{$serves->id}}" role="tab" data-toggle="tab">
            {{$serves->service}}
        </a>
    </li>
@endforeach

1 like

Level 2

@tomo_pongrac Thank You for your response and time

I have gone through that article but hey have all the values "Hard Coded" and i know how to create static tabs with bootstrap and jQuery, I'm having problem with fetching tabs contents from database, i guess you have not red my post it's ok though

Now i'm just having an "active" tab issue

Thank You

Level 2

@bobbybouwmann Thank You so much it's really working the tabs are changing you are super cool

but i'm missing something i guess the "all the tabs have data of all the tabs"

      <div role="tabpanel">
        <!-- Nav tabs -->
          <ul class="nav nav-tabs nav-justified" role="tablist">

          @if($serve)
             @foreach($serve as $count => $serves)
                <li role="presentation"  @if ($count == 0) class="active" @endif>
                    <a href="#{{$serves->tab_link}}" aria-controls="tab-{{$serves->id}}" role="tab" data-toggle="tab">
                        {{$serves->service}}
                    </a>
                </li>
            @endforeach
          @endif

          </ul>

        <!-- Tab panes -->
        <div class="tab-content">

        @if($serve)
        @foreach($serve as $serves)
          <div role="tabpanel" @if ($count == 0) class="tab-pan active" @endif id="tab-{{$serves->id}}">
            <div class="col-md-9 col-xs-12"> 
                <p>{{$serves->service_description}}</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src={{$serves->service_image}}>
            </div>
          </div>
        @endforeach
        @endif

        </div>

Thank You

Level 88

You need to give each tab the class tab-pan and only active on the first tab, so you need to do something like this

@foreach($serve as $serves)
    <div role="tabpanel" class="tab-pan @if ($count == 0) active @endif" id="tab-{{$serves->id}}">

    // The rest of the code
@endforeach

I hope you get the idea!

1 like

Level 2

@bobbybouwman Tried but the result are same

        <!-- Tab panes -->
        <div class="tab-content">

        @if($serve)
        @foreach($serve as $serves)
          <div role="tabpanel" class="tab-pan @if ($count == 0) active @endif" id="tab-{{$serves->id}}">
            <div class="col-md-9 col-xs-12"> 
                <p>{{$serves->service_description}}</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src={{$serves->service_image}}>
            </div>
          </div>
        @endforeach
        @endif

        </div>

Thnak you

Level 88

Make sure you have the correct syntax based on this: http://getbootstrap.com/javascript/#tabs-usage

1 like

Level 2

@bobbybouwmann Thank You for that article

And i Cross verified it That is exactly the same syntax i'm using , i'm not getting what i'have missed

Level 88

Are you sure the javascript is correct as well? Check the same link again ;)

Level 2

@bobbybouwmann I have gone through that again

did you mean this script,

<script type="text/javascript">
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
</script>

Or

<script src="js/bootstrap.min.js"></script>

I'm using both of them at the bottom of my page

Thank You

Level 88

Did you add jQuery as well? Also you need to load the javascript first before you run any javascript code

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> // Load jQuery through a CDN
<script src="js/bootstrap.min.js"></script> 

<script type="text/javascript">
    $('#myTabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
</script>

1 like

Level 2

@bobbybouwmann Indeed i did added the jquery but a different version And i'm not loading thorough CND i have it in local instead

<script src="js/jquery-1.11.3.min.js"></script>

And i did removed all the code except the tabs and tested but the result is same My "services.blade.php"

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Services</title>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!--Test code-->
  <div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">

    @if($serve)
      @foreach($serve as $count => $serves)
        <li role="presentation" @if ($count == 0) class="active" @endif>
            <a href="#{{$serves->tab_link}}" aria-controls="tab-{{$serves->id}}" role="tab" data-toggle="tab">
              {{$serves->service}} 
            </a>
        </li>
      @endforeach
    @endif

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    @if($serve)
    @foreach($serve as $serves)
      <div role="tabpanel" class="tab-pan @if ($count == 0) active @endif" id="tab-{{$serves->id}}">
        <p>{{$serves->service_description}}</p>
      </div>
    @endforeach
    @endif
  </div>

</div>
<!--Test code-->

<script src="js/jquery-1.11.3.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

<script type="text/javascript">
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
</script>

</body>
</html>

Every thing seems cool, but i don't know what i'm missing

Thank You

Level 2

@bobbybouwmann

As i checked in inspect elements when i click on the tabs the active is change in only lists but not in "tab-pan"

<div role="tabpanel" class="tab-pan " id="tab-501">  //Remains same on all the tabs onclicked
not assigning active

I think this is not working as expected

  <!-- Tab panes -->
      <div role="tabpanel" class="tab-pan @if ($count == 0) active @endif" id="tab-{{$serves->id}}">

Thank you

Level 88

Are you sure the data for each tab is unique?

You need to use markdown for images, so you need to put your image online and paste the markdown here for that

// Paste the below in the comment area and it will be converted to an image
![alt_text](image_url)

1 like

Level 2

@bobbybouwmann Ya i'm positive about that, in inspect elements all tab-pan have unique data in it except the class is only "tab-pan" no active in it even default and on click

This is the result from my inspect elements

<ul class="nav nav-tabs nav-justified" role="tablist">

               <li role="presentation" class="active">
                    <a href="#home" aria-controls="tab-501" role="tab" data-toggle="tab" aria-expanded="true">
                        Graphic Designing
                    </a>
                </li>
                            <li role="presentation" class="">
                    <a href="#profile" aria-controls="tab-502" role="tab" data-toggle="tab" aria-expanded="false">
                        Mobile App Development
                    </a>
                </li>
                            <li role="presentation" class="">
                    <a href="#settings" aria-controls="tab-503" role="tab" data-toggle="tab" aria-expanded="false">
                        Website Development
                    </a>
                </li>
                            <li role="presentation" class="">
                    <a href="#testing" aria-controls="tab-504" role="tab" data-toggle="tab" aria-expanded="false">
                        Software Testing
                    </a>
                </li>
                            <li role="presentation" class="">
                    <a href="#prodserv" aria-controls="tab-505" role="tab" data-toggle="tab" aria-expanded="false">
                        Product Engineering
                    </a>
                </li>
                      
          </ul>

<!--Tab Content-->
<div class="tab-content">

         <div role="tabpanel" class="tab-pan " id="tab-501">
            <div class="col-md-9 col-xs-12"> 
                <p>Description 1.</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src="images/serv/csdevelop.png">
            </div>
          </div>
                  <div role="tabpanel" class="tab-pan " id="tab-502">
            <div class="col-md-9 col-xs-12"> 
                <p>Description 2</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src="images/serv/madevelop.png">
            </div>
          </div>
                  <div role="tabpanel" class="tab-pan " id="tab-503">
            <div class="col-md-9 col-xs-12"> 
                <p>Description 3.</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src="images/serv/wadevelop.png">
            </div>
          </div>
                  <div role="tabpanel" class="tab-pan " id="tab-504">
            <div class="col-md-9 col-xs-12"> 
                <p>Description 4</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src="images/serv/stesting.png">
            </div>
          </div>
                  <div role="tabpanel" class="tab-pan " id="tab-505">
            <div class="col-md-9 col-xs-12"> 
                <p>Description 5</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src="images/serv/peservece.png">
            </div>
          </div>
                
        </div>

Thank You

Level 2

@bobbybouwmann May i know is this the right way to right a condition in a calss attrib

class="tab-pan @if ($count == 0) active @endif"

I think it's not considering the text after the "tab-pan", i'm not sure

Thank You

Level 88

What you can do is this to be sure!

@if ($count == 0) class="tab-pan active" @else class="tab-pan" @endif

Level 2

@bobbybouwmann Thank for your time and i did tried that but the result is same

        <!-- Tab panes -->
        <div class="tab-content">

        @if($serve)
        @foreach($serve as $serves)
          <div role="tabpanel" @if ($count == 0) class="tab-pan active" @else class="tab-pan" @endif id="tab-{{$serves->id}}">
            <div class="col-md-9 col-xs-12"> 
                <p>{{$serves->service_description}}</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src={{$serves->service_image}}>
            </div>
          </div>
        @endforeach
        @endif

        </div>

Last night i spent a lot of time trying but no results,

Thank You

Level 88

Can you post the full code that you have now here? Or create a fiddle that we can see?

Level 2

@bobbybouwmann Ya sure and sorry for late response

My "service.blade.php"

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="M_Adnan">
<title>Services</title>

<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/tabs.css" rel="stylesheet">
<link href="css/tabstyles.css" rel="stylesheet">
  
  <!--Services Tabs-->
  <section class="padding-top-80 padding-bottom-80">
      <div class="container">
        <div class="heading text-center">
          <h3>Our <span>Services</span></h3>
    
      <div role="tabpanel">
        <!-- Nav tabs -->
          <ul class="nav nav-tabs nav-justified" role="tablist">

          @if($serve)
             @foreach($serve as $count => $serves)
                <li role="presentation"  @if ($count == 0) class="active" @endif>
                    <a href="#{{$serves->tab_link}}" aria-controls="tab-{{$serves->id}}" role="tab" data-toggle="tab">
                        {{$serves->service}}
                    </a>
                </li>
            @endforeach
          @endif

          </ul>

        <!-- Tab panes -->
        <div class="tab-content">

        @if($serve)
        @foreach($serve as $serves)
          <div role="tabpanel" @if ($count == 0) class="tab-pan active" @else class="tab-pan" @endif id="tab-{{$serves->id}}">
            <div class="col-md-9 col-xs-12"> 
                <p>{{$serves->service_description}}</p>
            </div>
            <div class="col-md-3 col-xs-9">
                <img class="img-responsive" src={{$serves->service_image}}>
            </div>
          </div>
        @endforeach
        @endif

        </div>
     
      </div>
    </section>
  <!--End Services Tabs-->
  
<script src="js/jquery-1.11.3.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/own-menu.js"></script> 
<script src="js/jquery.isotope.min.js"></script> 
<script src="js/jquery.lighter.js"></script> 
<script src="js/jquery.cubeportfolio.min.js"></script> 
<script src="js/owl.carousel.min.js"></script> 
<!-- SLIDER REVOLUTION 4.x SCRIPTS  --> 
<script type="text/javascript" src="rs-plugin/js/jquery.tp.t.min.js"></script> 
<script type="text/javascript" src="rs-plugin/js/jquery.tp.min.js"></script> 
<script type="text/javascript" src="js/main.js"></script>
<script src="js/scroll.js"></script>

<script type="text/javascript">
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
</script>

</body>
</html>

And The Controller

<?php

namespace App\Http\Controllers;

use View;
use App\AvoService;
use Illuminate\Routing\Controller as BaseController;


class AvoServiceController extends BaseController {

    public function servicepage()
    {
        $serve = AvoService::all();

        return view('pages.services')->with(['serve' => $serve]);
    }

}

And The route

Route::get('services', 'AvoServiceController@servicepage');

Thank You

Level 2

@bobbybouwmann Can You please tell me how to proceed further

i'm really stuck here

Thank You