Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, I assume when the user clicks a tab, you intend to fetch content dynamically, via AJAX. This really involves two things, <strong>setting an onclick even for your tab</strong> and <strong>fetching the data via ajax</strong>.</p> <p><strong>Setting an onclick event</strong></p> <p>Give your tab an class, for example <em>my_tab</em>. Let's say that when the user clicks the tab you want the <em>handle_tab_click()</em> function to fire. Here's an example of binding the <em>onclick</em> event to your <em>my_tab</em> tab:</p> <pre><code>$(".my_tab").bind("click", handle_tab_click); </code></pre> <p>Your <em>handle_tab_click()</em> function will be given an <em>event</em> argument which will be able to provide you with information on the element that fired the event (in this case, the element with class name <em>my_tab</em>).</p> <pre><code>function (event) { if ($(event.target).hasClass("my_tab")) { /* handle tab click */ } if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ } if ($(event.target).hasClass("my_tab_3")) { /* ... */ } } </code></pre> <p>See the JQuery <em>event</em> documentation for more details <a href="http://docs.jquery.com/Events/bind#typedatafn" rel="noreferrer">here</a>.</p> <p><strong>Fetching the data via ajax</strong></p> <p>Fetching data will require you to invoke a remote script while supplying information about which tab was clicked (in order to fetch the appropriate information). In the following snippet, we're invoking the remote script <em>myscript.php</em>, supplying the HTTP GET argument <em>tab_clicked=my_tab</em> and calling the function <em>tab_fetch_cb</em> when the script returns. The final parameter is the type of data being returned (it's up to you to choose).</p> <pre><code>$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml") </code></pre> <p>It's up to you to design <em>myscript.php</em> to handle the <em>tab_clicked</em> parameter, fetch the appropriate data and return it (i.e. write it back out to the client).</p> <p>Here's an example for <em>tab_fetch_cb</em>:</p> <pre><code>function tab_fetch_cb(data, status) { // populate your newly opened tab with information // returned from myscript.php here } </code></pre> <p>You can read more about the JQuery <em>get</em> function <a href="http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype" rel="noreferrer">here</a>, and JQuery ajax functions <a href="http://docs.jquery.com/Ajax" rel="noreferrer">here</a></p> <p>I'm sorry I can't be more specific in my examples, but a lot of the processing is really dependant on your task. As it looks as it has already been pointed out, you may look to some JQuery plugins for a canned solution to your problem. That being said, it never hurts to learn how to do this stuff manually w/ JQuery.</p> <p>Good luck.</p>
    singulars
    1. This table or related slice is empty.
    1. POjQuery Tabs - Load contents only when clicked
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USwilsoniya
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery Tabs - Load contents only when clicked
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIt's easier to use jQuery UI's Tab plugin. See CMS' comment below.
      singulars
      1. PO
      1. USrboarman
 

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