JavaScript is not updating HTML code using new form values

Question

Problem:

When entering two form values (min/max price) does not update presented query results. When first entered the results are correctly presented, but when form values are changed thereafter with new parameters, the html code is not updated to reflect these parameters.

HTML code:

<input type="text" size="5" placeholder="Min. price" id="price_min">
<input type="text" size="5" placeholder="Max. price" id="price_max">
<input type="button" onclick="getHotelInfo()" value="Get" />
<div id="hotel_info"></div>

JavaScript code:

function getHotelInfo() {
    $.get('hotelservice.php?priceMin=' + $('input#price_min').val() + '&priceMax=' + $('input#price_max').val(), function(data) {
        var hotelInfo = JSON.parse(data);
        content = '<table style="font-size:10px;width:100%;"><tr><th>Name</th><th>Stars</th><th>Price</th></tr>';
        for (var hotel=0; hotel<5;hotel++) 
        {
            content += '<tr><td><a href="' + hotelInfo[hotel].externalLink + '">' + hotelInfo[hotel].name +'</a></td><td><center>' + hotelInfo[hotel].stars + '</center></td><td><center>' + hotelInfo[hotel].price + '</center></td></tr>';
        }
        content += '</table>';
        $('#hotel_info').replaceWith(content);
    });
}

PHP code:

$priceMin = $_GET['priceMin'];
$priceMax = $_GET['priceMax'];

$xml_source = file_get_contents('http://www.kayak.com/h/rss/hotelrss/SE/vaxjo?mc=EUR');
$xml = simplexml_load_string($xml_source);
$result = array();
foreach ($xml->channel->item as $item) {
    $kyk = $item->children('http://www.kayak.com/h/rss/hotelextension');
    $price = (int)$kyk->price;
    if ($price < $priceMax && $price > $priceMin) {
        $entry = new stdClass();
        $entry->name = (string)$item->title;
        $entry->externalLink = (string)$item->link;
        $entry->price = $price;
        $entry->stars = (int)$kyk->stars;
        $result[] = $entry;
    }
}
echo json_encode($result);

Desired output: When form values are changed and getHotelInfo() is called, the new results should be reflected.

Did you look at the console output and the network tab in Firebug / Chrome devtools? There may be an issue with var hotelInfo = JSON.parse(data); since data may already be an object as jQuery.get guesses the dataType is JSON — guillaume
– guillaume, Commented Dec 2, 2012 at 10:00

Jesperhag · Accepted Answer · 2012-12-02 10:02:24Z

I tested your script and the problem is that (from my brief testing) the PHP script sometimes return less than 5 results and then you still try to fetch 5 results (in the for-loop). This causes the script to access properties of an object that does not exists and this causes an error and the script fails. Therefor nothing gets updated.

Anyway, I went a head and updated the script for you so the returned data is max 5 or the length of the returned data from the PHP-script. The new javascript function looks like this:

function getHotelInfo() {
    $.get('test.php?priceMin=' + $('input#price_min').val() + '&priceMax=' + $('input#price_max').val(), function(data) {
        var hotelInfo = JSON.parse(data);
        var limit = hotelInfo.length > 5 ? 5 : hotelInfo.length;

        content = '<table style="font-size:10px;width:100%;"><tr><th>Name</th><th>Stars</th><th>Price</th></tr>';
        for (var hotel=0; hotel< limit;hotel++) 
        {
            content += '<tr><td><a href="' + hotelInfo[hotel].externalLink + '">' + hotelInfo[hotel].name +'</a></td><td><center>' + hotelInfo[hotel].stars + '</center></td><td><center>' + hotelInfo[hotel].price + '</center></td></tr>';
        }
        content += '</table>';
        $('#hotel_info').html(content);
    });
}

Hope this solves your problems!

Collectives™ on Stack Overflow

JavaScript is not updating HTML code using new form values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related