Unable to select 'Add Another Service' if all others have been deleted.

[jburcsik]

I removed all of the services so that there are none. When I click on 'Add Another Service' an error is thrown and the new service dialogue is not displayed.

[zaus]

Yes that's kind of a weird "known bug" -- it's using javascript to clone the last service metabox (see #25), so if you delete all of them it has nothing to clone, and so it causes an error when it expected something there.

The immediate workaround is to save the page with no services -- it'll automatically regenerate a blank section, and you can start over from there.

Since there's a lot going on in the metabox html, I'd rather not recreate it from scratch in javascript, so I think the best "solution" is to warn you (i.e. alert(...)) that you need to save the page to get another service. Thoughts?

[jburcsik]

Thanks for the quick response.

When I click on 'save' it does not create a new blank section. When the page reloads there is an error. Possibly stopping other scripts form running and creating the new blank section?

[jburcsik]

I copied the HTML of a blank section from another instance and pasted it in to the DOM and then clicked save, and it worked. It went right before (as a sibling) the Dom element with class 'buttons'

BEFORE:

AFTER ( See div with metabox-0 id)

<div id="metabox-5" class="meta-box">
    <div class="shortcode-description postbox collapsed">
        <h3 class="hndle"><span class="b-toggle">[+]</span> <span>3rd-Party Service: </span></h3>
        <!-- <h4>Shortcode = <code>abt_google_conversion</code></h4> -->

        <div class="description-body inside">

        <fieldset><legend><span>Service</span></legend>

                <div class="field">
                    <label for="name-5">Service Name</label>
                    <input id="name-5" type="text" class="text" name="Cf73rdPartyIntegration[5][name]" value="">
                </div>

                <div class="field">
                    <label for="url-5">Submission URL</label>
                    <input id="url-5" type="text" class="text" name="Cf73rdPartyIntegration[5][url]" value="">
                    <em class="description">The url of the entity submission.</em>
                </div>

                <div class="field">
                    <label for="forms-5">Attach to Forms</label>
                            <select class="multiple" multiple="multiple" id="forms-5" name="Cf73rdPartyIntegration[5][forms][]">
                        <option value="7">Contact form 1</option>
                            <option value="437">Contact Us</option>
                            <option value="438">Contact Us</option>
                            <option value="446">DreamSpark English</option>
                            <option value="447">ESD FOR MICROSOFT - CRM FORM ENG</option>
                    </select>
                            <em class="description">Choose which forms submit to this service.</em>
                </div>

                <div class="field">
                    <label for="success-5">Success Condition</label>
                    <input id="success-5" type="text" class="text" name="Cf73rdPartyIntegration[5][success]" value="">
                    <em class="description">Text to expect from the return-result indicating submission success.  Leave blank to ignore.</em>
                    <em class="description">Note - you can use more complex processing in the hook, rendering this irrelevant.</em>
                </div>
                <div class="field">
                    <label for="hook-5">Allow Hooks?</label>
                    <input id="hook-5" type="checkbox" class="checkbox hook" name="Cf73rdPartyIntegration[5][hook]" value="true" checked="checked">
                    <em class="description">Allow hooks - see bottom of section for example:</em>
                </div>
        </fieldset><!-- Service -->

        <fieldset><legend><span>Mapping</span></legend>
            <table class="mappings">
            <caption>Listing of Contact-Form-7 to 3rd-party Mappings</caption>
            <thead>
                <tr>
                    <th id="th-5-static" class="thin">Is Value?</th>
                    <th id="th-5-cf7">CF7 Field</th>
                    <th id="th-5-3rd">3rd-Party Field</th>
                    <th id="th-5-action" class="thin">Drag</th>
                </tr>
            </thead>
            <tbody>
                                    <tr class="tr-values fields sortable">
                    <td headers="th-5-static" class="thin drag-handle">
                        <label for="mapping-5-0c" class="invisible">Is Value?</label>
                        <input id="mapping-5-0c" type="checkbox" class="checkbox c" name="Cf73rdPartyIntegration[5][mapping][0][val]" value="1" checked="checked">
                    </td>
                    <td headers="th-5-cf7">
                        <label for="mapping-5-0a" class="invisible">CF7 Field:</label>
                        <input id="mapping-5-0a" type="text" class="text a" name="Cf73rdPartyIntegration[5][mapping][0][cf7]" value="">
                    </td>
                    <td headers="th-5-3rd">
                        <label for="mapping-5-0b" class="invisible">3rd-party Field:</label>
                        <input id="mapping-5-0b" type="text" class="text b" name="Cf73rdPartyIntegration[5][mapping][0][3rd]" value="">
                    </td>
                    <td headers="th-5-action" class="thin drag-handle">
                        <span class="icon b-delete"><a href="#" title="Delete" class="b-del minus" rel="tr.fields">Delete</a></span>
                                                        <span class="icon b-add"><a href="#" title="Add Another" class="b-clone plus" rel="tr.fields">Add Another</a></span>
                                                    </td>
                </tr>
                                    <tr class="tr-values fields sortable alt">
                    <td headers="th-5-static" class="thin drag-handle">
                        <label for="mapping-5-1c" class="invisible">Is Value?</label>
                        <input id="mapping-5-1c" type="checkbox" class="checkbox c" name="Cf73rdPartyIntegration[5][mapping][1][val]" value="1" checked="checked">
                    </td>
                    <td headers="th-5-cf7">
                        <label for="mapping-5-1a" class="invisible">CF7 Field:</label>
                        <input id="mapping-5-1a" type="text" class="text a" name="Cf73rdPartyIntegration[5][mapping][1][cf7]" value="">
                    </td>
                    <td headers="th-5-3rd">
                        <label for="mapping-5-1b" class="invisible">3rd-party Field:</label>
                        <input id="mapping-5-1b" type="text" class="text b" name="Cf73rdPartyIntegration[5][mapping][1][3rd]" value="">
                    </td>
                    <td headers="th-5-action" class="thin drag-handle">
                        <span class="icon b-delete"><a href="#" title="Delete" class="b-del minus" rel="tr.fields">Delete</a></span>
                                                        <span class="icon b-add"><a href="#" title="Add Another" class="b-clone plus" rel="tr.fields">Add Another</a></span>
                                                    </td>
                </tr>
                                </tbody>
            </table>
        </fieldset><!-- Mappings -->

        <section class="info example hook-example">
        <fieldset><legend><span>Hooks</span></legend>

                <div class="description">
                    <p>The following are examples of action callbacks and content filters you can use to customize this service.</p>
                    <p>Add them to your <code>functions.php</code> or another plugin.</p>
                </div>
                <div>
                    <label for="hook-ex-5">WP Action Callback:
                    <input style="width:500px;" name="hook-ex[5]" id="hook-ex-5" class="code example" value="add_action('Cf73rdPartyIntegration_service_a5', array(&amp;$this, 'YOUR_CALLBACK'), 10, 2);" readonly="readonly">
                    <em class="description">used for post-processing on the callback results</em>
                </label></div>
                <div>
                    <label for="hook-exf-5">WP Input Filter:
                    <input style="width:500px;" name="hook-exf[5]" id="hook-exf-5" class="code example" value="add_filter('Cf73rdPartyIntegration_service_filter_post_5', array(&amp;$this, 'YOUR_FILTER'), 10, 4);" readonly="readonly">
                    <em class="description">used to alter static inputs (the CF7 field)</em>
                </label></div>

        </fieldset><!-- Hooks -->
        </section>

        <span class="button b-delete"><a href="#" class="b-del" rel="div.meta-box">Delete Service</a></span>

        </div>          
    </div>
    </div>

[jburcsik]

Unsure if this should be closed or left open for easier reference. I think it addresses a different issue then #25

[zaus]

I'll have to look at it again -- if there are no sections it should recreate at least one empty section.

I mentioned #25 only because it's talking about the same part of code -- definitely a different issue.

[zaus]

It should make at least one section if none exist here: https://github.com/zaus/forms-3rdparty-integration/blob/master/plugin-ui.php#L82

Also, I'm wondering if the problem is compounded/originating from a chrome extension -- I see one mentioned at the top of the screenshot you originally posted.

[zaus]

Aha -- I think I found it:

1. https://github.com/zaus/forms-3rdparty-integration/blob/master/forms-3rdparty-integration.php#L301
2. https://github.com/zaus/forms-3rdparty-integration/blob/master/plugin-ui.php#L28

I recently changed how the settings and services are saved, and so even though $options is null when saved (number 2) it gets converted to an empty array in number 1.

[zaus]

Probably resolved?