Question

I am trying to make an ajax request.
Now when I click on a option in my form there is no ajax request made. But I go to the right page.

My Jquery:

$(document).ready(function() {
    // send form ved klik paa listen
    $('option').click(function ()
    {
        var form=$(this).closest('form');
        $.ajax({
          type:'post',
          url:form.attr('action'),
          data:form.serialize(),
          success:function(msg){
            $('#formcontent').html(msg);
          }
        });
    });
});

$().ready(function() {
    $('#jump_nav_submit').hide();
});

$('#jump_nav').live('change', function() {
    window.location = "\/finder\/" + $(this).val();
});

How do I made the ajax request, so that it renders in the div with the ID formcontent and the URL is finder/whateverthevalueofthe option is.

I have tried to remove this:

$().ready(function() {
    $('#jump_nav_submit').hide();
});

$('#jump_nav').live('change', function() {
    window.location = "\/finder\/" + $(this).val();
});

But the ajax request is not working because the parameter are:
http://localhost:3000/finder/?id=16&utf8=%E2%9C%93

Instead of: http://localhost:3000/finder/1

Answer 1

The option element does not support a click event cross browser. It works in Fifrefox but not in ie, cant remember about chrome/safari.

Regardless to support all browsers you will have to do your ajax call in the select change event.

Your code snippet does not make it obvious what your trying to achieve in terms of an option click then a redirect on the select change event so hard to advise further.