My image onload (IOL) working in view mode but not edit mode (a=er). I'm not sure where to begin trouble shooting.

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered
I'm using the IOL to load an html table onto my form (see attachment for sample). I have one JS page for edit mode (a=er) and one for view mode (a=dr). 

Here is my JS code for edit mode: 

http://pastie.org/private/xv2dah4lw8ojnsrku1oztw


Since the call has "if(/a=er/i.test(querystring))", I'm confused about why (1) this script works in view mode and (2) it does not work in edit mode. 

Any guidance is most appreciated. 

Update: Added image showing that how both my a=er and a=dr javascript templates will display on the view mode form at the same time. 

Photo of Taylor

Taylor

  • 52 Points

Posted 3 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
When using the IOL technique you typically name the script file module.js or moduleTableName.js and include all your script code within this one file and use decoding logic to determine which page you are on. Without code and formula modifications of the standard IOL definitions you cannot load two module files from the same page. So merge your two scripts into one file and everything should work.

The technical reason why your second script is not running is because the [-] formula field makes a test if the global variable QBU is defined and bypasses calling $.getScript() if it is. This is done to prevent repeated loadings of the module file when on report or grid edit pages. When placing a second IOL field on the page the logic is detecting that the QBU global variable exists and the $.getScript() from the second IOL field is never called.
Photo of Taylor

Taylor

  • 52 Points
Thanks for replying!

My JS knowledge is limited so please forgive the rudimentary questions. To combine these into a single code should I be trying to write something like this:

if(/a=dr/i.test(querystring) or /a=er/i.test(querystring)) {

or is there a way to exclude the dr/er references so that it works in either mode?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
Here is the template I use:

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

You can eliminate some sections that you do not use or combing them if the use the same code like this:

  if(/a=er/i.test(querystring) || /nwr/i.test(querystring)) {
    //common code for ?a=er and ?a=nwr
  }
Photo of Taylor

Taylor

  • 52 Points
Thanks again, Dan!

To make sure I was on the right track, I first tried tried to have the table display only in edit mode (following the rules of using only one module.js and one [-] field). The JS text is the same as the pasty in my OP, and I'm having the same issue where even though it is a=er it is displaying on the view form and not the edit form.

Any idea what's going on?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
to debug the IOL technique the first step is to put a simple alert("imodule loaded") in module.js - and nothing else. If you see the alert the problem is within the script code and not the setup of the IOL technique. From there you just use alert()'s and console.log()'s to debug your script. Just change one thing at a time.
Photo of Taylor

Taylor

  • 52 Points
Daaaaan, you da man!

After breaking it down and still not having the alerts display in edit mode, I poked around some more and discovered I had two other instances of [-] formula fields on my form. These fields were causing the problems. Now I've got the combined code in there and everything is working great! Thanks!

if(/a=dr/i.test(querystring) || /a=er/i.test(querystring)) {
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,434 Points 20k badge 2x thumb
>My JS knowledge is limited  ...

Glad you got it working. Your accomplishment is a testament to the power and simplicity of using JavaScript with QuickBase.

For those that don't completely understand what Taylor is doing let me explain. Taylor wants to display several compact tables of information composed from the values of different fields (928 field values) within the screen real estate of a single field on ?a=er and ?a=nwr pages. After using the API to obtain the raw data, Taylor is using a Mustache template to create the HTML which is eventually placed in the field position where the image onload field is located. The template is not specified in Taylor's original post but it is dynamically obtained from a second user defined page with this statement:

$.get(dbid + "?a=dbpage&pagename=template.html")

The screenshots Taylor attached are the rendered Mustache templates with data from the API call merged into the template.

Here are some resources for learning about Mustache templates:

Tutorial: HTML Templates with Mustache.js
http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

Examples of Mustache Templates
https://quickbase-community.intuit.com/questions/1324975
This is a massively powerful technique as Mustache templates can create just about any HTML layout from an arbitrary JSON data source.