Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Liam Maclachlan
Liam Maclachlan
22,805 Points

Custom wordpress application UI *Just sharing*

Hey guys. Thought I would share the UI for a custom wordpress plugin I am in the middle of developing. The Products section is not completed yet, so there are some definite bugs with that functionality.

Have a look over it and let me know what you think

Code pen here. I recommend going there instead :)

Liam Maclachlan
Liam Maclachlan
22,805 Points

Marcus Parsons. This is what I am currently working on. Give the JS a once over and let me know what you think.

1 Answer

Hey-O Liam! :D

I just did a quick glance over, and I did notice something. Inside of alterCategoryNums, you don't have to use an i variable like that. All you have to do is pass in the i argument to the function inside of your each loop, and it will automatically increase for each reference it encounters. You don't have to initialize it in the function and you don't have to perform a manual operation on it either! :)

function alterCategoryNums() {
    //instead put i here
    $('.lsm-category-box').each(function(i) {

        $( this ).find( '.label-title label' ).text( 'Category ' + i + ' Name')
        $( this ).find( '.label-title label' ).attr( 'id', 'category-name-' + i )
        $( this ).find( '.label-title label' ).attr( 'for', 'label-title-' + i )

        $( this ).find( '.category-input' ).attr( 'id', 'category-input-' + i )
        $( this ).find( '.category-input' ).attr( 'name', ' category-input-' + i )

        $( this ).find( '.category-textarea' ).attr( 'id', 'category-input-' + i )
        $( this ).find( '.category-textarea' ).attr( 'name', ' category-input-' + i )

        $( this ).find( '.label-description label' ).text( 'Category ' + i + ' Description')
        $( this ).find( '.label-description label' ).attr( 'id', 'category-description-' + i )

        $( this ).find( '.products-container' ).attr( 'id', 'products-container' + i )

        $( this ).find( '.category-remove-button' ).attr( 'value', i ) 

        $( this ).find( '.lsm-toggle-arrow' ).attr( 'value', i ) 

        $( this ).find( '.products-add-button' ).attr( 'value', i )

        $( this ).find( '.products-remove-button' ).attr( 'value', i )

        $( this ).find( 'table').attr( 'id', 'category-table-' + i )
        $( this ).attr( 'id', 'catagories-container-' + i )
        //I should have put comment here as well
        //but I removed i++ as it is no longer needed
    })
}
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey, dude. So do you mean to remove the 'var i = 1' and just place i in '$('.lsm-category-box').each(function(i)'?

EDIT: Just tried that and there was a problem when you remove the categories (not the final one) where they all the ordering goes out of whack

EDIT 2: When i is called in the var (with 'var i = 1'), all the catagories numbers fall back in to sync (1,2,3) not (1,3,5,6) for eg

Notice that I also removed the adding operation being done at the bottom lol Like I said, you don't have to initialize it and you don't have to have a manual operation on it. Remove the i++ from the bottom of the function, as well.

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man. I 've updated the code pen with your suggestion and I'm getting bad ju-ju from it 0_o

If I:

  • add 3 categories

  • remove the middle one

  • add two more categories

the result is (0,1,3) but with the way I had it oringinally, I would get (1,2,3)

Have a go and then copy mine back in and do the same test above

function alterCategoryNums() {
    var i = 1
    $('.lsm-category-box').each(function() {

        $( this ).find( '.label-title label' ).text( 'Category ' + i + ' Name')
        $( this ).find( '.label-title label' ).attr( 'id', 'category-name-' + i )
        $( this ).find( '.label-title label' ).attr( 'for', 'label-title-' + i )

        $( this ).find( '.category-input' ).attr( 'id', 'category-input-' + i )
        $( this ).find( '.category-input' ).attr( 'name', ' category-input-' + i )

        $( this ).find( '.category-textarea' ).attr( 'id', 'category-input-' + i )
        $( this ).find( '.category-textarea' ).attr( 'name', ' category-input-' + i )

        $( this ).find( '.label-description label' ).text( 'Category ' + i + ' Description')
        $( this ).find( '.label-description label' ).attr( 'id', 'category-description-' + i )

        $( this ).find( '.products-container' ).attr( 'id', 'products-container' + i )

        $( this ).find( '.category-remove-button' ).attr( 'value', i ) 

        $( this ).find( '.lsm-toggle-arrow' ).attr( 'value', i ) 

        $( this ).find( '.products-add-button' ).attr( 'value', i )

        $( this ).find( '.products-remove-button' ).attr( 'value', i )

        $( this ).find( 'table').attr( 'id', 'category-table-' + i )
        $( this ).attr( 'id', 'catagories-container-' + i )

        i++
    })
}

