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