Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

What I'm trying to accomplish here is to pull a table of open employment positions with AJAX, filter out the garbage code that comes with it, put each <tr> from the response into its correct category <div> according to the type of position.

The trick is that there are no ids or class names on the <tr> being pulled making it dificult to establish which belong where. I've come up with this increadibly specific, repetitive, and limited code. Since there are 3 of these requests I have to make and they're all in the same kind of messy template, I ended up using the same code over and over, but just changing the class and variable names each time.

I wanted some suggestions that are generic and expandable if at all possible. Are the if statements really necessecary?

Also if you have any code or reading materials you would like to recomend so I could learn from for future references.

Relevant jQuery

var OpenPositions = {

setupAjax: function() {
            $.support.cors = true;
            $.ajaxSetup({
                type: "GET",
                async: false,
                error: function () {
                    console.log('Error');
                }
            });
},

{...}

classifiedPull: function() {
            $.ajax({
                url: "http://jobs.kent.k12.wa.us/browsejobs.aspx?type=2",
                dataType: "html",
                success: function ( response ) {
                    OpenPositions.classifiedFilter(response);
                }
            });
        },

classifiedFilter: function( response ) {
            var Classified = {
                Paraeducator: [],
                Clerical: [],
                NonRep: [],
                Maintenance: [],
                ClaSubstitute: [],
                Coaching: []
            },
                response = $(response).find("table tbody tr td").html();
            $(response).find("span:contains(Classified Positions)").remove();
            $(response).find("font:contains(Open to all)").parent().parent().remove();

            //filter each span title and classify sub items
            $(response).find("span").parents("tr").each( function() {

                //Find categories and separate by class
                var rowtext = $(this).find("span").text(),
                    position = "";

                if (rowtext === "Paraeducator") {
                    position = "Paraeducator";
                    $(this).nextAll("tr").addClass("Paraeducator");
                }

                if (rowtext === "Clerical") {
                    position = "Clerical";
                    $(this).nextAll("tr").addClass("Clerical");
                }

                if (rowtext === "Non-Rep") {
                    position = "NonRep";
                    $(this).nextAll("tr").addClass("NonRep");
                }

                if (rowtext === "Maintenance") {
                    position = "Maintenance";
                    $(this).nextAll("tr").addClass("Maintenance");
                }

                if (rowtext === "Substitute") {
                    position = "ClaSubstitute";
                    $(this).nextAll("tr").addClass("ClaSubstitute");
                }

                if (rowtext === "Coaching") {
                    position = "Coaching";
                    $(this).nextAll("tr").addClass("Coaching");
                }

                //Push content into Classified
                ((position === "Paraeducator") ? $(this).nextUntil(".Clerical").each( function() {
                    Classified.Paraeducator.push( $.trim( "<tr>" + $(this).html() + "</tr>" ) );
                }) :
                ((position === "Clerical") ? $(this).nextUntil(".NonRep").each( function() {
                    Classified.Clerical.push( $.trim( "<tr>" + $(this).html() + "</tr>" ) );
                }) :
                ((position === "NonRep") ? $(this).nextUntil(".Maintenance").each( function() {
                    Classified.NonRep.push( $.trim( "<tr>" + $(this).html() + "</tr>" ) );
                }) :
                ((position === "Maintenance") ? $(this).nextUntil(".ClaSubstitute").each( function() {
                    Classified.Maintenance.push( $.trim( "<tr>" + $(this).html() + "</tr>" ) );
                }) :
                ((position === "ClaSubstitute") ? $(this).nextUntil(".Coaching").each( function() {
                    Classified.ClaSubstitute.push( $.trim( "<tr>" + $(this).html() + "</tr>" ) );
                }) :
                ((position === "Coaching") ? $(this).nextAll().each( function() {
                    Classified.Coaching.push( $.trim( "<tr>" + $(this).html() + "</tr>" ) );
                }) : [] ) ) ) ) ) );
            });

            this.classifiedClean( Classified );
},

classifiedClean: function( Classified ) {
            //remove title from array
            Classified.Paraeducator.pop();
            Classified.Clerical.pop();
            Classified.NonRep.pop();
            Classified.Maintenance.pop();
            Classified.ClaSubstitute.pop();

            Classified.Paraeducator = Classified.Paraeducator.join("");
            Classified.Clerical = Classified.Clerical.join("");
            Classified.NonRep = Classified.NonRep.join("");
            Classified.Maintenance = Classified.Maintenance.join("");
            Classified.ClaSubstitute = Classified.ClaSubstitute.join("");
            Classified.Coaching = Classified.Coaching.join("");

            $.extend(this.positionsJoin, Classified);
            $.publish('Done/Classified');
}
};

Final template where response is inserted

