Autosubmit for exposed filters with JQuery
Last modified: September 30, 2008 - 13:14
Referring to this post http://drupal.org/node/306848 a javascript driven solution:
1) JQuery has to be called in the head of the page.
2) Then you paste this snippet
<script type="text/javascript">
$(document).ready(function()
{
$("form#foo select").change(function() {
$("form#foo").submit();
});
});
</script>"Foo" stands for the id of the surrounding form element ...
Example HTML:
<form id="views-exposed-form" method="get" accept-charset="UTF-8" action="/xx/xx">
<div class="views-exposed-form-div">
<div class="views-exposed-widget">
<select id="edit-tid-1" class="form-select" name="tid_1"><option selected="selected" value="All"><Alle></option></select>
</div>
<div class="views-exposed-widget">
<input type="submit" class="form-submit" value="Anwenden" id="edit-submit-3"/>
</div>
</div>
</form>Example Javascript for above HTML:
<script type="text/javascript">
$(document).ready(function()
{
$("form#views-exposed-form select").change(function() {
$("form#views-exposed-form").submit();
});
});
</script>This is the simplest example - other and more specific selector constructions are thinkable. Have a look at http://docs.jquery.com/Selectors.
What version of JQuery?
what version of JQuery does this require? I'm using the version that comes with drupal, and it does not work for me.
i'm sorry, because i forgot
i'm sorry, because i forgot to mention that i always use the newest version of jquery update.
maybe this solves the problem ...
This works great for me,
This works great for me, thanks!
But does anyone happen to know the best way to also HIDE the submit button at the same time? I'm sure I could do it with some separate JS, but it'd be nice to include it in the same function. I don't know anything about jQuery. :P
Thanks again.
try this (example): <script
try this (example):
<script type="text/javascript">$(document).ready(function()
{
$("form#views-filterblock #edit-submit").hide();
$("form#views-exposed-form select").change(function() {
$("form#views-exposed-form").submit();
});
});
</script>
i didn't test ...
It works like magic
Thanks !!
works, but
for me, it works once, the initial time I load the view, but if I choose a different option from the select dropdown, it does not work again unless I reload the page. Is there anyway for it to work each time?
Check out
Check out
did you found a solution?
@jdtart
did you found a solution? normally it should work on repeating selections too ...
momper, have you tried this?
momper, have you tried this?
I think I found the issue
I put this snippet in and had the same issue as jdtart. I resolved the issue by making sure that AJAX was not enabled on my view and that fixed it. Thanks for the code snippet!
Here's an easy way to add the
Here's an easy way to add the javascript to the header of the page - i'm doing it from a block, but it will work anywhere:
<?php
drupal_add_js('
$(document).ready(function()
{
$("form#foo select").change(function() {
$("form#foo").submit();
});
});
', 'inline');
?>