Best approch for building link in JQuery with paramaters

Question

Hi,
Very new to JQuery and MVC and webdevelopment over all. I'm now trying to accomplish this and is asking for a bit of advise:

I'm basically trying to build a filter with 4 input elements, and 1 output.

I have 4 select (drop down) elements in my page. As soon as one of them is changed, I need to build a href and get the partial view with the return values.

My questionis now if I should try to build the href in the select element or if I can do it once in jquery, and don't have to have duplicated code. How would I accomplish this?

Answer 1

You can certainly do it once in jQuery in the modular way you're looking for. Something like:

$('select').bind('change',function(e){
    // Our select changed. Send it's selected option's value onwards...
    getView(this.options[this.selectedIndex].value);
});

And then, somewhere else:

function getView(url){
    $.ajax( url : '/your/url/' + url, success : function(){ }, error : function(){ });
}

Basically, store the URL pieces as values for the options in your dropdowns. Observe the change events and fire off the appropriate request. You can make this as modular as you want (I'd store the URL as a constant, make the whole thing a module, etc.) but this is a good starting point.

Answer 2

each dropdown should be class="FilterSelect" or something like that

when any of them change, it'll fire off a request to a URL that needs to be specified in a context available to all selects.

the following pseudo-code should give an idea:

$('.FilterSelect').change(function()
{
    var data = {} // you need to get the selected items of each dropdown somehow
    $.get($(this).parents('#FilterContainer').attr('href'), data, function(response)
    {
        $('#ContentArea').html(response);
    }
});

Just to note: you shouldn't build your URL in jQuery because client-side logic shouldn't be concerned with the rules required to build a URL that corresponds to the server-side routing.

.... & also to note: I don't know if this is even valid jQuery! .parents('#FilterContainer')