Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Saganbyte, </p> <p>A couple of approaches come to mind. </p> <p>First, let's assume the HTML of each of your four image/video/audio/documents divs is something like this:</p> <pre><code>&lt;div class="content" ...&gt; ... &lt;input class="copyMe" /&gt;&lt;!-- the element whose value is to be copied --&gt; &lt;/div&gt; </code></pre> <p>Both approaches rely on a single "copy" button, which is visble when zClip is initialized:</p> <pre><code>&lt;a id="copy"&gt;Copy&lt;/a&gt; </code></pre> <p>Your HTML is undoubtedly different but it should be fairly simple to adapt the ideas below to suit.</p> <h2>Move "copy" button to the active div</h2> <p>This solution relies on :</p> <ul> <li>placing the "copy" button anywhere in the DOM, providing it is visible on page load</li> <li>making the "copy" button work relative to its current position</li> <li>providing in each content div an empty element (eg. a span or div) with <code>class="copyWrapper"</code>, into which the "copy" button can be moved</li> <li>moving the "copy" button into the active panel's <code>.copyWrapper</code> element each time a tab is clicked.</li> </ul> <p>Initialize zClip as follows:</p> <pre><code>var $copyButton = $('a#copy').zclip({ path: 'js/ZeroClipboard.swf', copy: function() { return $(this).closest('div.content').find('.copyMe').val(); //$(this) is assumed correct } }); </code></pre> <p>And initialize the tabs (assuming jQuery UI "tabs") as follows :</p> <pre><code>$(".selector").tabs({ ... show: function(event, ui) { $(ui.panel).find('.copyWrapper').append($copyButton); } }); </code></pre> <h2>Static "copy" button</h2> <p>This solution relies on :</p> <ul> <li>changing the page design to place the "copy" button outside the content divs</li> <li>making the "copy" button work on whichever content div is currently visible.</li> </ul> <p>Initialize zClip as follows:</p> <pre><code>$('a#copy').zclip({ path: 'js/ZeroClipboard.swf', copy: function(){ return $('.content:visible').find('.copyMe').val(); } }); </code></pre> <h2>Dynamic one-time zClip initialization</h2> <p>This solution relies on :</p> <ul> <li>initializing each div's "copy" buttons (pleural) when they are first shown</li> <li>raising a boolean flag on initialization to inhibit further attempts to re-initialize when tabs are re-visited.</li> </ul> <p>javascript:</p> <pre><code>$(".selector").tabs({ ... show: function(event, ui) { var $panel = $(ui.panel); if(!$panel.data('zClip_initialized')) { //If zClip not initialized in theis panel, then initialize it. $('a.copy').zclip({ path: 'js/ZeroClipboard.swf', copy: function() { return $(this).closest('tr').find('.....').val();//Lots of guesswork here. You should have written this already. } }); $panel.data('zClip_initialized', true);//Raise a boolean flag to indicate that zClip is already initialized } } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POzclip issue when assigning it to multiple links in hidden divs
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USBeetroot-Beetroot
    1. USBeetroot-Beetroot
    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. 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. COFirstly, thank you for taking the time and effort to put this across so neatly. Though I must clarify that each of the 4 divs contains a list of media files, each of which have a copy link. So there are potentially hundreds of copy2clipboard links. I think you ve presumed that there s one copy2clipboard link for each of the 4 divs.
      singulars
      1. PO
      1. USwalmik
    2. COYes you are right, that's what I assumed. Multiple copy links are indeed very different. I must think hard how to handle that .....
      singulars
      1. PO
      1. USBeetroot-Beetroot
    3. CO@saganbyte, I have added a third possible solution, this time taking multiple copy links per div into account. It's a bit sketchy because I haven't seen your HTML but the missing bit should be similar/same as what you have already written.
      singulars
      1. PO
      1. USBeetroot-Beetroot
 

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