Discussions

 View Only
Expand all | Collapse all

What is the Save and Scooby Doo Technique?

Dean Ousterhout

Dean Ousterhout02-07-2016 18:02

Dean Ousterhout

Dean Ousterhout02-07-2016 18:29

Archive User

Archive User06-17-2016 23:06

  • 1.  What is the Save and Scooby Doo Technique?

    Posted 01-16-2016 00:27

    I heard there is a brilliant new Save and Do type technique called Save and Scooby Doo technique. Does anyone know how it works or where I can see a demo of it?



  • 2.  RE: What is the Save and Scooby Doo Technique?

    Posted 01-16-2016 00:33
    Historically there have been two methods for creating a new record and immediately performing some additional action such as automatically creating related child records. These two techniques have not been publicly published because they might require lengthy support from the author (me). Now I have created a new technique which I call the Save and Scooby Doo technique which I am publishing because I think it will not require any special support. Here goes:

    Save and Scooby Doo ~ Add New Record
    https://haversineconsulting.quickbase.com/db/bkjdxnw2x?a=nwr


    Pastie Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=465


    I must say this is my best technique in all of 2016.

    UPDATED:

    Notes:

    1. The script adds a hidden <iframe> to the new record page. The <iframe> is initially empty of content but it will be used to receive the response of submitting the New Record form. This may appear odd that you can target when the response of a form submission can go because the normal behavior is to reload the page with the form submission's response. However, just as you can retarget where the response to clicking on a hyperlink can go (a <a> element), you can retarget where an <form>'s response go appear. 
    2. The script modifies the standard New Record Form (name=editform) by adding a target to the <form> pointing to the <iframe>. The net result of these two changes is that when the <form> is submitted the response will be written to the hidden <iframe> the host page will not reload as it normally would.
    3. When the <iframe> is finished loading the URL is extracted and the [Record ID#] of the newly created record being now displayed in the hidden <iframe> is parsed out can converted to a decimal value.
    4. We now know the [Record ID#] of the newly created record and we throw up a jQuery UI modal dialog displaying the [Record ID#] value along with an image of Scobby Doo.
    5. This technique is very general and can be used for a range of tasks where you want to do something further with a newly created record. Typical tasks might be to automatically create various child records or to edit the newly created record with perhaps a different form.


  • 3.  RE: What is the Save and Scooby Doo Technique?

    Posted 01-19-2016 18:13
    FWIW, I have a shorter version that extracts the kRid value from the hidden <iframe> with a single statement so you don't need to use the obe32decode function:

    Pastie Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=467


  • 4.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 17:42
    Nice Dan,  I need a flavor of this... I need to fire some more javascript after we have the RID.  I am not sure how to modify the sccobyDoo to do that?  I tried placing a  function call but it doesn't work... I am sure because I don't quite understand how you are making the new page appear?  Can you help with how to get the next function to run?

    Thanks, Dean  
    Here is what I tried...
    (function(){
      var querystring=document.location.search;

      if (/nwr/i.test(querystring)) {

        $("<iframe>", {id: "QBU_editform", name: "QBU_editform"})
          .css({display: "none"})
          .appendTo("body")
          .on("load", function() {
            QBbusyHide();
            var rid = this.contentWindow.kRid;

       


           var markup = "";
            markup += "<h2>You just created a new record with [Record ID#] = " + rid + " !<h2>";
            markup += "<center><img src=&#039;http://vignette3.wikia.nocookie.net/hanna-barbera/images/2/24/Scoobydoo.jpg' height='200'></center>";
            $("<div>").html(markup).dialog({
               title: "Save and Scooby Doo!",
              modal: true,
              close: function(event, ui) {
                   testAlert(rid);
                document.location.href = gReqDBID + "?a=er&rid=" + rid;
              }
            });
          });
        $("form[name=editform]").prop({target: "QBU_editform"});
      }
    })();

    function testAlert(rid) {

       alert("in testAlert... so I can start and do whatever I need to now that I have the new record id of "+rid);

    }


  • 5.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 17:45
    Please post code to a pastie to is it easy to read.

    http://pastie.org/10712485


  • 6.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 17:57
    perfect... thanks very much... and if after my code I want to go to another page?  Can you tell me how to make that happen?  :)


  • 7.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:00
    document.location href = "https://www.quickbase.com"; // whatever


  • 8.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:02
    beautiful... thanks tons.


  • 9.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:06
    I am able to get this all to work, but the user defined variables for [iol] and [/iol]  don't work in the text formula.  When I try to do [iol]myJavascript.js[/iol] it tells me that [iol] is not a field in the table.  I have been able to fully code the solution, but your iol would be soo much nicer to use.

    Thoughts?


  • 10.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:12
    [iol] and [/iol] are user defined variables - in the formula language they act as if they are fields available in all tables across the application. The definition of [iol] and [/iol] are defined in this pastie

    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294

    The whole point of pushing these two strings into user defined variables is to simplify the useage of the IOL technique since once it is set up you can use it in any table by just defining a new image onload field [-] in the table where you need the enhancement and creating a corresponding module.js user defined page.

    Once you go IOL you will never go back!


  • 11.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:19
    so just so I am clear... the name of the variable is [IOL=] and the value is the second line....<img qbu='module'.... ?


  • 12.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:21
    The names of the variables are "iol' and "/iol" *without* the quotation marks. When you use them in formulas you write something like this:

    [iol] & "module.js" & [/iol]

    or

    [iol] & "moduleTable.js" & [/iol]

    Again the whole point of using [iol] and [/iol] is to make using the IOL technique (repeatedly - throughout the application) as easy as possible.


  • 13.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:27
    Ok... all is now working... excellent... thanks very much.  The nice part of this is that I can now use the standard save button without creating my own.  This only seems to call the script when it is a nwr.  Can it also be used for an edit record... er?


  • 14.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:29
    of course... we already know the RID... but I was thinking about calling other functions...


  • 15.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:29
    and not having to create my own buttons.


  • 16.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 18:35
    You can use the IOL technique on any page were you can get the [-] field to be included. Once included the module.js file will run and you can detect what type page you are on by using the template in this pastie:

    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=293

    Also you can further control if the [-] is included in a form by selecting the option "Display when this form is used for:  edit, add, view ".


  • 17.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 19:00
    ok... so that is pretty neat... so you solved the problem of getting the RID. Now I realize, by using this method, instead of having my own button where I code the formula, I am now missing some values from the form?  Can I still pass values into this process?


  • 18.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 19:08
    It would be best to ask a new question as we are wondering away from the original post and I can earn more forum points which I can redeem for valuable merchandise at the QuickBase store and overtake Mark on the leaderboard.


  • 19.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 19:13
    :)  Ha... I wondered why you were so incredibly generous with your answers...  of course...  I do appreciate all the help.


  • 20.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-07-2016 19:18
    > ... so incredibly generous with your answers ...

    The only way to become an expert is to practice. I invest a lot of time learning the latest web and programming technologies and most of the well formed questions here in the forum have straightforward answers.


  • 21.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-08-2016 17:03
    Morning Dan,  I tried the ScoobyDoo on my firefox at work, and an IE browser, and both are now running all code after the .on("load"... both when the page loads and when the save is clicked.  How can I modify it so that it will run a subset of the code at load(like loading javascript includes), but run different code when the save button is clicked?  I was going to do a pastie but am blocked at work... I should be able to do that later.  Dean


  • 22.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-09-2016 02:08
    Please post your question in a new thread since you are beyond the Scooby Doo. If it involves script run it through http://jsbeautifier.org/ (with two spaces indention) and paste it into pastie http://pastie.org/ (and select JavaScript as the language). Try and post the minimal amount of code that is relevant to the question at hand.


  • 23.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-01-2016 16:36
    If I put this on an edit form page, is there a way to capture the previous value of the field?


  • 24.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-01-2016 16:49
    Yes.

    But  the previous values of a field is actually stored in the edit page form in a hidden field named _oval_fid_6.
    oval stands for "old value" which is actually the "current value" until the form  is actually submitted.


  • 25.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-17-2016 22:27
    I have run into a snag with grabbing old and new values when it comes to the checkbox. It seems the new value of the checkbox input field is always "on"? Do you know a way to get the new checkbox value when I uncheck?


  • 26.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-17-2016 22:35
    This code will return true if the check box is checked and false otherwise:

    $("#_fid_6").is (":checked")

    In other words you don't use $("#_fid_6").val () to get the value of a checkbox.


  • 27.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-17-2016 23:06
    doh! I knew that. Thanks for the reminder!


  • 28.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-17-2016 23:10
    Did you know that this works to:

    _fid_6.checked

    Try it - it will evaluate to true of false


  • 29.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-17-2016 23:12
    Very cool! I was using jquery's .is('checked') but I think I will use that instead.


  • 30.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-17-2016 23:16
    You can get the value of any field with similar code:

    _fid_6.value

    It may seem magical but all modern browsers create a global variables that correspond to the id attributes placed on elements. This global variable represents the DOM node and taking the .value property is just getting the value of the control.


  • 31.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-19-2016 18:07
    How about detecting if the user hits delete record? Can that be detected? and say get record id and user who did it?


  • 32.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-19-2016 20:40
    John>How about detecting if the user hits delete record? Can that be detected? and say get record id and user who did it?

    You should probably pursue QuickBase's Web Hook feature for this.
    I put together this handy dandy Venn Diagram to explain what can be done with JavaScript versus Native QuickBase:

    http://i.imgur.com/2psdwVK.jpg

    Using the image onload technique you can redefine  QuickBase's DoDelete() function to log the deletion to your own table using code similar to this:

    function DoDelete(nounSingular, dbid, rid) {
      var doHandleChecked = function() {
        kIsDelete = true;
        var dbidLog = "<your dbid>";
        var apptoken="<your apptoken>";
        $.ajaxSetup({data: {apptoken: apptoken}});
        $.post(dbidLog, {
          act: "API_AddRecord",
          _fid_6: rid,
          _fid_7: dbid
        }).then(function() {
          SetLocation(dbid + "?a=DoDeleteRecord&rid=" + rid + "&rl=" + GetValue("rl") + "&PageToken=" + GetValue("PageToken"));
          $(this).dialog("close")
        });
      };
      var msg = "<p>Are you sure you want to delete this " + nounSingular + "?<p>";
      QB.Dialog.confirm({
        title: "Delete " + nounSingular + "?",
        type: "Warning",
        size: "medium",
        contents: msg,
        contentType: "html",
        id: "dialogConfirmDeleteRecord",
        confirm: {
          text: "Delete",
          type: "Danger",
          click: doHandleChecked
        }
      })
    }


  • 33.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-20-2016 18:39
    Dan, did you ever answer Dean's question about ie and firefox? I couldn't find it. I always use chrome and my script works fine, but when I use firefox, ie, or edge, it executes all of the code in the $("<iframe>")... block on page load.


  • 34.  RE: What is the Save and Scooby Doo Technique?

    Posted 06-20-2016 18:45
    I don't have time to sort through all the twists and turns of this thread. Post a new self contained question with relevant details and I will try to answer. It should work in all browsers.


  • 35.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-15-2017 17:47
    I just made an update to the Save and Scooby Doo code to deal with a situation that may have effected behavior on Internet Explorer and FireFox. Apparently Chrome operates differently than Internet Explorer and FireFox when an <iframe> is placed in the DOM without any content.

    Chrome
    does not fire a load event until content is added while Internet Explorer and FireFox appear to fire a load event even if the <iframe> has no content. I suspect the intermittent operation on Internet Explorer and FireFox is due to a timing issue where the initial load event may sometimes occur before the event listener is created.

    To patch up path up the code and make it work in all browsers consistently I have added an if statement to the code which tests if the href of the iframe is set to "about:blank":

    .on("load", function() {
     if (this.contentDocument.location.href != "about:blank") {
      // rest of code
     } }) UPDATED: Pastie Database https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=465 UPDATED: Save and Scooby Doo https://haversineconsulting.quickbase.com/db/bkjdxnw2x?a=nwr
    FWIW, I work mostly in Chrome today and occasionally don't even test my code in Internet Explorer. However, almost all of my code is tested in Chrome before I post a demo or answer. If you encounter a problem there may be some isolated cases where I overlooked something but there is almost always a fix. This particular problem was intermittent in Internet Explorer and FireFox so apparently when I looked at it previously I never discover it myself.


  • 36.  RE: What is the Save and Scooby Doo Technique?

    Posted 05-21-2020 17:11
    do you know why the message its showing before the save it show just on load the form



    ------------------------------
    Miguel Soto
    ------------------------------



  • 37.  RE: What is the Save and Scooby Doo Technique?

    Posted 02-06-2019 18:42
    somewhat related to this, as I'm trying to implement it... I'm wanting to get the values of fields to then use them later in my JS code...

    Dan, you mentioned that $("#_fid_6").is (":checked") is how to check if a checkbox is checked... What is the notation to be able to get the actual value of a text field?


  • 38.  RE: What is the Save and Scooby Doo Technique?

    Posted 08-14-2019 00:33
    Thanks so much for writing about this technique. Is there a way to get it to work on the mobile site? If I view the demo at the start of this thread on mobile, the example doesn't work - just like how it doesn't work with my own application when on the mobile site. Any help with this would be very much appreciated.