Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Liam Maclachlan
22,805 PointsCustom 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 :)
1 Answer
Marcus Parsons
15,719 PointsHey-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
22,805 PointsHey, 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
Marcus Parsons
15,719 PointsNotice 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
22,805 PointsHey 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
Marcus Parsons
15,719 PointsI see what you're saying. Nevermind about that then, scratch that idea! lol!
Liam Maclachlan
22,805 PointsDude. 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
Marcus Parsons
15,719 PointsAh, yes, because of the 0 indexing! That's like a duh moment for me! hahaha You're awesome, Liam!
Liam Maclachlan
22,805 PointsReally, 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
Marcus Parsons
15,719 PointsYep you're right. Keep it how you had it. :P
Marcus Parsons
15,719 PointsSpecifically check out the 1st example because both of those parameters are used
Liam Maclachlan
22,805 PointsDude. 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
Marcus Parsons
15,719 PointsHey 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
22,805 PointsAhh.. 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.
Marcus Parsons
15,719 PointsAhhh 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
22,805 PointsAh. 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)
Marcus Parsons
15,719 PointsNo, 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
22,805 PointsOh. 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)
Marcus Parsons
15,719 PointsIt'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
22,805 PointsTaking 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++
})
}
Marcus Parsons
15,719 PointsLooks good man!
Liam Maclachlan
22,805 PointsLiam Maclachlan
22,805 PointsMarcus Parsons. This is what I am currently working on. Give the JS a once over and let me know what you think.