Skip to main content
Question

How to add a custom image to a button containing javascript?

  • February 26, 2018
  • 0 replies
  • 114 views
I have a button that that updates a Status field to "Complete."

It is set up with Javascript because I want the update to be "instant" and the page to not reload. 

How would I add my own icon from a QB-hosted PNG image to replace the built-in button? 

My code looks like: 



var text URL = 
URLRoot() & "db/" & Dbid() & "?act=API_EditRecord&rid=" & [Record ID#] &
"&_fid_7="&URLEncode("Complete") &
 "&_fid_8=" &Now();
 
 

"javascript:" & 
"$.get('"  &
$url & 
"',function(){" & 
"$.jGrowl('Status changed to Complete.', {life: 5000, theme: 'jGrowl-green'});" & 
"});" & 
"void(0);
    This topic has been closed for replies.

    • anomDiebolt
    • Registered
    • February 26, 2018
    You have to use a Rich Text formula field to display an image representing the button. 

    In your draft formula you are attempting to call the method API_EditRecord and jGrowl() in addition to styling the button with an image.  It is easier and more flexible to not mix (1) API calls and (2) JavaScript into your formulas irrespective of what support, prior forum answers, other power users or documentation may suggest. You will find a script solution vastly more useful and I suggest you use the IOL tecdchnique.

    The following Pastie links to the IOL technique setup instructions and provides the formula for the IOL field and module.js code:

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

    If you need more instructions feel free to ask. If you are hesitant or unsure of using the IOL technique you can rely on one of the other answers that shows up (I don't think there will be any).
    • AdamParker1
    • Registered
    • February 27, 2018
    Dan, Thank you for the reply. 

    I have successfully loaded IOL into this table, but I am struggling to implement this. 

    Here's where I'm stuck: 

    1. Is the [-] field the "IOL Field"? I.e., is this where the code from the IOL Field section goes? ]

    2. Where do I enter the Content code? 

    3. How do I edit the existing code for my button field? 
    • ArchiveUser
    • Author
    • Registered
    • February 27, 2018
    Dan, Thank you for the reply. 

    I have successfully loaded IOL into this table, but I am struggling to implement this. 

    Here's where I'm stuck: 

    1. Is the [-] field the "IOL Field"? I.e., is this where the code from the IOL Field section goes? ]

    2. Where do I enter the Content code? 

    3. How do I edit the existing code for my button field? 
    • ArchiveUser
    • Author
    • Registered
    • February 27, 2018
    Dan, 

    Here is where I am currently: 

    1. module.js - I replaced the module.js code with the supplied pastie code from "Content"

    2. [-] - I replaced this with the IOL Field code supplied in the pastie. It is displaying the image you provided. 

    I don't know what to put in my button field (or if I'm doing any of this correctly). 

    Thanks
    Terms & ConditionsAccessibility statement