0

I'm unable to get jquery tabs to render and interact correctly. Below are the relevant pieces of code; does any see what could be wrong?

As you'll see below, in my backbone view I add a (jquery tab) template to a div (the view's el) and then render that div.

Template:

<div id="tab-set">
    <ul>
        <li><a href="#panel1">Details</a></li>
        <li><a href="#panel2">Images</a></li>
        <li><a href="#panel3">Appendix</a></li>
    </ul>
    <div id="panel1">...</div>
    <div id="panel2">...</div>
    <div id="panel3">...</div>
</div>

Backbone View

App.Views.IndexView = Backbone.View.extend({

    tagName: 'div',

    id: 'user-content',

    template: JST['users/index'],

    ...

    render: function(){
        var view = this;

        $(this.el).html(this.template({user: this.model}));
        this.$('#date').datepicker();
        this.$('#tab-set').tabs();

        return this;
    }
});
Dan
  • 1,041
  • 2
  • 14
  • 22

1 Answers1

1

you write:

"in my backbone view I add a (jquery tab) template to a div (the view's el) and then render that div".

But it is not completely correct. In your code you create a view for a div whose id is "user-content": 

App.Views.IndexView = Backbone.View.extend({

    tagName: 'div',

    id: 'user-content'

    [...]

and I can't see any div with 'user-content' id in your html code. Maybe it's somewhere else and you didn't show it in the cut/pasted code?

You can declare a view in which the div or id do not exist in the html code, but then you have to declare a view which is up in hierarchy (usually an AppView) where you dynamically create the IndexView and append it to an existing element doing something like:

window.AppView = Backbone.View.extend({
    [...]
    render: function (item) { 
        var myView = new IndexView({ model: item });
        this.el.append(view.render().el);
    }

this link on stackoverflow can be of some help, maybe.

hope this helps.

Community
  • 1
  • 1
Daniele B
  • 3,117
  • 2
  • 23
  • 46
  • You're correct, the `user-content` div does **NOT** previously exist in any HTML code, but rather it is the `el` of the view in question. I append the view's `el` i.e. the `user-content` div to the target node in a router using `$('target-node').append(view.render().el)`. I did not include this snippet in my OP since I didn't think it added value/clarity to the question. – Dan Feb 06 '12 at 16:24
  • ok. So, if I understood correctly, you are able to render the view but it doesn't show on the screen as you want to, i.e. "tab headers display in a vertical list rather than as horizontal 'tabs'" as you said in your previous comment, isn't it? – Daniele B Feb 06 '12 at 16:55
  • Correct, but the problem does NOT seem to be CSS related. I've removed all CSS files except the ones related to jquery and the problem persists. Here is a mockup of what I'm trying to achieve: http://jsfiddle.net/BSgwf/2/ – Dan Feb 06 '12 at 20:19
  • Hi Dan, I'm getting back on your question. So, in the jsfiddle everything works ok. Which are substantial differences between your code and jsfiddle code? – Daniele B Feb 07 '12 at 11:26
  • The biggest differences are: ui styling and use of JST. As it turns out, I was able to resolve the issue by changing the ui styling. – Dan Feb 13 '12 at 20:18
  • 1
    ok, perfect. If you solved the issue then it would be great if you explain how (a little bit more in detail) and then close the question. – Daniele B Feb 14 '12 at 09:20