33

Stack Snippets arrived on SO last September and they are great - I love this demo which shows off what you can do with them.

They basically bring a subset of JSFiddle into the site, and something similar could be done with a subset of SQLFiddle here.

To see what I'm proposing, please go to this SQL-only answer on a postgres question (please vote up Erwin's excellent effort there when you pass by!), and run this script on the console (only tested on Firefox):

$('div.post-text>blockquote').each(function(){ 
  $(this).css('background-color','#dde');
  $('<input type="button" value="edit">').appendTo(this).click(function(){
     $(this).closest('blockquote').children('pre').filter(function(){ return /^[^/]/.test($(this).text()); }).each(function(){
       $('<textarea style="height: 8px; width: 100%; resize: none; box-sizing: border-box; overflow-x: auto; overflow-y: hidden;" wrap="off" name="sql[]">'+$(this).text()+'</textarea>').replaceAll($(this))
         .keyup(function(){
           var st = $(window).scrollTop();
           $(this).css("height", "").css("height", this.scrollHeight);
           $(window).scrollTop(st);
         }).keyup();
     });
     $('<input type="button" value="run">').replaceAll($(this)).click(function(){
       var textareas = $(this).closest('blockquote').find('textarea[name^=sql]');
       $.ajax({ dataType: "json", type: 'POST'
              ,      url: 'http://fiddle.douglastechnology.co.uk'
              ,     data: textareas.serialize() }).done(function(r){
         r.output.forEach(function(e,i){
           if(e.hasOwnProperty('result')){
             textareas.eq(i).next().children('code').children('span').text('/*\n'+e.result+'\n*/');
           }
         });
       });
     });
  });
})

If it works, you should find an 'edit' button appears:

With 'edit' button

Pressing 'edit' allows you to change the SQL:

enter image description here

Here's what I get after changing the limit in the query to 3 and pressing 'run':

enter image description here

Do we want this on DBA.SE? This is just a rough and ready proof of principle - I'm imagining something more like the actual Stack Snippets interface on SO with a pop-up editor.

  • 1
    Works on Chrome version 39.0.2171.95 m – Paul White says GoFundMonica Jan 12 '15 at 10:30
  • 1
    That's good to know, thanks for checking. Seems to work in IE11 too somewhat to my surprise... – Jack Douglas Jan 12 '15 at 10:44
  • worked on chrome Version 39.0.2171.95 m for me while behind a corporate firewall but a bit slow to load. Specifically it took over ten seconds for the initial page to load and over five seconds for the results to appear after pressing run – kevinsky Jan 12 '15 at 13:43
  • @kevinsky Thanks. When you say ten seconds for the page to load, you mean just for the normal link before the js is run? Do you get the same issue on other DBA.SE pages? – Jack Douglas Jan 12 '15 at 13:56
  • @JackDouglas all SE pages load like greased lightning. When I click on this link sqlfiddle.com/#!12/0af9c/12 it takes over ten seconds to load, the ads at the bottom load right away, and then over three trials the actual fiddle takes 20 to thirty seconds to load. My Location Ottawa,Ontario – kevinsky Jan 12 '15 at 14:53
  • @kevinsky I've removed the SQLFiddle link to prevent confusion - it's not directly related to this post. Does the 'SQL Snippet' work for you? – Jack Douglas Jan 12 '15 at 15:07
  • Pretty slick. Response was pretty good too. – Sathyajith Bhat Jan 17 '15 at 19:53
  • Why isn't this feature-request considered ? I'd really like it to happen – Dan Chaltiel Nov 15 '18 at 13:41
  • @Dan I'm not sure because I don't think I had any response — but my guess is that it's too much effort here. It'd be useful for the SQL tag on SO as well though… – Jack Douglas Nov 15 '18 at 22:53

You must log in to answer this question.

Browse other questions tagged .