How Do I Create Effective Links In Bootstrap Tabs ?

I want to set my href to access content from an entirely different page

That's not how tabs work. You're essentially creating a link to specific page and not a hash #profile. You need to hook into the click event using JavaScript and request the information using AJAX. You can have API access point for this and just serve back the appropriate response. However, why not send content in your initial response? Is this a performance concern? I'm just trying to understand the question little better.

try

{{link_to('#jobs', 'Jobs', array('contenteditable'=>'false'))}}

Thanks guys !

@hostianer - that code created a curious url: http://auburntree/jobs#jobs and nope it did not navigate to the page required.

@alenabdula - I think you are heading in the correct direction. Yes ... I have a performance concern. The idea of pulling down 5 pages with all the associated SQL calls concerns me greatly especially if I have loads of people on the system at the same time. Hence, I would prefer calling one page at a time. Is that not a reasonable concern ?

@alenabdula

Can you please help me understand better what you mean by this:

You can have API access point for this

Thanks !

A quick Google led me here. I've not tested it personally, but it looks like it'll take you in the right direction.

Your API endpoint, then, for the jobs route need only return the HTML content that you want to display within the tab panel (so it shouldn't extend your normal layout).

You'll likely need to handle content for your initial tab separately from other ones as you'll likely have that content loaded with the first view anyway.

If performance is your concern, what is the real impact of running all the queries at once? If all the content is related, is it possible to leverage eager loading to cut down on database queries. How many tabs worth of information are you loading? It is perhaps pertinent to analyse your queries to see if you're prematurely optimising how your rendering the content.

Good luck :)

Thanks @Deringer. That link does not really work for me - I'm just getting a dead page. Could you check it ? tks.

I expect each page will have between 4 - 6 tabs, which in turn represent 1 page each. some will be simple entry and edit forms, other will be graphical reports requiring DB queries and js.

Perhaps I am exaggerating the load ? Eventually there will be hundreds of people hitting the system. It would be nice to pull it all down in one - easier for sure. I guess that means that the page would at source level be totally populated with all the tabs data - correct ? This could be quite a few kb. And what about rendering the graphics ?

Why don't you send everything I the initial load and test the performance. Few extra queries might not be as bad since some of that can be cached. In addition I would focus more of the media as images account for majority of performance issues.

@alenabdula I think that's good advice - it is growing on me. I am also going to have another look at css tabs. Thanks !

Maybe there is a front missconception with all these tabs. And did you envisage a single page application ?

@alenabdula @bestmomo Thank you very much for your advice. I have no experience of building single page applications, so I did some googling and from what I have seen I need to be proficient in one of the major JS frameworks ie Angular or Backbone. I am fine with Javascript and JQuery, but these frameworks are new to me. I think I am going to try what alen suggested - pull everything down in one hit and cache the queries. I would ideally like to be able to run JsCharts from one of the tabs as well ... so I guess that is an AJAX issue.

Many thanks !

@vincej are you linking to a url or named route? Also, suggest you add the Html or HTML facade to ensure you are referencing the right call.

// link to url 
{!! Html::link('http://test.com', null, array('id' => 'linkid')) !!}}

// Named route
{!! Html::linkRoute('login', 'Sign In', array(), array('class' => 'btn')) !!}} /// 3rd parameter can be null 

Example of my link to login

<li class="toolbar-btn btn-default wide-10">{!! link_to_route('getLogin', 'Log In', null , ['class' => 'nav-main-large-action']) !!}</li>

@nolros I'm linking for the most part to a route using

echo link_to('foo/bar', $title, $attributes = array(), $secure = null);

I don't quite follow the purpose behind, how will it help me in my problem ?

suggest you add the Html or HTML facade to ensure you are referencing the right call.

Lastly what is the purpose of the first array in

{!! Html::linkRoute('login', 'Sign In', array(), array('class' => 'btn')) !!}}

Thanks !

1. My point was I believe you are using a named routes vs. link and suggesting you use use link_to_route, per your example you have 'jobs' which leads me to believe you using a named route which why I suggest use link_to_route vs. _link_to. That said, as it is generating a url it might be already be resolving it for you.

2. The 3rd array only available in link_to_route, as far as I know, is available to pass parameters to pass to the named route.

3. I've not really used BS tabs, but I don't see state based attributes in your li i.e. role="tab" data-toggle="tab". Keep in mind it has to store state and make the association between the two. So the tabs might move, but I suspect that is CSS and not JS, don't know.

4. Per your tab question JS doesn't really store state well unless you build objects with _proto and use it to store states, not really an issue with level 1 tabs. I've not used BS but I suspect if you are having linking problems it will most likely be associated with a BS directive state requirement. ReactJS and Angular both have state libraries. You don't really need these until you go one level deep in tab structure i.e. click tab 1, now click tab 1.2., now want to click tab 2 and later go back to 1.2. Doing that in anything other than React, Angular, etc. will be difficult, but not impossible.

Not this will be helpful as it has little context, but in Angular this would be the start of a my tab code, my point for showing you this is you can see the power in being able to manage and track to, from, etc. states with tabs. That said, ReactJS does a brilliant job as well of managing state,

angular.module('app', ["ui.router", "projectData", "projectsList"])

    .config(function($urlRouterProvider){
      $urlRouterProvider.otherwise("/projects/p1");
    })

    .run(function($rootScope, $state){
      $rootScope.$state = $state;
      $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
        console.log("StateChangeError:", error)
      });
    });

I've used tabs for different pages (not just anchors), don't see what is bad about that. Pretty much like active menu tabs.

From the semantics perspective , why would you use tabs when you need a link. You can style it to look like a tab. But either way from what I understand he doesn't want full page refresh.

@vincej

See:

• JavaScript Conveniences
• JavaScript Conveniences Source Code

You don't need a full out single page app. You're learning don't overwhelm your self. Hope that helps.