How to conditionally show a URL in jQuery in response to an AJAX fetch?

Question

What I want to achieve: if the Url for certain employees does not exists then instead of displaying an error page I do not want to show the link itself for that employee. I have done it in 2 different ways and none of them are working.

I have the entire code below. All of it is working except for the url part for ones with no html page that my link can connect to.

function test(a,b) {

    var Name = a.text();
    $.ajax({
        type: "POST",
        url: "EmpServices.asmx/GetInfo",
        data: '{ "fieldName": "' + a.attr("id") + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(results) {
            //            if (results.d.Url.length < 2)
            //            {
            //               $('#url').hide();
            //            }
            if (results.d.EmpName.length > 1) {
                var html = '<div style="width:25%;"><img src="' + results.d.image + '" /></div>'
                    + '<div  style="width:75%;">'
                    + '<div><h3>' + results.d.EmpName + '</h3></div>'
                    + '</div>';
                //+ '<div id="url"><a href="' + results.d.Url+ '">Info></a></div>';

                if (results.d.Url.length < 2) 
                {
                    html += '<div id="url"><a href="' + results.d.Url+ '">Info></a></div>';
                }
                $(Employee).html(html);

            }
        },
        error: function() {
            $(Employee).html('Error');
        }
    });
}

Answer 1

Did you write the server-side code yourself? If you did, and you can modify it to return an empty string ('') instead of null, if a URL doesn't exist, you could replace this:

if (results.d.Url.length < 2) 
{
   html += '<div id="url"><a href="' + results.d.Url+ '">Info></a></div>';
}

with this:

if (results.d.Url) 
{
   $(html).append('<div id="url"><a href="' + results.d.Url + '">Info></a></div>');
}

The $(html).append(...) takes care of inserting the URL within the enclosing DIV.

Answer 2

You cant call $('#Url').hide() there because you havent added it to the dom yet, do something like this:

var Name = a.text();
$.ajax({
    type: "POST",
    url: "EmpServices.asmx/GetInfo",
    data: '{ "fieldName": "' + a.attr("id") + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(results) {
        if (results.d.EmpName.length > 1) {
            var html = '<div style="width:25%;"><img src="' + results.d.image + '" /></div>'
                + '<div  style="width:75%;">'
                + '<div><h3>' + results.d.EmpName + '</h3></div>'
                + '</div>';

            if (results.d.Url.length >= 2)
            {
                 html += '<div id="url"><a href="' + results.d.Url+ '">Info></a></div>';
            }



            if (results.d.ProductUrl.length < 2) 
            {
                html += '<div id="url"><a href="' + results.d.Url+ '">Info></a></div>';
            }
            $(contentElement).html(html);

        }
    },
    error: function() {
        $(contentElement).html('Error');
    }
});
}

What im doing here is instead of adding a url div, then trying to hide it, just don't add the div if you dont have the url!