EDIT: I think the way I am doing it at the moment forces i to 1 at the start of each loop. Your alternative seems to be storing the count of i in the addCategories function. I'm thinking that I might be doing it wrong and your way is working =p

EDIT 2: YES! YOur way did work =p I just need to ammend another area in my code to match the change =p

I see what you're saying. Nevermind about that then, scratch that idea! lol!

Liam Maclachlan
Liam Maclachlan
22,805 Points

Dude. You were right. I just need to change it where i is used in this function to, (i + 1) when it is called, except when it is passed in to the function =p

EDIT: Yup. Just passed in i++ at the start of the loop. Works like a charm. Jut being a dunce =p

Ah, yes, because of the 0 indexing! That's like a duh moment for me! hahaha You're awesome, Liam!

Liam Maclachlan
Liam Maclachlan
22,805 Points

Really, it's easier just to call i++ after the function has started... otherwise I have a lot of ( i + 1)'s to add... and I don't feel like leg work =p

Yep you're right. Keep it how you had it. :P

Specifically check out the 1st example because both of those parameters are used

Liam Maclachlan
Liam Maclachlan
22,805 Points

Dude. second itteration... too many variables?

http://codepen.io/Limey_88/pen/eNRbYv

The ammendUniqueSelectors function is needed as all of this informatino will eventually be parsed to a database. Numeric ordering was must 0_o

Hey man, I am seeing at least one command that is repeated within that ammendProductSelectors function. You can make that function much faster by chaining together your commands for the same selectors. I saw that there were a few times that you were using the same find method and then changing a different attribute. If you're using the same find method to find the same elements, you can chain commands together so that you don't have to run find multiple times.

function ammendProductSelectors() { //Known bugs = 0 (1 resolved);
    // text input/area lables are not lining up on adding a new product. (need to add rule for the id's and for's in to the function)
   // SOLVED. All updated
    var b = 1
    $( '.' + productsInnerContainerClass ).each(function() {
        // change textarea ID to march and name
        $( this ).find( '.' + productsTextareaClass ).attr( 'id', productsTextareaID + b ).attr( 'name', productsTextareaID + b )
        //change for and id
        $( this ).find( '.' + productsLabelDescriptionClass ).attr( 'for', productsTextareaID + b ).attr( 'id', productsLabelDescriptionID + b) 
        // updates the remove button value to match the new product position
        $( this ).find( '.' + removeProductButtonClass ).attr( 'value', b )
        // updates the name of the product iput and textarea fields so it can be parsed to the database
        $( this ).find( '.' + productsLabelTitleClass ).attr( 'for', productsTitleID + b)
        //change id and name
        $( this ).find( '.' + productsTitleClass ).attr( 'id', productsTitleID + b ).attr( 'name', productsTitleID + b )
        // alters unique selector
        $( this ).attr( 'id', productsInnerContainerID + b )
        b++
    })
}
Liam Maclachlan
Liam Maclachlan
22,805 Points

Ahh.. you spotted my dileberate mistake... ahem

function ammendProductSelectors() { // Known bugs = 0 (1 removed);
    // text input/area lables are not lining up on adding a new product. (need to add rule fr the id's and for's in to the function)
    // SOLVED: Added relevant information to the unique slectors function
    var b = 1
    $( '.' + productsInnerContainerClass ).each(function() {

        // updates the name of the product iput and textarea fields so it can be parsed to the database
        $( this ).find( '.' + productsLabelTitleClass ).attr( 'for', productsTitleID + b)

        $( this ).find( '.' + productsTitleClass ).attr( {
            id: productsTitleID + b,
            name: productsTitleID + b
        } )

        $( this ).find( '.' + productsTextareaClass ).attr({
            name: productsTextareaID + b,
            id: productsTextareaID + b 
        })

        $( this ).find( '.' + productsLabelDescriptionClass ).attr( {
            id: productsLabelDescriptionID + b,
            for: productsTextareaID + b
        })

        // updates the remove button value to match the new product position
        $( this ).find( '.' + removeProductButtonClass ).attr( 'value', b )

        // alters unique selector for inned container
        $( this ).attr( 'id', productsInnerContainerID + b )

        b++
    })
}

I meant to update that to this a while ago. I don't know if the speed is any quicker, but I find the array option more readable and maintainable.

Ahhh yes the deliberate mistake :P It might not look quicker to the naked eye, but I can guarantee it is operationally quicker. Not having to run find multiple times definitely saves a few milliseconds lol In an app like this it doesn't make a difference, but if you were building something like a robot it would make a difference! lol

