jquerypopupplonejquery-tools

How to make prepOverlay works with createObject?


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 ?


Solution

  • 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.