Tricky Jquery Question!!

Question

Hi,

What I want to achieve. If the Url for certain emplyees 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. Please help. 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. Please help!!

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

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!

Answer 2

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.