Hello,
I have this jQuery Ajax call which shows first level menu, on hover of any first level category i want to show second level category but its giving error, i think it's not fetching the first level category id on hover.
<script type="text/javascript">
$(document).ready(function () {
if (document.title == "Home") {
// Call your jQuery function here
loadMoreData();
}
});
$("#acategorybtnmenu").mouseenter(function () {
loadMoreData();
}).mouseleave(function () {
$("#dvfirstlevelcategory").empty(); // unload data by emptying the container element
});
function loadMoreData() {
$.ajax({
type: "POST",
url: "/WebMethods/GH_WebMethods.asmx/Category_FirsLevel",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var itemsHtml = "";
$.each(data.d, function (index, item) {
///FORMATED LIST VIEW
itemsHtml += '<div class="first-level-li">';
itemsHtml += '<a class="first-level-a" href="/' + item.urlpath + '/category">';
itemsHtml += '<span class="first-level-icon">';
itemsHtml += '<img src="' + item.icon + '" />';
itemsHtml += '</span>';
itemsHtml += item.category_name;
itemsHtml += '</a>';
itemsHtml += '</div>';
});
$('[id*=dvfirstlevelcategory]').append(itemsHtml);
// Add event listeners for the mouseenter event on each first level category element
$('[id*=dvfirstlevelcategory] .first-level-li').on('mouseenter', function () {
var categoryId = $(this).find('.first-level-a').data('category-id');
loadSecondLevelData(categoryId);
});
},
error: function (response) {
alert(response.responseText);
}
});
}
function loadSecondLevelData(categoryId) {
$.ajax({
type: "POST",
url: "/WebMethods/GH_WebMethods.asmx/Category_SecondLevel",
data: '{categoryId: "' + categoryId + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var itemsHtml = "";
$.each(data.d, function (index, item) {
itemsHtml += '<div class="second-level-li">';
itemsHtml += '<a class="second-level-a" href="/' + item.urlpath + '/category">';
itemsHtml += '<span class="second-level-icon">';
itemsHtml += '<img src="' + item.icon + '" />';
itemsHtml += '</span>';
itemsHtml += item.category_name;
itemsHtml += '</a>';
itemsHtml += '</div>';
});
var container = $('#dvsecondlevelcategory_' + categoryId);
container.empty().append(itemsHtml);
container.show();
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
<div id="dvfirstlevelcategory" class="first-level-ul"></div>
[WebMethod(EnableSession = true)]
public List<object> Category_FirsLevel()
{
Entities db = new Entities();
var q = (from cm in db.category_master
where cm.IsPublished == true && cm.parent_category_id == 0
select new
{
category_id = cm.category_id,
urlpath = cm.URLPath + "-" + cm.category_id,
icon = cm.Icon,
category_name = cm.category_name
});
return q.OrderBy(u => u.category_name).ToList<object>();
}
[WebMethod(EnableSession = true)]
public List<object> Category_SecondLevel(int categoryid)
{
Entities db = new Entities();
var q = (from cm in db.category_master
where cm.IsPublished == true && cm.parent_category_id == categoryid
select new
{
category_id = cm.category_id,
urlpath = cm.URLPath + "-" + cm.category_id,
icon = cm.Icon,
category_name = cm.category_name
});
return q.OrderBy(u => u.category_name).ToList<object>();
}