1
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ 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 :) \$\endgroup\$ – Vogel612 Nov 26 '15 at 23:50
2
\$\begingroup\$

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)

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.