ansaurus

Question

trying to reuse javascript code by moving it from view to js file

Answer 1

A:

$(".dependencyAddButton").click(function() {
    var tblID = $(this).prev("table").attr("id");
    var lastRow = GetLastRow(tblID);
    var existingItems = GetExistingItems('#' + tblID);

This is static code. It is a good candidate to go in an external .js file, which can be fetched just once and then cached after that.

<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>

This is not static code, it's page-related data. It's not really a good candidate to go in an external .js file. It might change. It's much easier to keep that inline in the page itself.

Sure, you can kick it out to an external file if you want to: as Pekka said, by serving .js through ASP, or (easier) by just pointing the script tags at a .aspx URL. But what do you gain by doing that? It's not going to get cached, so that's extra HTTP requests to do, with the associated latency. You can fix that by manually managing the cacheing headers, but that's not really so trivial to pull off properly, and do you even know how long it should be cached before expiring anyway?

For reducing duplication at your end you can of course put this kind of ‘output data used by every page’ code in some kind of shared functionality on the server-side such as master pages or user controls.

bobince 2010-01-18 01:44:35

thanks for the response. So my question is if you want to inject dynamic data into a javascript function do you have to keep the whole function inside the view. how would i seperate the "pure" javascript and have it still get the dynamic data for the view

ooo 2010-01-18 01:46:19

Simplest way is to write a global variable that's later read inside the function. You can get fancy with namespacing or closures to prevent the variable actually being a global if you really want to, but it amounts to more or less the same thing.

bobince 2010-01-18 01:53:05

but wouldn't that be the javascript calling back into another js function in the inline view file . . does that work ?

ooo 2010-01-18 03:52:26

If you run them in the right order, yes. I'm not sure what `ShowArray` is actually doing, whether it's writing `var components= [1, 2, 3];` or eg. calling something like `setupAddButton([1, 2, 3]);`. Either way would work, but would change the neccesary inclusion order.

bobince 2010-01-18 12:08:53

show array is simply generating var components= [1, 2, 3]. how would the code look to call back into an inline array function

ooo 2010-01-29 11:46:18

An array function? I've lost you now. It's really not complicated: include the script file first with something like `function setupAddButton(components) { $(".dependencyAddButton").click(function() { ... all that onclick stuff ... }; }`, and then either `onready` or inline in the page somewhere after the addButton and table concerned, change `ShowArray` to write out `setupAddButton([1, 2, 3]);`.

bobince 2010-01-29 12:17:32

Answer 2

A:

I would recommend replacing the <%= %> script with it's equivalent JavaScript. Since you are using jQuery, I would turn this short script into a jQuery plugin. This is very easy to do, and basically just adds a wrapper around your current code. You will then be able to do something like.

$(".dependencyAddButton").AddClick();

rcravens 2010-02-03 14:25:07

Answer 3

+1 A:

What you want to do is create a jQuery plugin from your script and pass all server-side information into the plugin as a parameter. Using your example, you would have the following plugin defined in an external file:

jQuery.fn.dropdown = function(array) {
    var tableId = $(this).prev('table').attr('id');
    var lastRow = GetLastRow(tblId);
    var existingItems = GetExistingItems('#' + tblId);
    var dropDownItems = array;
    // DO STUFF WITH THE ARRAY
};

You would then call it from your view:

$('.dependencyAddButton').dropdown(<%= myHTMLhelper.ShowArray(Model.AllApplications, "components", "componentIds") %>);

This is a pretty common technique that you will find used whenever dynamic information is required. It might be a URL or some other configuration property.

Please note that this was a jQuery plugin written off the top of my head. It doesn't necessarily follow current best practices for writing plugins; it might not even work. It is simply an example of the technique that you can use to handle issues like you were having. Take a look at one of the following links for more information on writing jQuery plugins:

Brad Gignac 2010-02-03 14:52:02

ansaurus

tags:

views:

answers:

trying to reuse javascript code by moving it from view to js file

related questions