Jump to content
View in the app

A better way to browse. Learn more.

FMForums.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Problem with sending data from jquery web viewer back into a FileMaker field

Featured Replies

Hi brainiacs,

 

Description of the problem is below, but the resulting question is this:

 

How do I have a script in one file tell a particular window of another file to "go to record number 50" ?

 

Specifics:

I have a web viewer with a jquery slider (see attached image). I'm using to replicate Filemaker's record scroller.

 

This will only work on a hosted file, not a file running on a local workstation.

 

It works by...

 

Assume the slider has a minimum value of 1 and a maximum value of 100...

 

1) User moves slider to 50% mark

2) jquery records the slider number (50)

3) jquery calls a script in the file (fmp://207.xxx.xxx.x/hosted_data_file.fmp12?script=scroll_records&param=50

           - so you can see this is why the file needs to be hosted

4) "scroll_records" script moves to record number 50

 

Works nicely and means I can hide and lock the Filemaker toolbar permanently as I have all the controls a user needs in my own UI.

 

BUT... try doing this using the separation model. That is... data on server, UI file on local workstation...

 

 

1) UI File: User moves slider to 50% mark

2) UI File: jquery records the slider number (50)

3) UI File: jquery calls a script in the hosted data file (fmp://207.xxx.xxx.x/hosted_data_file.fmp12?script=scroll_records&param=50

4) "scroll_records" script CAN NOT move the UI file to record number 50 because the script is in the hosted data file. A script in one file can't tell another file to scroll records.

 

That sucks...

 

I've tried all sorts of workarounds, but I think what has to happen is something like this...

 

Have the "scroll_records" script store the record number in a field in the data file, and then somehow get the UI file to recognise that the field has been modified and then the UI file can perform a script to scroll the records.

 

But how do I get the UI file to know when the field in the data file has been modified?

post-108462-0-42709900-1366893263_thumb.

Confused: the data file is on the server.  Why would you want that file to do a UI action?  In the separation model that file is not visible to the user at all.

  • Author

Well, because the jquery slider in the web viewer calls a custom function which opens a shared database remotely using URL:

 

 

fmp://207.xxx.xxx.x/hosted_data_file.fmp12?script=scroll_records&param=50
 
And that script can scroll to the right record (record 50 in this case).
 

Except this only works on a HOSTED file, not a LOCAL file. Documentation is here:

 
http://www.filemaker.com/12help/html/sharing_data.16.7.html

 

This slider / record scroller works perfectly if the data / UI are the one file and hosted. But when the UI file is on a workstation and it's the UI file that needs the records to be scrolled... the whole system breaks because the data file can't have the UI file as one of it's file references. Therefore the data file can't call scripts in the UI file, or tell the UI file to change records, or tell the UI file that the currect_record field has been updated.

  • Author

To help understand what the web viewer actually does, here's the code from the webviewer.

 

Note: the code is actually constructed using custom functions but to simplify things here I just dumped what the code would be if the user scrolled to record number 50...

 

 

 

data:text/html, <!DOCTYPE HTML> 
<html> 
<head> 
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' type='text/css' media='all'>
<style type='text/css'>
html, body {background:#f1f1f1;height:100%;width:100%;border:0;padding:0;overflow:hidden;}
#slider-range {position:absolute;width:85%;left:5px;}   
.ui-slider .ui-slider-handle {font-size:.1em; width:1.2em; height:1.2em;-webkit-border-radius:5px;border-radius:5px;background:#eee;}   
.ui-slider .ui-slider-range {font-size:.1em;background:#85BAFA;}   .ui-slider-horizontal {height:2px;background:#ddd;border-color:#bbb;}   
.ui-slider-horizontal .ui-slider-handle {height:8px;width:8px;font-size:.5em;top:-.5em;}   .ui-slider-vertical {width:4px;background:#ddd;border-color:#bbb;}   
.ui-slider-vertical .ui-slider-handle {height:14px;width:14px;font-size:.5em;left:-.7em;} </style> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' type='text/javascript'></script>
<script src='http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js' type='text/javascript'></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js' type='text/javascript'></script> 
<script src='/js/demos.js' type='text/javascript'></script> 

<script type='text/javascript'> $(function() {   $( '#slider-range' ).slider({     min:1,     max:804,     step:1,     value:50,     stop: function( event, ui ) {       $( self.location = 'fmp://207.xxx.xxx.x/hosted_data_file.fmp12?script=scroll_records&param=clients::current_record|'             + $( '#slider-range' ).slider( 'values', 0 )        );     }   }); }); </script>
</head> 
<body>
<div id='slider-range'></div></body> 
</html>

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.