<p>I'm working on a custom plugin / fieldtype, and it requires first an external JS library, and then it needs to be initialized in-page. I.e:</p>

<pre><code>&lt;script src="//remote.path.to/my_script.js"&gt;&lt;/script&gt;
&lt;script&gt;
    my_script.init({selector: '#my_field'});
&lt;/script&gt;
</code></pre>

<p>I have the fieldtype set up as a second Entry Type in a test channel.</p>

<p>When I go to post a new entry, I (obviously) have to change Entry Types to the one with the field I'm developing. The first time I do this, everything works fine and initializes, but if I change the Entry Type back to the original type and then back again to the one with the test field, the Javascript initialization no longer appears to work or get triggered. In the browser's inspector, I see that the initialization line is getting inserted at the bottom of the HTML each time I switch to that Entry Type, so there's definitely duplicate code being appended; not sure if that's the issue or not.</p>

<p>Here's the basic and abstracted fieldtype code:</p>

<pre><code>&lt;?php
namespace Craft;

class MyPlugin_MyFieldType extends BaseFieldType
{
    function init()
    {
        craft()-&gt;templates-&gt;includeJsFile('//remote.path.to/my_script.js');
    }

    public function getInputHtml($name, $value)
    {
        $id = craft()-&gt;templates-&gt;formatInputId($name);
        $namespacedId = craft()-&gt;templates-&gt;namespaceInputId($id);

        // Prepare init string
        $script_init = "my_script.init({selector: '#" . $namespacedId . "'});";

        // Include JS
        craft()-&gt;templates-&gt;includeJs($script_init);

        return craft()-&gt;templates-&gt;render('MyPlugin/field', array(
            'name'          =&gt; $name,
            'id'            =&gt; $id,
            'value'         =&gt; $value
        ));
    }
}
</code></pre>

<p>I'm including the call to the remote script in the <code>init()</code> function so it doesn't get duplicated along with everything else.</p>

<p>So what's going on - why does the initialization not survive toggling between Entry Types?</p>

<p>EDIT: Also, not sure if related, but the field doesn't seem to survive the Live Preview mode, either. The JS-modifications that the script makes to the HTML form element are there visually, but I can't focus the caret in there. Also, once I exit the Live Preview mode, the content that was in the field before Live Preview is gone. I suspect at least part of this stuff is the external script I'm working with, but I figured I'd best report it anyway.</p>

CC BY-SA 3.0
2015-10-19T22:43:08.130Z
Try adding `debugger;` to the beginning of your JS code (`$script_init`). That will force Chrome’s JS debugger to break on that line, so you can verify that your JS code is getting executed each time you switch to the proper entry type.
Brandon Kelly
CC BY-SA 3.0
2015-10-21T13:46:48.357Z
Done; It is getting called each time I switch back and forth. Perhaps it's something with the field it's referencing with the selector not being ready yet? When Chrome pauses for the debugging, the relevant field _does_ show in the browser, so it doesn't seem like it's not ready yet, but that's how it's behaving...
Sandwich
CC BY-SA 3.0
2015-10-28T01:06:22.057Z
It is possible your init script is being called before the input is ready.  if you are listening for actions you could apply those to a parent or the body. ``` $("body").on("click",  "yourInputSelector",function(){});``` This will make sure the action is captured.
a-am
<plugin-development><entry-type><custom-fieldtype><devmode>
Issue with external JS when toggling between entry types
# Issue with external JS when toggling between entry types

(Asked by: username_0 on 2015-10-19)

I'm working on a custom plugin / fieldtype, and it requires first an external JS library, and then it needs to be initialized in-page. I.e:



I have the fieldtype set up as a second Entry Type in a test channel.
When I go to post a new entry, I (obviously) have to change Entry Types to the one with the field I'm developing. The first time I do this, everything works fine and initializes, but if I change the Entry Type back to the original type and then back again to the one with the test field, the Javascript initialization no longer appears to work or get triggered. In the browser's inspector, I see that the initialization line is getting inserted at the bottom of the HTML each time I switch to that Entry Type, so there's definitely duplicate code being appended; not sure if that's the issue or not.
Here's the basic and abstracted fieldtype code:
templates->includeJsFile('//remote.path.to/my_script.js');
    }

    public function getInputHtml($name, $value)
    {
        $id = craft()->templates->formatInputId($name);
        $namespacedId = craft()->templates->namespaceInputId($id);

        // Prepare init string
        $script_init = "my_script.init({selector: '#" . $namespacedId . "'});";

        // Include JS
        craft()->templates->includeJs($script_init);

        return craft()->templates->render('MyPlugin/field', array(
            'name'          => $name,
            'id'            => $id,
            'value'         => $value
        ));
    }
}

I'm including the call to the remote script in the init() function so it doesn't get duplicated along with everything else.
So what's going on - why does the initialization not survive toggling between Entry Types?
EDIT: Also, not sure if related, but the field doesn't seem to survive the Live Preview mode, either. The JS-modifications that the script makes to the HTML form element are there visually, but I can't focus the caret in there. Also, once I exit the Live Preview mode, the content that was in the field before Live Preview is gone. I suspect at least part of this stuff is the external script I'm working with, but I figured I'd best report it anyway.

**Tags:** plugin-development, entry-type, custom-fieldtype, devmode
> **Comments:**
> **username_1**: Try adding `debugger;` to the beginning of your JS code (`$script_init`). That will force Chrome’s JS debugger to break on that line, so you can verify that your JS code is getting executed each time you switch to the proper entry type.  
> **username_0**: Done; It is getting called each time I switch back and forth. Perhaps it's something with the field it's referencing with the selector not being ready yet? When Chrome pauses for the debugging, the relevant field _does_ show in the browser, so it doesn't seem like it's not ready yet, but that's how it's behaving...  
> **username_2**: It is possible your init script is being called before the input is ready.  if you are listening for actions you could apply those to a parent or the body. ``` $("body").on("click",  "yourInputSelector",function(){});``` This will make sure the action is captured.  

---

## 0 answers

