IE11 rejecting back-quotes

Page: 1

Author Post
Member
Registered: Apr 2018
Posts: 2
I'm trying to use the afterBoxStart option, which in the documentation mentions requiring the back-quotes. Works great in Chrome, but unfortunately IE11 reports it as an invalid character in the javascript, and refuses to load any of that javascript file. Is there any workaround for this?

Specifically, I'm trying to set this option so that a textbox has focus when the floatbox is displayed:
afterBoxStart:`fb.$('FloatPassword').focus()`

Or maybe there's an alternative way so that we could avoid the back-quotes altogether? The autofocus HTML tag didn't seem to work, nor using the OnLoad event for the page.

Thanks in advance!
Nathan
Administrator
Registered: Aug 2008
Posts: 3350
Some more details and context would have been helpful so I could give you a targeted reply. Instead, you'll get the rambling wordy reply. :-)

The back-quotes may be needed for correct parsing of a data-fb-options string. This is so that the option string parser knows to skip over any characters that would otherwise be interpreted as delimiters. Really, the back-quotes are needed only when one of the following characters appear in the option setting part of the string:
= : , ; & <space>
The first 2 can be used to demark an option name from its value, and the remaining 4 are for separating name:value pairs.
For example, "caption:My Caption" will set the caption to "My", while "caption:`My Caption`" will set it to "My Caption".

Since IE is barfing on the back-quotes, I assume that the quoted afterBoxStart setting is not a string segment from a data-fb-options attribute. Perhaps it is a snippet from options being set somewhere in fbOptions.js? The fbOptions.js file is javascript code, and must be syntactically correct for the javascript parser. The back-quotes don't belong there.

A callback such as afterBoxStart needs to be provided as a string of code that Floatbox will 'eval', or a function that will be called. `fb.$('FloatPassword').focus()` is neither a string nor a function, and is not valid javascript.

In the case of your example, this could be
afterBoxStart: "fb.$('FloatPassword').focus()"
which assigns a string, or
afterBoxStart: function () {
fb.$('FloatPassword').focus();
}
which assigns a function.

It's worth noting that you don't want
afterBoxStart: fb.$('FloatPassword').focus()
Remembering that what we are doing is writing javascript code in fbOptions.js, that piece of code will attempt to execute the focus() call at load time of the fbOptions file, and will assign the return value from that call to the 'afterBoxStart' object member. Like I say, not what you want.

The simple summary:
If the assignment is done as a segment of a data-fb-options attribute string, and the value being assigned is more complex than a simple word, put back-quotes around it.
If the assignment is part of an options javascript object, use a string (no back-quotes) to eval or a function to call.

Finally, if the form is being loaded as an iframe (is a separate standalone HTML page) it's probably best to put the focus request right on that page, in a short script element just before the body closing tag.
<script>
document.getElementById( 'FloatPassword' ).focus();
</script>
</body>


If all this doesn't get it sorted out, please link me into a live page and I'll see what's really going on.
Member
Registered: Apr 2018
Posts: 2
I appreciate your thorough reply. Not only did it resolve the problem, it was educational too!

Short version is your suggestion to switch the back-quotes to regular quotes resolved the issue, and it's working properly in both Chrome and IE now.

Slightly longer follow-up in case it helps anyone in the future, I was in fact trying to add the afterBoxStart to a separate javascript file, which then attempts to start the floatbox, pointing it to page, like this:

	var fboptions;
fboptions = {
contentScroll:false,
doAnimations: false,
afterBoxStart: "fb.$('FloatPassword').focus()"
};

fb.start('FloatLogin.asp' , fboptions);

With the detailed explanation, it's clear why the back-quotes wouldn't be valid javascript. Though it is interesting Chrome doesn't care and handles it just fine.

For some reason, adding the script directly on the page didn't work. Occasionally you could briefly see the cursor go to the input box and then quickly disappear again. I'll write that off to some nuance of the site we were trying to add the box to, I'm quite content that the afterBoxStart solves it.

Thanks again for your exceptional support!
Administrator
Registered: Aug 2008
Posts: 3350
Mystery solved about Chrome, but not IE, allowing the back-quotes in javascript. It's an enhanced string demarcation newly specified in the ECMScript 2015 specification.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Floatbox recognizes ~tilde~ characters as option-string parsing helpers in addition to `back-quotes`. Perhaps going forward it might be best to prefer the tildes.

Also, my bad regarding putting the focus call on the page. Floatbox is kind enough to focus the iframe window after it is loaded, and this undoes any focusing that was done by the page itself. afterBoxStart, or better yet afterItemStart, is the correct way to do something to the new page after Floatbox has finished setting it up.

I'm going to look at doing something less presumptious with focussing in subsequent releases. Perhaps checking if something appropriate is currently focused and leaving it alone if it is, and perhaps favouring the first found input or textarea as the auto-focus target.

Page: 1