Goldentp
Reputation: 197
Can anyone tell me why this Jquery isn't working?
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>
Upvotes: 0
Views: 109
Answers (1)
Mark Pieszak - Trilon.io
Reputation: 67211
'<div class = "pa-label" title = "' + PA.PA + '" PA_id="' + PA.PA + '" onlclick = "pa_click(this)">' + PA.PA
You 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:
$(document).on('click', '.pa-label', function (e) {
pa_click(this);
});
Upvotes: 4
Related Questions
- jquery why isn't this working?
- Why this jQuery script doesn't work?
- Why isn't my jQuery working?
- why doesnt this jquery work?
- why this jQuery does not work?
- Why this Jquery code does not run?
- Why I can't get this jquery code to work?
- Can someone tell me why this jQuery script does not work?
- Why is this jQuery code not working?
- Jquery. Why this doesn't work?