0

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:

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

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:

<?php
namespace Craft;

class MyPlugin_MyFieldType extends BaseFieldType
{
    function init()
    {
        craft()->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.

3
  • 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. – Brandon Kelly Oct 19 '15 at 22:43
  • 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 Oct 21 '15 at 13:46
  • 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. – aran Oct 28 '15 at 1:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.