We Keep Coding

how to pass ID value onclick function from anchor tag by click on image using MVC?

Based on the database value status will be Y or N. If it Y means it will active.png will be displayed. it is working fine. when i click active.png image then anchor tag onclick="GetRecords1(' + item.ModuleID + '); Function the ID value is not passed to the event.
How to pass the active.png image click the ID value.
<script>
$(document).ready(function () {
$("#DomainID").change(function () {
var id = $(this).val();
$("#example tbody tr").remove();
$.ajax({
type: 'POST',
url: '#Url.Action("ViewModules")',
dataType: 'json',
data: { id: id },
success: function (data) {
var items = '';
$.each(data.EmpList, function (i, item) {
$("#findValue").show();
/*Find Role here - Comparing Emp List ModuleId to RoleList ModuleId*/
var RoleName = $(data.role).filter(function (index, item) {
return item.ModuleID == item.ModuleID
});
if (item.ParentModuleID == -1) {
item.ModuleName = " -- " + item.ModuleName
} else {
item.ModuleName = item.ModuleName
}
var Status = '';
if (item.Status == "Y") {
Status = '<img src="/img/Active.png" height="22" width="42"/>'
} else {
Status = '<img src="/img/InActive.png" height="22" width="42"/>'
}
var rows = "<tr>"
+ "<td>" + (i + 1) + "</td>"
+ "<td>" + item.ModuleName + "</td>"
+ "<td>" + item.Url + "</td>"
+ "<td>" + RoleName[i].RoleName + "</td>"
+ "<td>" + ' ' + Status + "</td>"
+ "</tr>";
$('#example tbody').append(rows);
});
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
alert("ExceptionType: " + r.ExceptionType);
}
});
return false;
});
});
</script>
Pass:
<script>
$(document).ready(function () {
$('#example tbody').on('click', function GetRecords1(ModuleID) {
var id = ModuleID;
alert("Status Clicked:" + ModuleID);
});
});
</script>

<a id="123" onclick="someFunction(this.id)"></a>
JavaScript code:
someFunction(id) {
console.log(id)
}

Why are you using in-line JavaScript? You could easily use event delegate on to bind click events.
Here is your modified code:
Status = '<img src="/img/Active.png" height="22" width="42"/>'
Added a class user-status to a tag and assigned id to data-id attribute.
Now get id from click event:
$(document).on('click','.user-status', function(){
var getId = $(this).data('id');
var getStatus = $(this).data('status');
alert("Status Clicked:" + getId );
});

How to select single element value which created dynamically in html using jQuery / Javascript?

I have a scenario like this:
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
i created dynamic elements using jade template engine.
here i need to identify each <a> click and i nedd to get the value of hidden field.
function toast() {
var grade;
//var phone_number=document.getElementById('phone_number').value;
$.each($('.phone_number'), function () {
grade = $(this).val();
alert(grade);
});
}
by doing this i got a loop of value. which i didn't want. i need single item value. how to solve this ?

pass this to the toast
'<a href="javascript:toast(this);">' +
and change the toast method to
function toast( thisObj )
{
var grade = $( thisObj ).parent().find( '.phone_number[type="hidden"]' ).attr( "value" );
alert( grade );
}

notifications = $(".notifications")
active = [{ phone_number: "982334",expiry_count: "1"},
{ phone_number: "982334",expiry_count: "1"}]
var k;
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notifications"></div>
Its simple.Try this
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})

Send the toast function the k you are iterating over
'<a href="javascript:toast(' + k + ');">'
then use k in your function
function toast(k) {
//use k (maybe select by id)
}

How to append all the elements at once to create a drop down in jQuery

I'm creating a drop down with three sub menus, so a main dropdown with publishers, a sub menu with authors (which are within that publisher) and a sub menu to authors containing the years they've been published. So hover over publisher, see authors in that publisher.
It worked fine but i've changed it to improve performance so instead of appending to the DOM each time i've been storing up the values in a variable and then appending to the DOM, however i'm now getting an error
cannot call method find of null
relating to the line:
var author = ulauthors.find('li.author[data-value="' + authorval + '"]');
Any ideas how i fix it, i guess because i'm not appending until near the end it can't find the element?
var target = $('#listpublishers');
$(info.genres).each(function (i) {
var genreval = this.genre;
var catval = this.genreGroup;
$(this.publishers).each(function (j) {
var publisherval = this.publisher;
var ulauthors = null;
var publisher = target.find('>li.publisher[data-value="' + publisherval + '"]');
var ulyears = null;
var publisherstring = '';
var targetstring = '';
var ulauthorstring = '';
var authorstring = '';
var ulyearstring = '';
//if publisher does not exist create it else find it
if (publisher.size() == 0) {
targetstring += '<li class="publisher" data-value="' + publisherval + '"><a onclick="gotoSubMenu">' + publisherval + '</a>';
target.append(targetstring)
publisherstring += '<ul class="sub-menuoos" data-title="publishers></ul>';
publisher.append(publisherstring)
} else {
ulauthors = publisher.find('>ul');
}
$(this.authors).each(function () {
var authorval = this.author + ' (' + genreval + ')';
var author_val = this.author;
var author = ulauthors.find('li.author[data-value="' + authorval + '"]');
if (author.size() == 0) {
ulauthorstring += '<li class="author" data-value="' + authorval + '"><a onclick="gotoSubMenu">' + authorval + '</a>';
ulauthors.append(ulauthorstring)
authorstring += '<ul class="sub-menuoos" data-title="authors></ul>';
author.append(authorstring);
} else {
ulyears = author.find('>ul');
}
$(this.publishedYears).each(function () {
var yearval = this;
var year = ulyears.find('li.year[data-value="' + yearval + '"]');
if (year.size() == 0) {
var id = ++count;
ulyearstring += '<li class="year" data-value="' + yearval + '"><a class="item" id="year"' + id + '"data-year="' + yearval + '" data-publisher="' + publisherval + '" data-author+"' + author_val + '" data-genre="' + genreval + '">' + yearval + '</a>';
ulyears.append(year);
}
});
});
});
});
});

Jquery .Hover issue with Ajax

I have this code:
cuts_html = '';
for( i = 0; i < attachments.length; i++ ) {
fburl3 = site_url + '/haircut-detail/?img_id=' + attachments[i].ID + '&uid=' + attachments[i].post_author;
if( isNaN(attachments[i].view_count) ) attachments[i].view_count = 0;
cuts_html += '<div id="controller-image" class="cut-image">';
cuts_html += '<div id="cut-imageplacer">';
cuts_html += '<div class="cut-image-info">' +
'By <a href="' + user_profile_url +
'&user_id=' + attachments[i].post_author + '">' +
attachments[i].author_name + '</a>' +
'</div>';
cuts_html += '<div class="commentbox-1">' +
'<img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435546/original_views.png"> ' +
attachments[i].view_count +
' <img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435545/original_talk-bubble.png"> ' +
'<fb:comments-count href="' + fburl3 + '"></fb:comments-count>' +
'</div></div>';
cuts_html += '<a class="cut-image-a" ' +
'href="' + image_detail_url +
'?uid=' + attachments[i].post_author +
'&img_id=' + attachments[i].ID + '">' +
attachments[i].attachment_image_html + '</a>';
cuts_html += '</div>';
}
Div Id cut-imageplacer is display:none, so what I want is when someone hovers the controller-image div, the cut-imageplacer to show and hide of course when not on. I use this code:
<script type="text/javascript">$(document).ready(function(){ $('.cut-image').hover(
function(){ $('#cut-imageplacer').show();
}, function () { $('#cut-imageplacer').hide(); }); }); </script>
But it doesn't work... Any idea what I am doing wrong? Or point me to correct direction?

It look like you are trying to attach events to elements that are being dynamically created. You need to use Live() or On() to attach events to these elements after they are created. Look at This and This to see how to use those.
like:
<script type="text/javascript">
$(document).ready(function(){
$('.cut-image').live("hover",
function(){
$('#cut-imageplacer').show();
}, function () {
$('#cut-imageplacer').hide();
});
}); </script>

reload content not form for dropdowns

I am using a script to generate custom styled dropdowns out of my selects. Basically it creates a list out of the selects and hides the original select making it much easier to style than a <select> allows.
So the basic setup is like this
<div id="formdiv">
<form method="get" name="search" action="samepage">
inputs
</form>
content from form
I want the wrap section to be generated without refreshing the form part that way the dropdodwns dont keep disappearing and reappearing when the page loads.
here is my code for creating the dropdowns ( any performance tuning suggestions are welcome :) )
function createDropDown() {
var selects = $("select.createdrop");
var idCounter = 1;
selects.each(function() {
var dropID = "dropdown_" + idCounter;
var source = $(this);
var selected = source.find("option[selected]");
var options = $("option", source);
source.after('<dl id="' + dropID + '" class="dropdown"></dl>');
var imgtype = '<img src="images/transpx.gif" class="srcimg '+selected.text().toLowerCase()+'" />'
$("#" + dropID).append('<dt>'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></dt>');
$("#" + dropID).append('<dd><ul></ul></dd>');
options.each(function() {
$imgclasstxt = $(this).text().toLowerCase();
var srcimg = '<img src="images/transpx.gif" class="srcimg '+$imgclasstxt+'" width="10px"/>';
$("#" + dropID + " dd ul").append('<li>'+srcimg + $(this).text() + '<span class="value">' + $(this).val() + '</span></li>');
});
idCounter++;
});
}
and here is the code for selecting an option and submiting the form
$(".dropdown dd ul a").click(function() {
var dl = $(this).closest("dl");
var dropID = dl.attr("id");
var text = $(this).attr("id");
var source = dl.prev();
var typeicon = '<img src="images/transpx.gif" class="srcimg '+text.toLowerCase()+'" />'
$("#" + dropID + " dt a").html(typeicon+''+text+'<img src="images/select-down-arrow.png" class="down-arrow" />');
$("#" + dropID + " dd ul").hide();
var value = $(this).children("span.value").html();
source.val(value);
$(this).addClass('selected');
$('body').css('cursor','wait');
document.search.submit();
});

You're modifying the DOM a lot with this code. If it's slow, try dropping as many DOM changes as possible into a string first and then inserting it. You're also doing repeat selects in some places. Example:
$("#" + dropID).append('<dt>'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></dt>');
$("#" + dropID).append('<dd><ul></ul></dd>');
Could change to:
var html = '<dt>'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></dt><dd><ul></ul></dd>'
$("#" + dropID).append(html);