XF 2.2 Problems finding selector in ajax form submission

[Dannymh]

Hi all,

When I try to use an ajax submit and use the replace it with a selector elsewhere it returns an error "Could not find new selector '.theSelector'

The way I have structured this is similar to use something similar to the Demo notepad tool. I have a Macro that looks like

<xf:macro name="otb" arg-otb="!" arg-thread="!">
    <xf:js src="otb/otb.js"/>

        <xf:form action="{{ link('otb/save', $otb)}}"
                 class="block otb" ajax="1"
                 data-xf-init="bid-edit"
                 data-replace="#js-otbform with .js-bidders">

            <div class="block-container">
                <div class="block-body otb-main">
                    <div class="otb-header">
                        <h2>
                            Estimate
                        </h2>
                    </div>

                    <article class="otb-article">
                        <div id="js-otbform" class="js-otbform">
                            <xf:hiddenval name="thread_id">{$thread.thread_id}</xf:hiddenval>
                            <xf:textboxrow name="max_estimate" value="{$otb.max_stimate}" labe="estiamte"/>
                            <xf:submitrow submit="{{phrase('save')}}" fa="fa-gavel"/>
                        </div>
                    </article>
                </div>
            </div>  
        </xf:form>
</xf:macro>

<xf:macro name="otb" arg-otb="{$otb}" />

I then have another template which is my form again. What I want to do is that on submit of the form it replaces the inline form with the form in the template, kind of like the inserter when you press a link.

The other form looks like

    <xf:form action="{{ link('otb/save', $otb) }}" class="block" ajax="1">
        <div class="block-container">
            <div class="block-body">
                <div class="js-bidders">
                    <xf:hiddenval name="thread_id">{$thread.thread_id}</xf:hiddenval>
                    <xf:textboxrow name="max_estimate" value="{$otb.max_estimate}" label="Estimate"/>
                    <xf:submitrow submit="{{phrase('save')}}" fa="fa-gavel"/>
                </div>  
            </div>
        </div>
    </xf:form>

My JS is firing and appending the hidden field before submit so that it fires as AJAX. Then it pops up with an error saying
"No Cntent was returned"

and the console says
"Could Not find new selector '.js-bidders'"

I know that essentially its saying it can ot find the new div of js-bidders but I can't see how it differs in functionality to the say an edit link with "inserter" and replace

 

[Dannymh]

Ok so I have it firing correctly now, it looks like it was looking for a template that didn't exist. I now get it to return the form, fields from the second one but it seems to insert them all twice. Then when I click on the save button again it pops up the form in an overlay rather than just submitting it.

I will keep hacking away

 

[Dannymh]

Solved. Have it replacing in, noticed that it actually changes the display: none when replacing, so had to remove that through JS too