I have written a jQuery function that is for a treeview that has 5 levels that you can click into to see the next level of data my last level that I was working on does not seem to be working at all. It seems to me that the jQuery is not even being called because usually it would at least open the tree with no data in it for a second if it was my controller. Below I have posted my jQuery for the level I am working on right now and all the levels above it for analysis. Any advice or help would be very much appreciated! Please let me know if you need the controllers as well.
Bottom Level jQuery This is the part not working(Does not even click)
//Spend Category function for monthly
pa_click = function (pa_label) {
PA_ID = pa_label.getAttribute('pa_id');
var pa_details = document.getElementById('pa-details-' + PA_ID);
alert('message');
jQuery.getJSON('@Url.Action("getAjaxSCs")', { PA: pa_label.title }, function (SCS) {
pa_details.innerHTML = "";
jQuery.each(SCS, function (index, SC) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="SC-' + SC.SPEND_CATEGORY + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
pa_details.innerHTML +=
alert('message');
'<div id ="Spend-Category-' + SC.SPEND_CATEGORY + '" class="sc-wrapper tree border">' +
'<div id ="sc-title-' + SC.SPEND_CATEGORY + '" class="sc-title">' +
'<div class = "sc-label" title = "' + SC.SPEND_CATEGORY + '" SC_id="' + SC.SPEND_CATEGORY + '" onclick = "sc_click(this)">' + SC.SPEND_CATEGORY + '</div>' +
months_html +
'</div>' +
'<div id="sc-details-' + SC.SPEND_CATEGORY + '" class = "pa-details" style = "display:none">' + SC.SPEND_CATEGORY + '</div>' +
'</div>';
})
});
jQuery('#pa-details-' + PA_ID).show('slide', { direction: 'up' }, 'fast');
};
The jQuery in its entirety
<script type="text/javascript">
jQuery(document).ready(function ($) {
var IA_ID = 0;
var months = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
// Major Program function for monthly
$(".ia-label").click(function () {
IA_ID = this.getAttribute('investment_area_id');
var ia_details = document.getElementById('ia-details-' + IA_ID);
jQuery.getJSON('@Url.Action("getAjaxMPs")', { IA: this.title }, function (MPS) {
ia_details.innerHTML = "";
jQuery.each(MPS, function (index, MP) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="MP-' + MP.MP_ID + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
ia_details.innerHTML +=
'<div id="MP-' + MP.MP_ID + '" class="mp-wrapper tree border">' +
'<div id="mp-title-' + MP.MP_ID + '" class="mp-title">' +
'<div class="mp-label" title="' + MP.MP_NAME + '" major_program_id="' + MP.MP_ID + '" onclick="mp_click(this)">' + MP.MP_NAME + '</div>' +
months_html +
'</div>' +
'<div id="mp-details-' + MP.MP_ID + '" class="mp-details" style="display:none">' + MP.MP_NAME + '</div>' +
'</div>';
})
});
jQuery('#ia-details-' + IA_ID).show('slide', { direction: 'up' }, 'fast');
});
//Sub Program function for monthly
mp_click = function (mp_label) {
MP_ID = mp_label.getAttribute('major_program_id');
var mp_details = document.getElementById('mp-details-' + MP_ID);
jQuery.getJSON('@Url.Action("getAjaxSPs")', { MP: mp_label.title }, function (SPS) {
mp_details.innerHTML = "";
jQuery.each(SPS, function (index, SP) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="SP-' + SP.SP_ID + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
mp_details.innerHTML +=
'<div id ="Sub-Program-' + SP.SP_ID + '" class="sp-wrapper tree border">' +
'<div id ="sp-title-' + SP.SP_ID + '" class="sp-title">' +
'<div class = "sp-label" title = "' + SP.SP_NAME + '" sub_program_id="' + SP.SP_ID + '" onclick="sp_click(this)">' + SP.SP_NAME + '</div>' +
months_html +
'</div>' +
'<div id="sp-details-' + SP.SP_ID + '" class = "mp-details" style = "display:none">' + SP.SP_NAME + '</div>' +
'</div>';
})
});
jQuery('#mp-details-' + MP_ID).show('slide', { direction: 'up' }, 'fast');
};
//PA function for monthly
sp_click = function (sp_label) {
SP_ID = sp_label.getAttribute('sub_program_id');
var sp_details = document.getElementById('sp-details-' + SP_ID);
jQuery.getJSON('@Url.Action("getAjaxPAs")', { SP: sp_label.title }, function (PAS) {
sp_details.innerHTML = "";
jQuery.each(PAS, function (index, PA) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="PA-' + PA.PA + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
sp_details.innerHTML +=
'<div id ="PA-' + PA.PA + '" class="sp-wrapper tree border">' +
'<div id ="pa-title-' + PA.PA + '" class="pa-title">' +
'<div class = "pa-label" title = "' + PA.PA + '" PA_id="' + PA.PA + '" onlclick = "pa_click(this)">' + PA.PA + '</div>' +
months_html +
'</div>' +
'<div id="pa-details-' + PA.PA + '" class = "sp-details" style = "display:none">' + PA.PA + '</div>' +
'</div>';
})
});
jQuery('#sp-details-' + SP_ID).show('slide', { direction: 'up' }, 'fast');
};
//Spend Category function for monthly
pa_click = function (pa_label) {
PA_ID = pa_label.getAttribute('pa_id');
var pa_details = document.getElementById('pa-details-' + PA_ID);
alert('message');
jQuery.getJSON('@Url.Action("getAjaxSCs")', { PA: pa_label.title }, function (SCS) {
pa_details.innerHTML = "";
jQuery.each(SCS, function (index, SC) {
months_html = '';
for (var i = 0; i < 12; i++) {
months_html +=
'<div id="SC-' + SC.SPEND_CATEGORY + '-' + months[i] + '" class="month-wrapper tree border-white">' +
months[i] +
'</div>';
}
pa_details.innerHTML +=
alert('message');
'<div id ="Spend-Category-' + SC.SPEND_CATEGORY + '" class="sc-wrapper tree border">' +
'<div id ="sc-title-' + SC.SPEND_CATEGORY + '" class="sc-title">' +
'<div class = "sc-label" title = "' + SC.SPEND_CATEGORY + '" SC_id="' + SC.SPEND_CATEGORY + '" onclick = "sc_click(this)">' + SC.SPEND_CATEGORY + '</div>' +
months_html +
'</div>' +
'<div id="sc-details-' + SC.SPEND_CATEGORY + '" class = "pa-details" style = "display:none">' + SC.SPEND_CATEGORY + '</div>' +
'</div>';
})
});
jQuery('#pa-details-' + PA_ID).show('slide', { direction: 'up' }, 'fast');
};
});
</script>
'<div class = "pa-label" title = "' + PA.PA + '" PA_id="' + PA.PA + '" onlclick = "pa_click(this)">' + PA.PAYou mispelled
onclick, that should fix it!On a side note: It is easier & better performance-wise to create a live DOM eventhandler for this type of situation. Adding so many onclick events (especially in IE, creates an insane amount of script events (that in the end are all the same) on each one of these items)!
Just do: