jQuery和Joomla在单击时更新选择框

Question

I'm a total noob when it comes to jQuery. 关于jQuery，我真是个菜鸟。 This time I would like to populate a select box when a user clicks it. 这次，我想在用户单击时填充选择框。 I managed to do that, but each time the user selects an option the select box instantly changes it's value back to default, so the user can't select the one he wants. 我设法做到了，但是每次用户选择一个选项时，选择框都会立即将其值改回默认值，因此用户无法选择他想要的那个。 Below you can view the code from Joomla that loads the database and the HTML file with the select box. 在下面，您可以从Joomla查看用于加载数据库和带有选择框的HTML文件的代码。 I know I'm doing something wrong but I'm not sure what this is... 我知道我做错了什么，但是我不确定这是什么...

widget.php - Joomla Database file with query 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";
        }
?>

And the HTML file with the JavaScript: 以及带有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

The problem is that you're reloading the select box from widget.php every time a user clicks on the #jform_w_id select box. 问题在于，每当用户单击#jform_w_id选择框时，您都要从widget.php重新加载选择框。 Since you aren't first grabbing the previously selected item, the previous selection is lost. 由于您不是先抓取先前选择的项目，因此先前的选择将丢失。

One solution is to store off the previously selected value before loading, then reassign the selection after loading, like so: 一种解决方案是在加载之前存储先前选择的值，然后在加载之后重新分配选择，如下所示：

<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>

With that said, I'm not convinced this is a good pattern, for a few reasons: 话虽如此，由于以下几个原因，我不认为这是一个好的模式：

1) You're reloading from the server every time the user clicks that select. 1）每次用户单击所选内容时，您将从服务器重新加载。 If the list is long, you're going to have a noticeable lag between the time the user clicks and the time the select box pops up. 如果列表很长，您将在用户单击的时间和选择框弹出的时间之间有明显的滞后。 Make sure you understand why you are loading the data from the server every time there's a click, and make sure your use case really requires that. 确保您了解每次单击都会从服务器加载数据的原因，并确保用例确实需要这样做。 You may be able to have a process that caches the values and repopulates the dropdown asynchronously. 您可能可以使用一个进程来缓存值并异步地重新填充下拉列表。

2) I haven't tested this, but it's possible that reloading the options box after clicking could cause the control to flicker, lose focus, or other unexpected behavior. 2）我还没有测试过，但是单击后重新加载选项框可能导致控件闪烁，失去焦点或其他意外行为。

3) If you need to support mobile users, the above issues will be exacerbated by UI and bandwidth constraints. 3）如果您需要支持移动用户，则UI和带宽限制将加剧上述问题。

Since I don't know your particular use case, these may be concerns you've already thought of, but if not, please consider them as you craft your page. 由于我不知道您的特定用例，因此您可能已经想到了这些问题，如果没有，请在制作页面时考虑它们。

Finally, please consider replacing this line 最后，请考虑替换此行

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

with a prepared statement. 有准备好的陈述。 While the fact that you're currently parsing an int from the request object protects you from SQL injection attacks for this one use case, you'll glad you used prepared statements if you copy this chunk of code for use elsewhere where the WHERE clause parameter is a string. 尽管您当前正在从请求对象中解析一个int的事实可以保护您免受此用例的SQL注入攻击，但如果将这段代码复制到WHERE子句参数的其他地方使用，您会很高兴使用准备好的语句是一个字符串。 The semantics of prepared statements will depend on the DB you're using and Joomla's database API, but it's usually something like: 准备好的语句的语义将取决于您使用的数据库和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()) {
    ...
    }
}

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

jQuery和Joomla在单击时更新选择框

问题描述

1 个解决方案

解决方案1
0 2014-01-08 16:26:59

jQuery和Joomla在单击时更新选择框

问题描述

1 个解决方案

解决方案1 0 2014-01-08 16:26:59

解决方案1
0 2014-01-08 16:26:59