Be as harsh as you can! I'm trying to improve my coding style and would like to know if there is anything I could improve.
EDIT: To make this fair, The person who provides the most helpful tips (both in quantity and quality) will get marked as the answer
The code below is the JavaScript file for a CMS application I'm creating:
When the application is complete it will be Open Source for anyone to use.. I'll keep you guys updated if you're interested in trying it out
$(function () {
loadPage(htmlLandingPage, currentSiteName) //added on by previous page
$("#dashBody").css('top', $("#topDash").outerHeight());
$("#dashBody").hide()
$('#dashBody').load(function () {
iFrameContents.find("head").append($("<link/>",
{
rel: "stylesheet",
href: "/cmsCSS/loadedPageCSS.css"
}
));
$(window).on("scroll", function () {
iFrameContents.find("HTML,body").scrollTop($(window).scrollTop());
});
iFrameContents.on("click", ".cmsEdit", function (e) {
e.stopPropagation();
selectedElem = $(this)
if (e.ctrlKey) {
e.preventDefault();
if (!$(e.target).is('.inEdit *') && !$(e.target).hasClass('inEdit')) {
clearEditSection()
}
if (!$(this).hasClass("inEdit")) {
$.when(checkOutStatus(selectedElem.prop("id"))).done(function (result) {
if (!result.d) {
checkOutSection(selectedElem.prop("id"))
selectedElem.addClass("inEdit")
selectedElem.prepend($("<div class='cmsEditBox'/>"));
for (i = 0; i < editBoxButtons.length; i++) {
$("<button/>", {
html: editBoxButtons[i],
addClass: "editButtons",
click: function () { editButtonAction(this, selectedElem) }
}).appendTo(selectedElem.children(".cmsEditBox"))
}
selectedElem.children(".cmsEditBox").css('top', (selectedElem.children(".cmsEditBox").height() * -1) - 10)
selectedElem.children(".cmsEditBox").css('left', ((selectedElem.children(".cmsEditBox").width() / 8) * -1))
selectedElem.children(".cmsEditBox").prop('contenteditable', false)
selectedElem.prop('contenteditable', true)
currentSectionHTML = selectedElem.clone().children(".cmsEditBox").remove().end().html();
} else {
$.when($(".loadProgress").fadeOut(100)).done(function () {
alert("Section Currently Checked Out")
});
}
});
}
}
});
iFrameContents.find('*').on("click", function (e) {
if ($(".inEdit").length > 0) {
e.stopPropagation();
}
if (!e.ctrlKey) {
if (!$(e.target).is('.inEdit *') && !$(e.target).hasClass('inEdit')) {
clearEditSection()
}
}
});
currentPageID = iFrameContents.find("body").prop("id")
if (!currentPageID) {
$("<div/>", {
addClass: "loadProgress",
html: $("<span/>", { addClass: "loadingText", html: "Missing<br/>Body<br/>ID" })
}).appendTo("#topDash").hide().fadeIn();
return false
}
checkDBforPage(currentPageID, currentSiteName)
});
});
function editButtonAction(btnText, selectedElem) { // Add Button Functions Here
buttonText = $(btnText).text()
if (buttonText == "SAVE") {
saveSection(selectedElem.prop("id"), selectedElem.clone().children(".cmsEditBox").remove().end().html())
}
if (buttonText == "CANCEL CHANGE") {
selectedElem.html(currentSectionHTML)
}
if (buttonText == "REVERT TO ORIGINAL") {
revertSection(selectedElem,selectedElem.prop("id"), selectedElem.clone().children(".cmsEditBox").remove().end().html())
}
if (buttonText == "SUBMIT CHANGE") {
submitSection(selectedElem, selectedElem.prop("id"), selectedElem.clone().children(".cmsEditBox").remove().end().html())
}
}
function checkPageSectionsInDB(pageID) {
$.ajax({
type: "POST",
url: "default.aspx/checkPageSections",
data: "{'pageID': " + JSON.stringify(pageID) + ",'sitePageID': " + JSON.stringify(sitePageID) + ",'siteContent': " + JSON.stringify(editableSections) + "}",
contentType: "application/json; charset=utf-8",
beforeSend: function () {
$(".loadingText").html("Analyzing <br/> Sections<br/> In DB")
},
dataType: "json",
success: function (data) {
$(".loadingText").html("Done!")
$(".loadProgress").fadeOut();
},
error: function (request, status, errorThrown) {
$(".loadingText").html("Error <br/> Checking<br/> Sections")
}
});
}
function saveSection(sectionID,sectionContent) {
$.ajax({
type: "POST",
url: "default.aspx/saveSection",
data: "{'sectionID': " + JSON.stringify(sectionID) + ",'personID': " + JSON.stringify(personID) + ",'sitePageID': " + JSON.stringify(sitePageID) + ",'sectionContent': " + JSON.stringify(sectionContent) + "}",
contentType: "application/json; charset=utf-8",
beforeSend: function () {
$(".loadProgress").fadeIn();
$(".loadingText").html("Saving..")
},
dataType: "json",
success: function (data) {
$(".loadProgress").fadeOut()
},
error: function (request, status, errorThrown) {
$(".loadingText").html("Error<br/>Saving")
return false
}
});
}
function revertSection(sectionSelected,sectionID, sectionContent) {
$.ajax({
type: "POST",
url: "default.aspx/revertSection",
data: "{'sectionID': " + JSON.stringify(sectionID) + ",'personID': " + JSON.stringify(personID) + ",'sitePageID': " + JSON.stringify(sitePageID) + ",'sectionContent': " + JSON.stringify(sectionContent) + "}",
contentType: "application/json; charset=utf-8",
beforeSend: function () {
$(".loadProgress").fadeIn();
$(".loadingText").html("Reverting..")
},
dataType: "json",
success: function (data) {
sectionSelected.removeClass("inEdit")
sectionSelected.prop("contentEditable",false)
sectionSelected.html(data.d)
$(".loadProgress").fadeOut();
},
error: function (request, status, errorThrown) {
$(".loadingText").html("Error<br/>reverting")
return false
}
});
}
$("#dashBody")
and$("#topDash")
, rather than keep searching the DOM every time you want to reference them. \$\endgroup\$