Html and Jquery (best practices)

Coders, welcome to our fancy hints.
This post is a fancy way to reduce the time spent on development.

When developing a site, the users can:

• Write simple JS and HTML pages
• Use some frameworks like Backbone.js, Angular.js etc..
• Place all their JS code in one page making a mess 😛

As for the frameworks, most of the ones used are MVC frameworks which help in the organization of the code in a good, readable, maintainable architecture.

However, the best practice mentioned below can be used with or without the frameworks mentioned above.

I call this dynamic html/js mapping or just fancy mapping 😉
I will start by showing you an example of the ordinary old way some developers still use.
Lets assume you have the following form element:

<form>
	<input type="text" id="nameInput" value="" />
</form>

The JS code used to set the elements value is:

<script type="text/javascript">
	$('#nameInput').val(returnedValue.name);
</script>

When the elements value needs to be saved in a variable for future usage, developers usually do this:

<script type="text/javascript">
	var value = $('#nameInput').val();
</script>

However, if you have a lot of controls/values, like 10+, it’s not fancy nor logical to use the above code for each attribute. Instead, you could use my dynamic way for setting and getting control elements.

Let’s consider we have the following form elements:

<form>
	<input type='hidden' id='idInput' 	value='' data-mapping='id'/>
	<input type='text' id='nameInput' 	value='' data-mapping='name'/>
	<input type='text' id='phoneInput' 	value='' data-mapping='phone'/>
	<input type='text' id='emailInput' 	value='' data-mapping='email'/>
	<input type='text' id='faxInput'    value='' data-mapping='fax'/>
	<input type='text' id='adresInput' 	value='' data-mapping='address'/>
</form>

Notice the new attribute named “mapping” which is added to each element and prefixed by “data-“.
The following JS code is used for setting the values of each element:

<script type="text/javascript">
	var mappings = $('[data-mapping]');
	var returnedValue = {
		id: 2,
		name: 'Hadi Taha',
		phone: '23423423',
		email: '[email protected]',
		fax: '',
		address: 'World'
	};
	for(var i = 0, len = mappings.length; i < len; i++)
	{
		var control = $(mappings[i]);
		var property = control.attr('data-mapping');
		control.val(returnedValue[property]);
	}
</script>

The above code will automatically set the values for all the input elements having the attribute ‘data-mapping’.

As for getting all the input values into one object, the following code is used:

<script type="text/javascript">
	var mappings = $('[data-mapping]');
	var returnedValue = {
	};
	for(var i = 0, len = mappings.length; i < len; i++)
	{
		var control = $(mappings[i]);
		var property = control.attr('data-mapping');
		var val = control.val();
		returnedValue[property] = val;
	}
	//the returned value will contain an object having the same properties as above
	//id, name, phone, email, fax, address
</script>

Stay tuned for a fancy library that supports the above 😉