I have an interesting use-case for Views here, but I'm stumped on one issue, and I think this particular piece of views could use some attention, so I'm posting it as a feature request.

The use case is this: I embed a view in a form. It is being used as a fancy Javascript replacement over a plain text field - a better way to select a value than simply "paste the ID into a box." It all works fine, except for one minor glitch - this setup should have exposed filters to narrow down the items in the selection box, and it should use AJAX so that the parent form is not affected. The mini-pager AJAX in this view works fine, but the exposed filters are broken.

What happens is I end up with a nested form - Views filter form inside the original form - the one I'm embedding the view in. For some reason, this breaks the AJAX. If I embed the same view on the same page, but outside the form, everything works as expected.

At first, I thought I just wanted to remove the <form> element from the filter form and re-parent it to my own form. Then I looked at js/ajax_views.js and I'm not so sure this will work. It has a selection like this: $('form#views-exposed-form-'...) ... so, it expects a <form> tag with a specific ID.

Any help working out a temporary solution to the above problem would be fantastic, but the actual feature request is this: provide a way to cleanly integrate the exposed filter form into another, pre-existing form.

By the way, you can see this embedded view in action to see this "selector" idea working (without the exposed filters of course ;) here: http://anticitizenone.net/damn/collections/1 Open the "Add assets" widget to see the embedded view. Not sure how long that link will be good for, but it should be up for at least another month or two.

Comments

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed

Since you're using javascript, the answer may be to *actually* render the view outside of the form and then use javascript to 'move' the view into the form. That seems tricky (as in, I'm not sure I know how to do it) but it would preserve things.

That said, I *have* (in Panels) used the exposed form as part of a larger form, and that works but it does mean it doesn't use Views' AJAX. This is actually fine in that case, but in your case probably not. This means you'd need to customize the AJAX solution.

dfletcher’s picture

dfletcher commented

Sure ok I thought about shuffling the DOM elements around - and doing it late so that views JS has had a chance to run first. It feels a bit "unclean" though.

If I spent some time on a patch that enabled a configurable form in views_plugin_exposed_form.render_exposed_form() and fixed up ajax_view.js to work with it, could this be a feature in Views 3 or in a future version?

Meantime, I'll try as you suggest and use JS to shuffle elements.

Thanks, merlinofchaos.

merlinofchaos’s picture

merlinofchaos commented

Well. Views 3 has pluggable exposed forms.

Theoretically you could create an exposed form plugin just for this purpose.

dfletcher’s picture

dfletcher commented

Right, but the trouble is that the JS wouldn't know anything about a custom plugin.

I thought about just making a plugin to make the form behave as I want, but that leaves me copying a big chunk of the Javascript.

Maybe what's needed is just to make the selector $('form#views-exposed-form-...') configurable - an optional argument to the attach function:

Drupal.behaviors.ViewsAjaxView.attach = function(selector) {
  ...
  if (typeof(selector) == 'undefined') {
    selector = 'form#views-exposed-form-' + settings.view_name.replace(/_/g, '-') + '-' + settings.view_display_id.replace(/_/g, '-');
  }
  $(selector).filter(':not(.views-processed)') ...
}

Then, I could actually just call that myself.

For now, perhaps a good clean solution is to - as you said - write an exposed_form plugin, and then just have a bunch of support JS.

dfletcher’s picture

dfletcher commented

Oh sorry - that section is actually inside an $.each(), not quite as simple as my sample code made out. Still, it would be nice having that section of code in a function that I could call from the outside.

dfletcher’s picture

dfletcher commented

Digging a bit deeper, it seems that the only real purpose of $('form#views-exposed-form-'...) is to find the submit button.

Could this code simply search for a submit button with a particular class or ID, instead of requiring the form tag itself to have a particular ID? I believe that would solve my problem entirely, the JS would not care what form the button is in.

Automatically closed -- issue fixed for 2 weeks with no activity.