<div id="certificated">
    <ul>
        <li><a href="#Elementary">Elementary Certificated</a></li>
        <li><a href="#MiddleSchool">Middle School Certificated</a></li>
        <li><a href="#HighSchool">High School Certificated</a></li>
        <li><a href="#K12">K-12 Certificated</a></li>
        <li><a href="#Substitute">Substitute</a></li>
        <li><a href="#ESA">Certificated - ESA</a></li>
    </ul>
    <div id='Elementary'>
        <table>
            {{{Elementary}}}
        </table>
    </div>
    <div id='MiddleSchool'>
        <table>
            {{{MiddleSchool}}}
        </table>
    </div>
    <div id='HighSchool'>
        <table>
            {{{HighSchool}}}
        </table>
    </div>
    <div id='K12'>
        <table>
            {{{K12}}}
        </table>
    </div>
    <div id='Substitute'>
        <table>
            {{{Substitute}}}
        </table>
    </div>
    <div id='ESA'>
        <table>
            {{{ESA}}}
        </table>
    </div>
</div>

Literal HTML Ajax response

        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                        <!-- Body Text -->
          <span id="isHeadType"><h2>Certificated Positions</h2></span>

                                <table border="0" cellspacing="0" cellpadding="0" style="MARGIN-TOP: 10px;">
                            <tr>
                                <td>
                                    <font class="HeadTitle">External Positions: Open to all applicants.</font><br>
                                </td>
                            </tr>

                                <tr>
                                    <td height="20" nowrap="nowrap">
                                        <i><span id="ExternalJobs__ctl1_BargainGroup" class="BodyText">Elementary Certificated</span></i>
                                        <br/><br/>
                                    </td>
                                </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=3278&type=1&int=External'>Elementary Itinerant General Music Teacher .084 FTE    -   IS1205</a></b>
                                                    <br/>
                                                    <b>Location:</b>Springbrook Elementary School<br/>
                                                    <b>Contract:</b>State Salary Schedule (DOE & Credits)<br/>
                                                    <b>Anticipated Hours:</b> 2:15-3:30<br />
                                                    <b>Posting Date:</b>&nbsp;10/17/2012&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=3628&type=1&int=External'>Instructional Support Team Specialist – ELL    -   SS1209</a></b>
                                                    <br/>
                                                    <b>Location:</b>Student & Family Support Services<br/>
                                                    <b>Contract:</b>Salary Schedule (DOE & Credits)<br/>
                                                    <b>Anticipated Hours:</b> TBD<br />
                                                    <b>Posting Date:</b>&nbsp;1/28/2013&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>                                       

                                <tr>
                                    <td height="20" nowrap="nowrap">
                                        <i><span id="ExternalJobs__ctl2_BargainGroup" class="BodyText">Middle School Certificated</span></i>
                                        <br/><br/>
                                    </td>
                                </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=3585&type=1&int=External'>Secondary Teachers -   2013SecPool</a></b>
                                                    <br/>
                                                    <b>Location:</b>TBD<br/>
                                                    <b>Contract:</b>State Salary Schedule DOE & Credits<br/>
                                                    <b>Anticipated Hours:</b> <br />
                                                    <b>Posting Date:</b>&nbsp;1/9/2013&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>


                                <tr>
                                    <td height="20" nowrap="nowrap">
                                        <i><span id="ExternalJobs__ctl3_BargainGroup" class="BodyText">High School Certificated</span></i>
                                        <br/><br/>
                                    </td>
                                </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=3579&type=1&int=External'>Alternative Teacher- .2 FTE    -   SO1211</a></b>
                                                    <br/>
                                                    <b>Location:</b>iGrad<br/>
                                                    <b>Contract:</b>State Salary Schedule (DOE & Credits)<br/>
                                                    <b>Anticipated Hours:</b> 8:15AM-4:45PM<br />
                                                    <b>Posting Date:</b>&nbsp;1/9/2013&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=3580&type=1&int=External'>Alternative Teacher- .1 FTE    -   SO1210</a></b>
                                                    <br/>
                                                    <b>Location:</b>iGrad<br/>
                                                    <b>Contract:</b>State Salary Schedule (DOE & Credits)<br/>
                                                    <b>Anticipated Hours:</b> 5:15pm-8:45PM<br />
                                                    <b>Posting Date:</b>&nbsp;1/9/2013&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>                           

                                <tr>
                                    <td height="20" nowrap="nowrap">
                                        <i><span id="ExternalJobs__ctl4_BargainGroup" class="BodyText">K-12 Certificated</span></i>
                                        <br/><br/>
                                    </td>
                                </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=3586&type=1&int=External'>Special Education Teachers -   2013spedpool</a></b>
                                                    <br/>
                                                    <b>Location:</b>TBD<br/>
                                                    <b>Contract:</b>State Salary Schedule DOE & Credits<br/>
                                                    <b>Anticipated Hours:</b> <br />
                                                    <b>Posting Date:</b>&nbsp;1/9/2013&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>


                                <tr>
                                    <td height="20" nowrap="nowrap">
                                        <i><span id="ExternalJobs__ctl5_BargainGroup" class="BodyText">Substitute</span></i>
                                        <br/><br/>
                                    </td>
                                </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=239&type=1&int=External'>Guest Teacher   -   HRSubTCR</a></b>
                                                    <br/>
                                                    <b>Location:</b>All district schools<br/>
                                                    <b>Contract:</b>$133.35 full day/$76.20 half day<br/>
                                                    <b>Anticipated Hours:</b> <br />
                                                    <b>Posting Date:</b>&nbsp;7/26/2011&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>
                                <tr>
                                    <td height="20" nowrap="nowrap">
                                        <i><span id="ExternalJobs__ctl6_BargainGroup" class="BodyText">Certificated - ESA</span></i>
                                        <br/><br/>
                                    </td>
                                </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=2323&type=1&int=External'>Speech Language Pathologist Intern -   SLPIntern</a></b>
                                                    <br/>
                                                    <b>Location:</b>Inclusive Education<br/>
                                                    <b>Contract:</b>Stipend<br/>
                                                    <b>Anticipated Hours:</b> TBD<br />
                                                    <b>Posting Date:</b>&nbsp;2/16/2012&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td nowrap="nowrap" style="padding-left:20px;" class="BodyText">
                                                  <b><a href='jobs.aspx?id=2956&type=1&int=External'>Occupational Therapist -   2012-13OTPool</a></b>
                                                    <br/>
                                                    <b>Location:</b>Inclusive Education<br/>
                                                    <b>Contract:</b>State Salary Schedule DOE & Credits<br/>
                                                    <b>Anticipated Hours:</b> TBD<br />
                                                    <b>Posting Date:</b>&nbsp;9/5/2012&nbsp;
                                                    <b>Closing date:</b>&nbsp;Until Filled

                                                <br/>
                                                <br/>
                                            </td>
                                        </tr>
        </table>

        <span id="Message" class="BodyText" style="font-weight:bold;"></span>




            <br/>
            <br/>
        </td>
        </tr>
        <tr>
            <td colspan="2">
            </td>
        </tr>
        </tbody>
    </table>
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

