Databases
StackOverflow2013
Postsdbo
POWhat's the difference between .select, .show, and .load in jquery-ui tabs?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's the difference between .select, .show, and .load in jquery-ui tabs?
    primarykey
    data
    text
    <p>I see that there are three events fired when a tab is selected and I see the order in which the events are fired but I'm rather confused about which event to use or how these are truly different. If all three are fired, couldn't I just put my code in any of the events?</p> <p>I must be missing something here. Can someone clarify?</p> <hr> <p>So after messing with this more I'm going to share what I ended up doing in the hopes that it might help someone else.</p> <p>I had to generate dynamic tabs based on data returned in an Ajax call. It's basically data by date where the tabs are the date and they display whatever data falls within that date.</p> <p>Generating the tabs from the returned data was easy but I couldn't figure out how to write out the associated data. Finally (and I should have started here), I looked that the generated dom and noticed that a dynamically created tab also creates a div. Maybe that's obvious to some (it wasn't to me) and if it was in the documentation I missed it. Anyway, this code will generate tabs from an array and then append html to the associated div when the tab is clicked. I don't need all the variables but I thought that might make it more readable. <strong>Put the function for show before adding the tabs or it wont work!</strong></p> <pre><code>var _sessionDates = getSessionDates(sessionData.Sessions); var $tabs = $("#sub-tabs"); $tabs.tabs({ show: function(event, ui) { var selected = $tabs.tabs('option', 'selected'); var _sessionDates = getSessionDates(sessionData.Sessions); var grid = buildGrid(_sessionDates[selected]); $('#' + _sessionDates[selected]).html(grid); } }); $(_sessionDates).each(function(i, dayOfShow) { var d = dateFormat(dayOfShow, "mediumDate"); $tabs.tabs('add', '#' + dayOfShow, d); }); </code></pre> <p>Finally, I have to "scroll" through my data shown in the tab and I was able to do that with these two lines. The first line gives me the id of the div element corresponding to the selected tab (which is really the important part) and the second line just calls my method and passes in the id of the div less the '#'. My date is also my id. There's a global variable that I've changed outside of this that makes it work. I know that's bad and I'll remove it when I refactor it.</p> <hr> <pre><code>var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href'); $($el).html(buildGrid($el.replace('#', ''))); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJay
    1. USJay
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload