RoToQ RoToQ - 2 months ago 13
Javascript Question

custompostback __dopostback not firing from anchor tag

So I've built a live search box that updates on keyup. It populates a span with items that match the string input as the user types.

I am trying to dynamically create links using anchor tags so that when a user clicks one of the results in the pop up results span, it takes the users employee number and does a customer postback where it is picked up server side.

Javascript function that runs on keyup to build the results span:

function liveSearch() {
//debugger;
$("#<%= QuickNameSearch_error.ClientID %>").text("");
$("#<%= QuickNameSearch_error.ClientID %>").hide("");
var searchField = $("#<%= QuickNameSearch_textbox.ClientID %>").val();
if (searchField.length == 0) {
$("#QuickNameSearchResults").hide();
return;
}
else {
$("#QuickNameSearchResults").show();
}
var regex = new RegExp(searchField, "i");
var output = '<div class="liveSearchOuter">';
var count = 0;
$.getJSON('Scripts/LiveSearchData.js', function (data) {
$.each(data, function (key, val) {
try {
if ((val.preferred.search(regex)) != -1 || (val.surname.search(regex) != -1)) {
if (count % 2 == 0) {
output += '<div class="liveSearchItem liveSearchItemLight">';
}
else {
output += '<div class="liveSearchItem liveSearchItemDark">';
}
output += "<div><b><a id='hlEmpName" + count + "' href='javascript:void(0)' onclick='CustomPostBack('" + val.emp_no.trim() + "');'>" + val.preferred.trim() + " " + val.surname.trim() + "</a></b></div>";
output += "<div><b><a id='hlEmpEmail" + count + "' href='javascript:void(0)' onclick='CustomPostBack('" + val.emp_no.trim() + "');'>" + val.email.trim() + "</a></b></div>";

output += '</div>';
count++;
}
}
catch (err) {
alert(err);
}
});
if (count == 0) {
output += '<div class="liveSearchItem liveSearchItemLight"><div>No results found</div>';
}
output += '</div>';
$("#QuickNameSearchResults").html(output);
});
}

function CustomPostBack(argStr) {
debugger;
__doPostBack('CustomPostBack', argStr);
}


C# function that runs on pageload:

if (Page.IsPostBack)
{
if ((Page.Request["__EVENTTARGET"] == "CustomPostBack") && (Page.Request["__EVENTTARGET"] != ""))
{
string eventTarget = Page.Request["__EVENTTARGET"];
string eventArgument = Page.Request["__EVENTARGUMENT"];
ShowEmployeeProfile(eventArgument.Trim());
}
}


I've used custom postbacks before in javascript to great effect, but never from an anchor tag. I've read on here it is possible, but I can't see where I'm going wrong and I have been reading questions and answers for hours.

The main two lines that I'm having trouble with are:

output += "<div><b><a id='hlEmpName" + count + "' href='javascript:void(0)' onclick='CustomPostBack('" + val.emp_no.trim() + "');'>" + val.preferred.trim() + " " + val.surname.trim() + "</a></b></div>";
output += "<div><b><a id='hlEmpEmail" + count + "' href='javascript:void(0)' onclick='CustomPostBack('" + val.emp_no.trim() + "');'>" + val.email.trim() + "</a></b></div>";


I have tried a hundred variations of small changes. They render to this when run:

<a id="hlEmpName0" href="javascript:void(0)" onclick="CustomPostBack(" 123456');'="">Testy McTest</a>


The page does not post back though and reach the page load to catch the employee number.

Answer

So it looks like your quotes are a little screwy. Take a look at your last snippet:

onclick="CustomPostBack(" 845169");"

Your onclick is being cut short because you're using double-quotes for your parameters. The browser sees it as onclick="CustomPostBack(" and the remaining portion is just text in the middle of nowhere.

If this value is always going to be a number, just remove the quotes around it altogether:

output += '<div><b><a id="hlEmpName' + count + '" href="javascript:void(0)" onclick="CustomPostBack(' + val.emp_no.trim() + ');">' + val.preferred.trim() + ' ' + val.surname.trim() + '</a></b></div>';

If it needs to be a string value then you can escape your single-quotes by doing &apos; instead of ":

output += '<div><b><a id="hlEmpName' + count + '" href="javascript:void(0)" onclick="CustomPostBack(&apos;' + val.emp_no.trim() + '&apos;);">' + val.preferred.trim() + ' ' + val.surname.trim() + '</a></b></div>';