ansaurus

Question

Proper way of lazy-loading a single select box options via ajax once clicked.

Answer 1

A:

Some ideas:

Don't use standard html select boxes - your application doesn't degrade gracefully eitherway.
Use some clickjacking - have a transparent div OVER selet box - problems with IE
Use a checbox to allow "non standard" answer, which would populate the select box and make it clickable (not disabled)
My favourite: cache query results and populate the select box right away. Give another "referesh options" button near the select box to reload options thru AJAX.

hegemon 2009-05-29 06:31:14

I discard caching due it should display fresh data. I would go with the clickjacking hack but it feels like dirty so I guess I'm just going to use a standard button and replace it with the "fresh" select box once clicked.

knoopx 2009-05-29 10:20:04

Answer 2

+1 A:

As usual, the bad browser here is IE 6 and below because it has this readonly thing on the select options so the only way to handle it is replacing the entire select.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>lazy loading thing</title>
     <script src="js/jquery.js" type="text/javascript"></script>
     <script src="js/script.js" type="text/javascript"></script>
    </head>
    <body>
     <form>
      <p>
       <span id="replaceMe"><select name="drinks">
        <option>oh well... click me...</option>
       </select></span>
      </p>
     </form>
    </body>
</html>

script.js

$(function() {
     $('#replaceMe').one('click', replaceIt);
});

function replaceIt(e) {
    $(this).html('now wait...');
    $.post('options.php', {}, replaceItHandler, 'json');
}

function replaceItHandler(options) {
    var select = '<select name="drinks">';
    $.each(options, function(i, option) {
     select += '<option value="' + option.data + '">' + option.label + '</option>';
    });
    select += '</select>';
    $('#replaceMe').html(select);
}

options.php

<?php
$options[] = array('data' => 0, 'label' => 'Water');
$options[] = array('data' => 0, 'label' => 'Wine');
$options[] = array('data' => 0, 'label' => 'Beer');
$options[] = array('data' => 0, 'label' => 'Coke');
echo json_encode($options);
?>

And obviusly you can use PHP or whatever and JSON like this or send the entire select, it's your choice.

coma 2009-05-29 06:50:50

Well it worked on ie8, the only browsers not working were webkit-based ones (chrome and safari). Replacing the whole select box is an idea but I rather show a button and on click it replace it with the select box. I didn't wanted to use extra html elements in order to load the contents of the select box but I guess there is no other way while using standard html select box.

knoopx 2009-05-29 10:16:06

is working in my Google Chrome (1.0.154.65) and even in Opera (9.64), I just tested a minute ago.

coma 2009-05-29 16:46:33

Answer 3

A:

Hi!

On Safari the problem is the onclick event it should be onchange.

see here the solution: http://munteanutraian.info/forum/?p=5

Best, Traian

Traian 2010-09-05 09:19:10

ansaurus

tags:

views:

answers:

Proper way of lazy-loading a single select box options via ajax once clicked.

related questions