How to make prepOverlay works with createObject?

Question

In a template I would like to open an add form in a popup.

So, I've got a link :

<p class="visualClear">
    <a href="createObject?type_name=Contact" class="link-overlay" i18n:translate="">Add a contact</a>
</p>

And a javascript that make a prepOverlay :

(function($) {
jQuery(function($){
    // popin de plone
    $('a.link-overlay').prepOverlay({
        subtype: 'ajax',
        filter: common_content_filter,
        formselector: 'form[name=edit_form]',
        noform: 'reload',
        closeselector: '[name="form.button.cancel"]'
    }); 
});
})(jQuery);

The problem is that when I click on the link I've got a javascript error : TypeError: $(...).multiSelect is not a function and the popup form is not showing at all.

This error is due according to this post https://github.com/ehynds/jquery-ui-multiselect-widget/issues/267 it's because jquery is loaded twice.

This is maybe the cause here, because, when I click on the link, I've got a GET on http://localhost:8080/Plone/guide-paroissial/milieux-sociaux/acf-action-catholique-des-femmes/createObject?type_name=Contact&ajax_load=1398763930910

and then a redirect to : http://localhost:8080/Plone/guide-paroissial/milieux-sociaux/acf-action-catholique-des-femmes/portal_factory/Contact/contact.2014-04-29.9309424841/edit

So, how could I make this work ?

Answer 1

The problem was that keywordmultiselect.js is not loaded in the template.

To load it :

$.ajax({
    url: 'widgets/js/keywordmultiselect.js',
    dataType: "script"
});

The full code :

jQuery(function($){
    // popin de plone
    $(document).ready(function(){
        $.ajax({
            url: 'widgets/js/keywordmultiselect.js',
            dataType: "script"
        });
        $('a.link-overlay').prepOverlay({
            subtype: 'ajax',
            filter: common_content_filter,
            formselector: 'form[name=edit_form]',
            noform: function(el) {
                if ($.plonepopups.noformerrorshow(el, 'close') === 'close'){
                    $('input[name="form.button.Submit"]').click();
                    return 'close';
                }
            },
            closeselector: '[name="form.button.cancel"]'
        });
    });
});

Thanks to @Mathias and @SteveM for pointing me.

Answer 2

Well I tested your code on a vanilla plone site. I just changed the selector for prepoverlay to match the "add menu" and removed the second jquery scope definition.

jQuery(function($){
    // popin de plone
    $('.actionMenuContent a').prepOverlay({
        subtype: 'ajax',
        filter: common_content_filter,
        formselector: 'form[name=edit_form]',
        noform: 'reload',
        closeselector: '[name="form.button.cancel"]'
    });
});

Worked without any problems.

Otherwise I also get a TypeError.