jQuery code repetition and MVC

A while ago I started working on a project, which does things mostly with jQuery and PHP. I had some problems with my structure and started using CodeIgniter which uses an MVC pattern. So the PHP part is all good now.

I am just a little worried about my jQuery code. It looks bloated and I feel like there is room for improvement. The problem is that the code is very simple and I don't know how to actually improve it.

My code looks like this:

```
$(function() {
var baseURL = "index.php/";

/
* Fill the list with all available objects
*/
$(document).ready(function() {
$.ajax({
type: "POST",
url: baseURL+"Objects/getList",
dataType: "json",
data: "",
cache: false,
success: function(data) {
$('#object-list').html();

var objects= "";
for (var i = 0; i " + data[i].name + "";
}

$('#object-list').html(options);
}
});
});

/
* Authenticate and login using a username and password
*/
$('#login').click(function(event) {
var username = $("#login-username").val();
var password = $("#login-password").val();

$.ajax({
type: "POST",
url: baseURL+"User/authenticateUser",
dataType: "json",
data: "username="+ username +"&password=" + password,
success: function(data) {
var success = data.result;

if (!success) {
$("#login-window-inner-message").html("The credentials provided were not found. Please try again.");
} else {
$('#login-window').remove();
LoadGame();
}
}
});
});

/
* R

You say you got a hundred of these? And possibly longer?

I suggest you invest on learning these tools:

-
A client-side MV* framework like Backbone. That way, your code will be modular and structured.

-
As for your UI, I suggest you go with Mustache for a logicless templating solution.

-
An automation tool like Grunt, which runs for you the most repetitive tasks like merging files, moving files unit tests etc.

I also suggest you watch this video from Nicholas Zakas regarding scalability and architecture. Though not all points will be applicable, at least you get the idea how to loosely couple your code.

As for the questions:


In an MVC environment, should the Ajax data part be in the url?

If you were to use MVC, that would be handled in the Models and Routers. Depending on the framework, some handle it for you. Just give them the proper routing and parameters, and you are good to go. No "low-level" code.


I will be splitting up the functions into different files an the production environment.

It's only in development that you actually split them so they make sense. In production, you actually merge and minify them. Check out jQuery. Their source is split into parts during development, but end up with a squished file during deployment.

The usual procedure (via Grunt tasks) is:

• jsbeautifier - Beautify code, so that the linter will be happy

• JShint - Checks for syntax errors, readability issues, possible break areas.

• Qunit - Unit testing for all your functions. to check if it works as expected.

• concat - Join all files into one. Lessens HTTP requests.

• minify - shrinks your concatenated scripts, to lessen download size.

And you end up with one power-packed nKB file (where n is the size of course).


The main problem I'm having with this is that it just looks like it's hanging loosely together, and doesn't fit my structured MVC environment/code.

I really suggest you invest your time in your toolset. I gave suggestions above based on experience and taste. There are other tools out there, like other MV* frameworks, other template engines. You might even want to learn SASS or LESS for CSS.

Although I encourage you to learn the tools, which will lead you to ultimately abandon your old code, here are a few tips though:

-
The index.php/ part of the url can be removed via url-rewriting on the server. As far as I know, there's a solution posted somewhere in the CodeIgniter forums, which can be searched. That way, your code will always start right after the first / of the domain.

-
The data parameter of $.ajax() can accept objects:

data: {
  username : username,
  password : password
}

-
These could be avoided using templating:

$("#login-window-inner-message").html("The credentials provided were not found. Please try again.");

StackExchange Code Review Q#26286, answer score: 3