Question

I’m working on a postcode (airports & train station) search but can’t seem to figure out why the selected row values are not writing the correct values to the hidden text boxes.

Basically if I search ‘Gatwick’ as shown below:

I get the following XML response:

<?xml version="1.0"?>
<addresslist resultcount="4">
    <address id="0" catagoryid="1" lat="184179968" lng="-639296">
        <companyname></companyname>
        <premiseno></premiseno>
        <streetname>GATWICK AIRPORT (NORTH)</streetname>
        <townname></townname>
        <postcode>RH6 0PJ</postcode>
    </address>
    <address id="1" catagoryid="1" lat="184161536" lng="-586944">
        <companyname></companyname>
        <premiseno></premiseno>
        <streetname>GATWICK AIRPORT (SOUTH)</streetname>
        <townname></townname>
        <postcode>RH6 0NP</postcode>
    </address>
    <address id="2" catagoryid="1" lat="184161664" lng="-580224">
        <companyname></companyname>
        <premiseno></premiseno>
        <streetname>GATWICK GATWICK AIRPORT RAILWAY STATION</streetname>
        <townname></townname>
        <postcode>RH6 0RD</postcode>
    </address>
    <address id="3" catagoryid="1" lat="184161536" lng="-586944">
        <companyname></companyname>
        <premiseno></premiseno>
        <streetname>GATWICK RAILWAY CONCOURSE</streetname>
        <townname></townname>
        <postcode>RH6 0NN</postcode>
    </address>
</addresslist>

At the moment, no matter which row I select, it always writes the last Lat & Long values to the hidden textbox. For example, If i select the first row, it will write 184161536, -586944 which is the Lat Long values for ‘GATWICK RAILWAY CONCOURSE’

Here is the Jquery Code:

function buildResultView(xml_object,pageNum,rowdiv) {

// Remove existing page up page down click events
rowdiv.find('.lbl-addr-pgup').unbind('click');
rowdiv.find('.lbl-addr-pgdn').unbind('click');

// Remove result list if there is one
if (rowdiv.find('.ul-result-view')) {
    rowdiv.find('.ul-result-view').remove();
}

ul = $('<ul></ul>');
ul.addClass('ul-addr-res');
ul.addClass('ul-result-view');

// Prepend ul before resultinfo
rowdiv.find('.div-result-info').before(ul); 

// Reset result count
var resCount = 0;

// Count Results
$(xml_object).find('address').each(function(){
    resCount += 1;
});

// Pull out start row and max rows
var pageRes = clientPaginate(resCount,pageNum).split(',');
var loopMax = parseInt(pageRes[0]);
var currentRow = parseInt(pageRes[1]);
var lastPge = parseInt(pageRes[2]);
var addType;

// Show maxRows starting at startIndex  
for (var i = currentRow; i < loopMax; i++) {

    var li = $('<li></li>');
    li.addClass('li-addr-res');
    addType = parseInt($(xml_object).find("address[id='"+i+"']").attr("catagoryid"));
    var lat = ($(xml_object).find("address[id='"+i+"']").attr("lat"));
    var lng = ($(xml_object).find("address[id='"+i+"']").attr("lng"));

    li.css('cursor','pointer');

// Reset result count
var resCount = 0;

// Count Results
$(xml_object).find('address').each(function(){
    resCount += 1;
});

// Pull out start row and max rows
var pageRes = clientPaginate(resCount,pageNum).split(',');
var loopMax = parseInt(pageRes[0]);
var currentRow = parseInt(pageRes[1]);
var lastPge = parseInt(pageRes[2]);
var addType;

// Show maxRows starting at startIndex  
for (var i = currentRow; i < loopMax; i++) {

    var li = $('<li></li>');
    li.addClass('li-addr-res');
    addType = parseInt($(xml_object).find("address[id='"+i+"']").attr("catagoryid"));
    var lat = ($(xml_object).find("address[id='"+i+"']").attr("lat"));
    var lng = ($(xml_object).find("address[id='"+i+"']").attr("lng"));

Then I write the lat, lng values to the hidden textbox:

    // Add this lat lng to hidden text box
    rowdiv.find('.hidden-lat-lng').val(lat+","+lng);

Any idea why this isn’t selected the correct latitude longtitude values?

I just need to be able to get the latitude longtitude values of the row that is selected.

If anybody could help with this, I would be very greatful! 🙂

Answer 1

When you have code like this:

for (var i = 0; i < 10; i++) {
   var foo = i;
}

foo is going to be 9. That’s what’s happening, your lat and lng values are simply the last ones in the loop, because that’s where you’re setting them.

Note that it doesn’t matter whether you declare foo inside the for() loop or outside it; variable scope in javascript is not block-level like it is in many other languages and using var will give these ones the scope of the function.

You’re trying to redeclare variables as well; I’m not sure whether that’s just a result of copy-pasting the code or a misunderstanding of variable scope but in any case it will have no subsequent effect. It would be clearer and probably lead to fewer gotchas if you just declare your local variables at the top of the function.

There is presumably more code dealing with which row is selected. If it sets lat and lng then post it to your question. Otherwise, here’s my take:

for (var i = currentRow; i < loopMax; i++) {
    var li = $('<li></li>');
    li.addClass('li-addr-res');
    addType = parseInt($(xml_object).find("address[id='"+i+"']").attr("catagoryid"));

    lat = ($(xml_object).find("address[id='"+i+"']").attr("lat"));
    lng = ($(xml_object).find("address[id='"+i+"']").attr("lng"));

    // Store the latitude and longitude alongside the li element itself
    li.data('lat', lat).data('lng', lng);

    // add a handler to copy that data to the hidden textarea when clicked
    // I'm assuming you mean the row is selected when it's clicked, otherwise
    // just bind to something else
    li.click(function() {        
        // recover the data from this element (the <li>)
        var lat = $(this).data('lat'),
            lng = $(this).data('lng');

        // rowdiv is probably still in scope from the parent function,
        // though there is missing code in your question. I'm going to 
        // assume there's only one hidden textarea for this purpose
        $('.hidden-lat-lng').val(lat + "," + lng);
    }