Choosing and using an editor for some products

Question

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: {
 'action' : 'wiz_load_cat_posts',
 '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.

• Vogel612: 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 :)

Answer 1

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

3. Comments:
   Your comments restate what the code says:

    // invoked when the product is selected
    onProductSelect: function() {
   

   The comment here is completely useless, because it provides no additional information. You should remove it (and at a quick glance almost all other comments, too)