Soapy webbing

gleemonk

Years ago we built a CMS-backed website for this entity we'll call TUP. They keep a few things (eg. rosters) in a database operated by a third party we'll call TER. TUP desired to display part of their database on the website. They asked TER how this data could be displayed. That part is not the WTF.

Full disclosure: I'm being paid to write this. Which means I have to find out how the code works. I figured letting you in on this multifaceted WTF would not prove detrimental.

We enabled a free-form text field where TER could paste HTML-code to add content to each page. So TER did paste their code in a few places and it Worked Fine. Over the years I've stumbled into these areas a few times and let me just

This is one example of the code that is pasted in a few public pages with some variations. Some names changed, any mistakes in variable names are maybe my own, verbatim otherwise:

<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/jquery.someplugin.min.js"></script>

<link href="/css/tup/layout.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var groupId = 'GR_25B';
    var profCode;
    var frozzeling;
    var language;

    var webServiceURL = 'http://some.machine.es:8080/TUPWebservices-war/WebServices';
    var listMembersSoapMsgStart = '<?xml version="1.0" encoding="UTF-8"?><S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">' +
            '<SOAP-ENV:Header/>' +
            '<S:Body>' +
            '<ns2:listMembers xmlns:ns2="http://webservices.ter/">';
    var listMembersSoapMsgEnd = '</ns2:listMembers>' +
            '</S:Body>' +
            '</S:Envelope>';
    var listGroupsSoapMsgStart = '<?xml version="1.0" encoding="UTF-8"?><S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">' +
                    '<SOAP-ENV:Header/>' +
                    '<S:Body>' +
                    '<ns2:listGroups xmlns:ns2="http://webservices.ter/">';
    var listGroupsSoapMsgEnd = '</ns2:listGroups>' +
                    '</S:Body>' +
                    '</S:Envelope>';

    function renderMembersTable(members)
    {
        var membersData = [];
        if(members !== null)
        {
            $.each(members, function()
            {
                membersData.push([
                    this.lastName,
                    this.firstName
                ]);

            });

            $('#membersList').someplugin(
            {
                'data': membersData,
                'leery': false,
                'truthy': false,
                'filter': false,
                'wtf': true
            });
            document.getElementById('groupCodeSelected').innerHTML = groupId;
        }

    };

    function renderGroupsTable(groups)
    {
        groupId = '';
        var groupsData = [];
        if(groups !== null)
        {
            var count = 0;

            var link1;
            var link2;
            var link3;

            $.each(groups, function()
            {
                if(groupId === '')
                {
                    groupId = this.code;
                }

                count += 1;

                var hrefString = "<a href='#' onclick='CallListMembersWS(\"" + this.code + "\");'>" + this.code + "</a>";

                if(count === 1)
                {
                    link1 = hrefString;
                }

                if(count === 2)
                {
                    link2 = hrefString;
                }

                if(count === 3)
                {
                    link3 = hrefString;
                    groupsData.push([link1, link2, link3]);
                    count = 0;
                }

            });

            if(count === 2)
            {
                groupsData.push([link1, link2, ""]);
            }else if(count === 1)
            {
                groupsData.push([link1, "", ""]);
            }

            $('#groupsList').someplugin(
            {
                'data': groupsData,
                'leery': false,
                'truthy': false,
                'filter': false,
                'wtf': true
            });

        }

        CallListMembersWS(groupId);

    };

    function CallListMembersWS(groupIdFilter)
    {
        groupId = groupIdFilter;

        $.ajax({
            url: webServiceURL,
            type: "POST",
            dataType: "xml",
            data: listMembersSoapMsgStart +
                  '<groupIdFilter>' + groupIdFilter + '</groupIdFilter>' +
                  listMembersSoapMsgEnd,
            contentType: "text/xml; charset=\"utf-8\"",
            success : OnSuccessMembersWS,
            error: OnError
        });

        return false;
    };

    function CallListGroupsWS()
    {
            
        $.ajax({
            url: webServiceURL,
            type: "POST",
            dataType: "xml",
            data: listGroupsSoapMsgStart +
                  '<profCode>' + profCode + '</profCode>' +
                  '<frozzeling>' + frozzeling + '</frozzeling>' +
                  listGroupsSoapMsgEnd,
            contentType: "text/xml; charset=\"utf-8\"",
            success: OnSuccessGroupsWS,
            error: OnError
        });

        return false;
    };

    function OnSuccessMembersWS(data, status, req)
    {
        var dataString = $(req.responseXML).find("return").text();
        var responseDataJSON = JSON.parse(dataString);
        renderMembersTable(responseDataJSON);
    };

    function OnSuccessGroupsWS(data, status, req)
    {
        var dataString = $(req.responseXML).find("return").text();
        var responseDataJSON = JSON.parse(dataString);
        renderGroupsTable(responseDataJSON);
    };

    function OnError(request, status, error)
    {
        alert('error ' + error + ' - ' + status + ' - ' + request);
    };

    function setColumnHeader() {
    if(language == 'en'){
        document.getElementById("headerEN").style.visibility="visible";  
        document.getElementById("headerES").style.visibility="hidden" ; 
    }else{
        document.getElementById("headerEN").style.visibility="hidden";  
        document.getElementById("headerES").style.visibility="visible" ; 
    }
    }

    $(document).ready(function() {

        profCode = $('#param1').html();
    frozzeling = parseInt($('#param2').html());
    language = $('#param3').html();
        jQuery.support.cors = true;
    setColumnHeader();
        CallListGroupsWS();


    });