Liam Maclachlan
Liam Maclachlan
22,805 Points

Ah. Wait. Do you mean running multiple attr functions or running one and passing in the ammendmants via an array?

like this:

$( this ).find( '.' + productsTitleClass ).attr( {
            id: productsTitleID + b,
            name: productsTitleID + b
        } )

rather than:

$( this ).find( '.' + productsTitleClass ).attr( 'id', productsTitleID + b )attr('name', productsTitleID + b)

No, you had the find function running multiple times for the same selector which has to traverse through elements to find the elements you want to select.

Liam Maclachlan
Liam Maclachlan
22,805 Points

Oh. Okay. So does it really matter if I insert them in an array in one '.attr()' funciton, or is it better/no difference to run multiple '.attr()' functions?

edit: wow this thread has gotten long 0_o (I have deleted one of my accidental answer posts)

It's probably faster to push them in as an object instead of running multiple attr methods. I'd say you did the right thing there, Liam! Heck yea!!!!

Liam Maclachlan
Liam Maclachlan
22,805 Points

Taking on your advice on the '.find()' side of things, I'm also now altering the same issue in the alterCategorySelectors() function, too :P

current code

function alterCategorySelectors() { //Known bugs = 0;
    var i = 1
    $( '.' + categoryBoxClass ).each(function() {

        $( this ).find( '.' + mainCategoryTitleClass ).text('Category ' + i)

        $( this ).find( '.' + labelTitleClass ).text( 'Category ' + i + ' Name')
        $( this ).find( '.' + labelTitleClass ).attr( 'id', labelTitleID + i )
        $( this ).find( '.' + labelTitleClass ).attr( 'for', categoryNameID + i )

        $( this ).find( '.' + categoryNameClass ).attr( 'id', categoryNameID + i )
        $( this ).find( '.' + categoryNameClass ).attr( 'name', categoryNameID + i )

        $( this ).find( '.' + categoryTextareaClass ).attr( 'id', categoryTextareaID + i )
        $( this ).find( '.' + categoryTextareaClass ).attr( 'name', categoryTextareaID  + i )

        $( this ).find( '.' + labelDescriptionClass ).text( 'Category ' + i + ' Description')
        $( this ).find( '.' + labelDescriptionClass ).attr( 'id', categoryDescriptionID + i )

        $( this ).find( '.' + productsContainerClass ).attr( 'id', productsContainerID + i )

        $( this ).find( '.' + categoryRemoveButtonClass ).attr( 'value', i ) 

        $( this ).find( '.toggle-arrow-category' ).attr( 'value', i ) 

        $( this ).find( '.' + addProductsButtonClass ).attr( 'value', i )

        $( this ).find( '.' + productsRemoveButtonClass ).attr( 'value', i )

        $( this ).find( '.' + tableClass ).attr( 'id', categoriesTableID + i )

        $( this ).attr( 'id', catagoriesContainerID + i )

        i++
    })
}

EDIT:

new code

function alterCategorySelectors() { //Known bugs = 0;
    var i = 1
    $( '.' + categoryBoxClass ).each(function() {

        $( this ).find( '.' + mainCategoryTitleClass ).text('Category ' + i)

        $( this ).find( '.' + labelTitleClass ).text( 'Category ' + i + ' Name').attr( {
            id: labelTitleID + i,
            for: categoryNameID + i 
        } )

        $( this ).find( '.' + categoryNameClass ).attr( {
            id: categoryNameID + i, 
            name: categoryNameID + i 
        } )

        $( this ).find( '.' + categoryTextareaClass ).attr( {
            id: categoryTextareaID + i,
            name: categoryTextareaID  + i
        } )

        $( this ).find( '.' + labelDescriptionClass ).text( 'Category ' + i + ' Description').attr( 'id', categoryDescriptionID + i )

        $( this ).find( '.' + productsContainerClass ).attr( 'id', productsContainerID + i )

        $( this ).find( '.' + categoryRemoveButtonClass ).attr( 'value', i ) 

        $( this ).find( '.toggle-arrow-category' ).attr( 'value', i ) 

        $( this ).find( '.' + addProductsButtonClass ).attr( 'value', i )

        $( this ).find( '.' + productsRemoveButtonClass ).attr( 'value', i )

        $( this ).find( '.' + tableClass ).attr( 'id', categoriesTableID + i )

        $( this ).attr( 'id', catagoriesContainerID + i )

        i++
    })
}

Looks good man!