In my opinion, you are trying to solve the wrong issue here. If you want to optimize this entire routine, I have to say you start optimizing at the response.

AJAX is made for a reason, and it was meant to load pages without page loads, or having to wait a lot. The JSON format was also created to aid AJAX and reduce the size of the response, thus faster AJAX.

In your case, you should change your response from the server, from marked-up data to JSON data. An excerpt of the above can be represented in this simple JSON:

[
  {
    "id":"ExternalJobs__ctl1_BargainGroup",
    "level":"Elementary",
    "positions":[
      {
        "id":3278,
        "position":"Elementary Itinerant General Music Teacher .084 FTE    -   IS1205",
        "location":"Springbrook Elementary School",
        "contract":"State Salary Schedule (DOE & Credits)",
        "hours":"2:15-3:30",
        "posted":"2012-10-17",
        "closing":"Until Filled"
      },{
        "id":3628,
        "position":"Instructional Support Team Specialist – ELL    -   SS1209",
        "location":"Student & Family Support Services",
        "contract":"Salary Schedule (DOE & Credits)",
        "hours":"TBD",
        "posted":"2013-01-28",
        "closing":"Until Filled"
      }
    ]
  },{
    //Middle School Certificated
  },{
    //High School Certificated
  },{
    //and so on...
  }
]

As you can see, tons of markup were removed, thus lightening the load. This also makes it easier to manipulate since you won't be doing pseudo-DOM tasks with jQuery. In this case, the response is already an object to start with. With a little or no manipulation of the return data, depending on how it's structured, you can directly plop it in to the Classified object directly or to the template!

share|improve this answer
    
I would use JSON (JSONP actually for cors) but this content is coming from a 3rd party app which doesn't offer support for that. I could probably convert all the content myself but wouldn't that be almost the same length-wise? –  Jonny Sooter Feb 4 '13 at 15:16
    
@JonnySooter what method are you using to get this HTML? If you are using a proxy server to fetch this, it would be better that your proxy do the conversion so that client-side JS processing won't be that heavy. –  Joseph the Dreamer Feb 4 '13 at 22:29
    
Should have posted that one earlier. I've updated the code with the ajax setup function. This method and etc. will apply to all three of the requests. –  Jonny Sooter Feb 5 '13 at 15:18
    
@JonnySooter so CORS is an option here? If so, I'll be updating my answer in a while. –  Joseph the Dreamer Feb 6 '13 at 11:14
1  
YES! It is, as you can see in the setup function XD –  Jonny Sooter Feb 6 '13 at 15:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.