</script>

<div id="param1" style="display: none;">ROR</div>
<div id="param2" style="display: none;">0</div>
<div id="param3" style="display: none;">es</div>
<td colspan="2" valign="top" class="content">
    <div>
        <div id="groupCodeSelected" style="font-weight: bold"></div>
        </br>

        <table id="membersList" class="memberList">
            <thead>
                <tr id="headerES">
                    <th style="text-align: left; width:150px;">
                        Apellido
                    </th>
                    <th style="text-align: left; width:150px;">
                        Nombre
                    </th>
                </tr>
                <tr id="headerEN">
                    <th style="text-align: left; width:150px;">
                        Name
                    </th>
                    <th style="text-align: left; width:150px;">
                        Given Name
                    </th>
                </tr>

            </thead>

        </table>

    </div>
</td>

The code is well written. I mean it's split into functions and most variables are named well. The WTF is that they mix spaces and tabs and the tab-width is not consistent.

blakeyrat

@gleemonk said:

The WTF is that they mix spaces and tabs and the tab-width is not consistent.

Gasp!

And it's not like you can just use a menu item in an IDE and fix it in about .5 milliseconds or anything! That code is permanently destroyed forever!

gleemonk

@gleemonk said:

The WTF is

This part might have been facetious.

blakeyrat

It might have been, but my reply stands.

TwelveBaud

This thread needs a mug.

boomzilla

A shaggy mug?

I'm assuming there's some hinky hand rolled XML stuff in there, but I'm not wasting my javascript brain cell decoding the WTF.

gleemonk

@blakeyrat said:

It might have been, but my reply stands.

Yes you are absolutely right the code is ruined forever and we weren't being facetious at all.

Anyway, since nobody reads code anymore I'll help along. TLDR: The biggest WTF is that the the page calls a web service with a SOAP request then renders the response as HTML. This is a to search engines because it's happening on the client.

The other WTF are comparatively minor. Though if you were looking for some ~~baroque~~ roccoco code patterns you are in luck

``

      var count = 0;

        var link1;
        var link2;
        var link3;

        $.each(groups, function()
        {
            if(groupId === '')
            {
                groupId = this.code;
            }

            count += 1;

            var hrefString = "<a href='#' onclick='CallListMembersWS(\"" + this.code + "\");'>" + this.code + "</a>";

            if(count === 1)
            {
                link1 = hrefString;
            }

            if(count === 2)
            {
                link2 = hrefString;
            }

            if(count === 3)
            {
                link3 = hrefString;
                groupsData.push([link1, link2, link3]);
                count = 0;
            }

        });

        if(count === 2)
        {
            groupsData.push([link1, link2, ""]);
        }else if(count === 1)
        {
            groupsData.push([link1, "", ""]);
        }

``

Groaner

I was going to make a joke about webservices, but I decided to give it a REST.

HardwareGeek

At least you're living up to your name.

TwelveBaud

The WTF is that the page is terrible at SEO? That's really what you're going with?

#Mug.

NedFodder

@Groaner said:

I was going to make a joke about webservices, but I decided to give it a REST.

I don't GET this POST.

hungrier

Use your HEAD.

PleegWat

What are my other OPTIONS?

loose

You may have access to a couple of heads, if so put them together and see what you can come up with

lolwhat

@loose said:

You may have access to a couple of heads, if so put them together and see what you can come up with

Also: Why the fuck won't the emoticon dropdown filter as I type?

Filed under: [Chrome on Galaxy S6? That's different, bitch!](#tag)

gleemonk

@TwelveBaud said:

The WTF is that the page is terrible at SEO? That's really what you're going with?

Yes if you consider basic discoverability to be Search Engine Optimization. Don't you complain that some pages on your site have white text on white background, you should've opted for the Typography Optimization package.