Question

在jQuery方面，我是一个完全的菜鸟。这次我想在用户点击它时填充一个选择框。我设法做到了，但每次用户选择一个选项时，选择框会立即将其值更改回默认值，因此用户无法选择他想要的那个。您可以在下面查看Joomla中使用选择框加载数据库和HTML文件的代码。我知道我做错了什么，但我不确定这是什么......

widget.php - 带查询的Joomla数据库文件

<?php
    // Set flag that this is a parent file.
    define('_JEXEC', 1);
    define('DS', DIRECTORY_SEPARATOR);

    if (file_exists(dirname(__FILE__) . '/defines.php')) {
        include_once dirname(__FILE__) . '/defines.php';
    }

    if (!defined('_JDEFINES')) {
        define('JPATH_BASE', dirname(__FILE__));
        require_once JPATH_BASE.'/includes/defines.php';
    }

    require_once JPATH_BASE.'/includes/framework.php';

    $db = JFactory::getDbo();
    $db2 = JFactory::getDbo();
    $sql = "SELECT id, type, name FROM #__widgetkit_widget WHERE type = 'gallery'";
    $db->setQuery($sql);
    $rows = $db->loadObjectList();
    $query = "SELECT id, b_name, w_id FROM #__yachts WHERE id = ".JRequest::getInt('id')."";
    $db2->setQuery($query);
    $rows2 = $db2->loadObjectList();
    $my_yacht = $rows2[0]->w_id;
    echo '<option value="">-- Please Select --</option>';
    foreach($rows as $row) {
        echo '<option value="'.$row->id.'"';
        if($row->id == $my_yacht) { echo ' selected'; }
            echo '>'.$row->name.'</option>'."\n";
        }
?>

带有JavaScript的HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var j = jQuery.noConflict();
            j(document).ready(function () {
                j("#jform_w_id").click(function () {
                    j("#jform_w_id").load('widget.php');
                });
            });
        </script>
    </head>
    <body>
        <select class="" id="jform_w_id" name="jform[w_id]">
            <option value="">-- Please Select --</option>
            <option value="59">Bavaria 50 Cruiser</option>
            <option value="60">Bavaria 49</option>
        </select>
    </body>
</html>

Answer 1

问题是，每次用户点击widget.php选择框时，您都会从#jform_w_id重新加载选择框。由于您没有先抓住之前选择的项目，因此之前的选择将丢失。

一种解决方案是在加载前存储先前选择的值，然后在加载后重新分配选择，如下所示：

<script type="text/javascript">
    var j = jQuery.noConflict();
    j(document).ready(function () {
        var selectBox = j('#jform_w_id');
        selectBox.click(function () {
            var oldValue = selectBox.val();
            selectBox.load('widget.php');
            selectBox.val(oldValue);
        });
    });
</script>

话虽如此，我不相信这是一个很好的模式，原因如下：

1）每次用户点击该选择时，您都会从服务器重新加载。如果列表很长，您将在用户点击的时间和弹出选择框的时间之间出现明显的延迟。确保您了解每次点击时从服务器加载数据的原因，并确保您的用例确实需要这样做。您可以拥有一个缓存值的进程，并异步地重新填充下拉列表。

2）我还没有对此进行测试，但是点击后重新加载选项框可能导致控件闪烁，失去焦点或其他意外行为。

3）如果您需要支持移动用户，上述问题将因用户界面和带宽限制而加剧。

由于我不了解您的特定用例，这些可能是您已经考虑过的问题，但如果没有，请在制作网页时考虑这些问题。

最后，请考虑更换此行

$query = "SELECT id, b_name, w_id FROM #__yachts WHERE id = ".JRequest::getInt('id')."";

准备好的陈述。虽然您当前正在从请求对象中解析int这一事实可以保护您免受这一用例的SQL注入攻击，但是如果您复制此代码块以供其他地方使用，您会很高兴使用预准备语句WHERE子句参数是一个字符串。准备好的语句的语义将取决于您使用的数据库和Joomla的数据库API，但它通常类似于：

$query = "SELECT id, b_name, w_id FROM #__yachts WHERE id = :id";
$stmt = $dbh->prepare($query);
$stmt->bindParam(':id', JRequest::getInt('id'));
if ($stmt->execute()) {
    while ($row = $stmt->fetch()) {
    ...
    }
}

请参阅：http://us1.php.net/pdo.prepared-statements

点击后jQuery和Joomla更新选择框

1 个答案: