1 2 Previous Next 25 Replies Latest reply on Jul 29, 2015 8:18 PM by bimsickle

    TableSorter in Filemaker Web Viewer

    bimsickle

      I am having trouble getting TableSorter to work in a webviewer window.

       

      I followed the directive from Tablesorter.com/docs and it works great for a html file (made in notepad on my computer in chrome).

       

      When I use the same code in FM13 it doesn't work. Table is there but the sorting is not.

       

      I went down the path of putting the jqueries in the code, also doesn't sort.

       

      Does an one know what I may be doing incorrectly??

       

      Note, my code works perfectly as a html document, and yes in FM I start with "data:text/html,"

       

      The filemaker file is currently on my pc but will be migrated to an FM server soon.

        • 1. Re: TableSorter in Filemaker Web Viewer
          fmpros

          I'm probably wrong on this, not knowing too much on this subject but isn't it a semi-colon after "html", not a comma?

           

          "data:text/html;"

           

          William

          • 2. Re: TableSorter in Filemaker Web Viewer
            bimsickle

            Hi William. definitely a comma.

            Tried a semi colon in case I misread, but it doesn't show anything.

             

            Thanks though

            • 3. Re: TableSorter in Filemaker Web Viewer
              beverly

              I have seen this sort of (pun) trick work in some browsers and not work in some. I've had to abandon it, if clients want things to "just work" in all browsers, even old ones.

               

              One thing to study up on is "HTML5 Shiv" (https://en.wikipedia.org/wiki/HTML5_Shiv) as it has methods to get around some browsers. It may or may not help in your case. (also http://www.sitepoint.com/html5-older-browsers-and-the-shiv/)

               

              Welcome to the web world and the inherent problems with working with browser inconsistencies!

              beverly

              • 4. Re: TableSorter in Filemaker Web Viewer
                bimsickle

                Do you think that  FM web viewer is causing the browser inconsistency?

                 

                Do you know of another table sorting jquery that does work with FM13/14?

                 

                I will follow your links and do more reading...

                 

                Thanks Beverley

                • 5. Re: TableSorter in Filemaker Web Viewer
                  user19752

                  If you write "data:text/html," following html text should be properly line break with ¶, especially javascript part.

                  So writing javascript in text literal is a bit ugly job, using field or layout object may be better.

                   

                  You are better to debug it with IE than Chrome, since WebViewer is IE on Windows.

                  • 6. Re: TableSorter in Filemaker Web Viewer
                    bimsickle

                    Do you think that that would still be the case even though the stored html file works perfectly in the web viewer?

                     

                    That is why I am leaning towards it being something I am missing in the filemaker code....

                    • 7. Re: TableSorter in Filemaker Web Viewer
                      bimsickle

                      I didn't actually write it in text, I just tested it with text to create a HTML file to see if it was working at all.

                       

                      The HTML was formatted with a script in FM, and is just a table using using table tags. No other body content, the only breaks are row breaks </tr>

                       

                      I will add the ¶ to the bit of jquery that is not referenced and see if that works.

                       

                      Thanks

                      • 8. Re: TableSorter in Filemaker Web Viewer
                        bimsickle

                        Still no luck...

                        • 9. Re: TableSorter in Filemaker Web Viewer
                          bimsickle

                          This is what I have got...

                          from tablesorter.com/docs


                          data:text/html,

                          <!DOCTYPE html><html><Head><script type="text/javascript" src="FOLDER/jquery/jquery-ui.min.js"></script>

                          <script type="text/javascript" src="FOLDER/jquery.tablesorter/jquery.tablesorter.min.js"></script><script type="text/javascript">

                          $(document).ready(function()

                          {

                          $("#myTable").tablesorter();

                          }

                          );

                          </script></Head><body><Table id="#myTable" class ="tablesorter"><thead><tr><th>ID</th><th>CUST</th><th>REP</th><th>FSC12 #</th><th>FSC12 $</th><th>FSC100 #</th><th>FSC100 $</th></thead><tbody><tr><td>17575</td><td>BROOKVALE</td><td>Sales Person</td><td>3</td><td>23.07</td><td>0</td><td>0</td></tr><tr><td>17545</td><td>KALAS TRUST</td><td>Sales Person</td><td>1</td><td>7.61</td><td>0</td><td>0</td></tr></tbody></table> </body> </html>

                          • 10. Re: TableSorter in Filemaker Web Viewer
                            user19752

                            I tested it and worked with the code below.

                            1st script tag use CDN, load jquery from server on internet.

                            2nd script tag use text object in same layout, embed the file contents.

                            3rd script tag is javascript in literal text, that I mentioned. This is able to be written in 1 line, so there is no need to real line break, but for example if there is a comment //, need line break after it.

                            In FM calculation,

                            "a

                            b"

                            means

                            "a b"

                            then

                            "//comment

                            var a=b"

                            becomes

                            "//comment var a=b"

                             

                            "data:text/html,

                            <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.min.js'></script>

                            <script>" & GetLayoutObjectAttribute ( "tablesorter.js.min" ; "content" ) & "</script>

                            <script>

                            $(document).ready(function()

                                {

                                    $('#myTable').tablesorter();

                                }

                            );

                            </script>

                             

                            <body>

                            <table id='myTable' class='tablesorter'>

                             

                            ...snipped...

                            • 11. Re: TableSorter in Filemaker Web Viewer
                              user19752

                              Ah, I see. You need full path for src.

                              data: doesn't have base directory as FM file nor any. It is file: in the temp directory when run on windows web viewer.

                              • 12. Re: TableSorter in Filemaker Web Viewer
                                bimsickle

                                Sorry, I totally cannot get this to work....

                                 

                                I build the HTML with a script, and the parts of the jquery that send the calculation checking bananas I have in separate text fields like ( id="#myTable" class ="tablesorter")

                                the whole lot is passed into a variable then a field is set with the result

                                 

                                "<!DOCTYPE html>" & "<html><Head>" &

                                UtilityReportTable::Jquery_UiCss &  UtilityReportTable::Jquery_TableSort & UtilityReportTable::Jquery_TableSortfn &

                                "</Head><body><Table" & UtilityReportTable::Jquery_Text & "><thead><tr><th>ID</th><th>CUST</th><th>REP</th>"

                                 

                                This builds the start of the HTML code.

                                The first two fields are the ones I know are causing me trouble. They are the two that generate the first two scripts.

                                 

                                With your code, is the second script inserted in the braces? Or are you creating the result with the webviewer and not passing it in?

                                If I add that calculation to my build script I end up with <script></script> with nothing in between...

                                 

                                I will try changing the calc to be built with the web viewer and see what happens there.

                                • 13. Re: TableSorter in Filemaker Web Viewer
                                  user19752

                                  I meant full path as

                                  src="FOLDER/jquery/jquery-ui.min.js"

                                  should be something like

                                  src="c:/FOLDER/jquery/jquery-ui.min.js"

                                  but this is not very portable.


                                  My second script is sample of loading from layout object. Need to make a text object, paste contens of jquery.tablesorter.min.js into it, and name any you like.

                                  You can use global text field instead of layout object same way. This may be easier. Create field, copy & paste .js file contents, use it in calc.

                                   

                                  You are planning the solution hosted with FMS, then the js library can be loaded from its web server.

                                  "http://" & Get(HostIPAddress) & /lib/jquery.tablesorter.min.js"

                                  1 2 Previous Next