# Choosing and using an editor for some products

This is quite final code of a script. It looks to me a little messy ad repetitive.
What can I do to improve it?

jQuery(function($) { 'use strict'; /* * This Object calls a editor based * on the choice of a radio input */ var wiz_ajax = { callUrl : setup.ajax_url, post : Object, // it holds the Current ID of the product active prodID : '', productItem : '', // it holds html of the form loaded by ajax. formData : '', fieldsData : '', returnedEditorData : '', productHTML : '', prodImg : '', init: function() { this.wizForm =$('#wiz-config');

this.formDocument =         $('form'); this.wizDocument =$(document);
// pre select where is the initial form
this.productOptDom =    $('#mi-slider'); // pre select where is the editor form this.editorFormDom =$('#custom-section #submitBtn');
// pre select where is the editor form
this.productSelectDom =     $('#cat_opt'); this.EditorFieldsDom =$('#custom-section input,  #custom-section textarea, #custom-section select');

this.onAjax();
this.onFormChange();
this.onEditorUpdate();
this.onProductSelect();
this.editorUpdateOnKeyup();

},

// invoked when the first form is changed
onAjax: function() {
this.wizDocument.ajaxSuccess(this.formUpdater);
this.wizDocument.ajaxSuccess(this.serialize);
},

// invoked when the first form is changed
test: function() {
wiz_ajax.formDocument.live('change', this.serialize);
},

// invoked when the first form is changed
onFormChange: function() {
this.productOptDom.live('change', this.afterFormChange);
},
// invoked when the editor form is changed
onEditorUpdate: function() {
this.editorFormDom.live('click', this.afterEditorComplete);
},
// invoked when the product is selected
onProductSelect: function() {
this.productSelectDom.live('change', this.afterProductSelect);
},

editorUpdateOnKeyup: function(){
this.EditorFieldsDom.live('keyup', this.setFields);
wiz_ajax.formDocument.live('change', this.serialize);
},
editorUpdateOnChange: function (){
},

formUpdater: function() {
$('#custom-section input, #custom-section textarea, #custom-section select').each(function() { if (this.id === 'wizard_background') {$('.' + this.id + '_text').attr('src', this.value);
} else {
$('.' + this.id + '_text').html(this.value); } }); }, serialize: function () { wiz_ajax.post =$( 'form' ).serialize();
},

afterFormChange: function() {
$("#mi-slider :checked").each(function() { wiz_ajax.prodID =$(this).attr('value');
$.when( wiz_ajax.setForm(), wiz_ajax.getFields(), wiz_ajax.updateProductImage() ) .then( function() {$("#custom-section .x-content").html( wiz_ajax.formData );
$("#stage").html( wiz_ajax.fieldsData );$("#stage").addClass( 'p-' + wiz_ajax.prodID);
$("#stage .stage_bg").css('background-image', 'url(' + wiz_ajax.prodImg + ')'); } ); }); }, afterEditorComplete: function(event) { event.preventDefault();$.when( wiz_ajax.getProduct()).then( function() { $("#product-section .x-content").html( wiz_ajax.productHTML ); } ); }, afterProductSelect: function () {$("#cat_opt input:checked").each(function() {

wiz_ajax.productItem = $(this).attr('value');$.when( wiz_ajax.getProduct() ).then( function() { $('#product-editor #stage').html( wiz_ajax.productHTML ); } ); }); }, setFields: function () {$(this).each(function() {
if (this.id === 'wizard_background') {
$('.' + this.id + '_text').attr('src', this.value); } else {$('.' + this.id + '_text').html(this.value);
}
});
},

/*
* Get the right form based on: 'wiz_ajax.prodID'
*
*/
setForm : function(){
return $.ajax({ url: wiz_ajax.callUrl, method: 'POST', data: { 'action' : 'wiz_get_form', 'selection' : wiz_ajax.prodID }, success: function(data) { wiz_ajax.formData = data;$.scrollTo(250, 2500, {easing:'swing'});

},

});
},

getFields : function(){
return $.ajax({ url: wiz_ajax.callUrl, data: { 'action' : 'wiz_get_fields', 'selection' : wiz_ajax.prodID }, success: function(data) { wiz_ajax.fieldsData = data; }, }); }, getCat : function(){ return$.ajax({
url: wiz_ajax.callUrl,
data: {
'cat'   : wiz_ajax.prodID
},
success: function(data) {
wiz_ajax.returnedEditorData =  data;
},

});
},

getProduct : function(){

return $.ajax({ url: wiz_ajax.callUrl, data: { 'action': 'wiz_getsingle_product', 'selection': wiz_ajax.prodID, 'dataForm': wiz_ajax.post, }, success: function(data) { wiz_ajax.productHTML = data;$('#product-editor #stage').html(wiz_ajax.productHTML);

},

});
},
updateProductImage: function (){
return $.ajax({ url: wiz_ajax.callUrl, data: { 'action': 'wiz_get_image_editor', 'prodID': wiz_ajax.prodID }, success: function(data) { wiz_ajax.prodImg = data;$('#product-editor #stage').html(wiz_ajax.productHTML);

},

});
},

};

wiz_ajax.init();

});


Especially in the final part, the functions are similar, I think there is a better way to organize and refactor this code.

• Hello there and Welcome to CodeReview. To give users a better idea what your question is about without reading through it, I edited the title to what it is now. Also I tried to fix what I think is an error from copy-pasting your code. If the new title doesn't summarize what your code does, please do change it to something more descriptive :) – Vogel612 Nov 26 '15 at 23:50

A few style-notes that jump me here:

1. Whitespace:
Your code includes a copious amount of newlines. IMO it's too many newlines to be useful, rather than that they make it harder to follow the code. I'd rather use less empty lines.

2. Whitespace: Your code is all over the place. There's no proper aligning of operators you have. Compare:

        this.wizForm =      $('#wiz-config'); this.formDocument =$('form');
this.wizDocument =      $(document); // pre select where is the initial form this.productOptDom =$('#mi-slider');


to something where I removed the excess whitespace:

    this.wizForm = $('#wiz-config'); this.formDocument =$('form');
this.wizDocument = $(document); this.productOptDom =$('#mi-slider');


This is much more compact and readable. Also I dropped the comment you had in there. I found it rather unhelpful in reading the code

    // invoked when the product is selected