Why do jQuery Tabs not work on forms if there are embedded Table Reports on the form?

  • 1
  • 1
  • Question
  • Updated 3 years ago
  • Answered
On the Form I have a field with the following formula 

(thanks to dandiebolt_QB_Pirate

"<img qbu=\"module\" src=\"/i/clear2x2.gif\" " &

"onload=\"javascript:if(typeof QBU=='undefined'){QBU={};$.getScript('" &

URLRoot() &

"db/" &

Dbid() &

"?a=dbpage&pagename=module.js&rand='+Math.random())}\">"

on the Code Page I have this code:

Page name is module.js


Code:

 var markup = "";

    markup += "<ul>";

    $("#formContents div.sectionDiv").each(function(index){

      markup += "<li><a href='#tab_" + (index+2) + "'>" + $("span.sectionTitle",this).text() + "</a></li>";

    });

    markup += "</ul>";



    $("#formContents").prepend(markup);



    $("#formContents div.sectionDiv").each(function(index){

      $(this).attr("id","tab_" + (index+2));

      $("div:lt(2)",this).hide();

    });



    $("#formContents").tabs();

but i noticed the tabs break once it comes across an embedded Table report.

Any ideas?
Photo of Kevin

Kevin

  • 0 Points

Posted 3 years ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,064 Points 20k badge 2x thumb
Try putting an immediate child combinator (ie >) between #formContents and div.sectionDiv:

$("#formContents > div.SectionDiv") ...
Photo of Manny

Manny

  • 0 Points
[mention://513 @dandiebolt_QB_Pirate] I have the same problem. thanks for the suggestion, but it did not work. Anyone have another idea?

I tried this:

 var markup = "";
    markup += "<ul>";
    $("#formContents > div.sectionDiv").each(function(index){
      markup += "<li><a href='#tab_" + (index+1) + "'>" + $("span.sectionTitle",this).text() + "</a></li>";
    });
    markup += "</ul>";

    $("#formContents").prepend(markup);

    $("#formContents > div.sectionDiv").each(function(index){
      $(this).attr("id","tab_" + (index+1));
      $("div:lt(2)",this).hide();
    });

    $("#formContents").tabs();
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,064 Points 20k badge 2x thumb
I made a quick example and pasted the code into the console and it worked for me on both view and edit pages. I would have to see you exact example to offer an opinion on why it is not working for you.
Photo of Manny

Manny

  • 0 Points
[mention://513 @dandiebolt_QB_Pirate] does your example include "Report Link" field type that "Displays the related documents directly on the form?" That is when the code seems to break.
Photo of Manny

Manny

  • 0 Points
figured it out. You need to put the IMAGE ON LOAD field all the way at the bottom of the form...instead of the top of the form...


:D 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,064 Points 20k badge 2x thumb
There may be some dynamic content that QuickBase's scripts are generating to build the content you want to manipulate so you might have to delay the execution of the image onload script till after the content you want to manipulate is actually rendered.

When using the Service Worker technique you can gain full control of the pages that are being requested at the network layer so you can manipulate or substitute the response before the browser even receives the page for rendering. Service Workers are implemented in Chrome and Firefox and are in development for Microsoft Edge:

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/

When Service Workers land in Edge there will be a paradigm shift and you will have complete control over QuickBase.