点击jQuery和Joomla更新选择框

当谈到jQuery时，我总是小菜一碟。这次我想在用户点击时填充选择框。我设法做到了这一点，但每当用户选择一个选项时，选择框会立即将其值恢复为默认值，因此用户无法选择他想要的选项。您可以在下面查看Joomla的代码，该代码用选择框加载数据库和HTML文件。我知道我做错了什么，但我不知道这是什么...点击jQuery和Joomla更新选择框

widget.php - 与查询

<?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文件的Joomla数据库文件：

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

来源

2014-01-08 Panos

的问题是，你从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

来源

2014-01-08 16:26:59 Palpatim

好吧，看来它不工作...检查你自己的行动：http：//www.cre8.gr/box.php。至于准备好的声明，谢谢你！我一定会用准备好的语句改变所有的查询！ – Panos

不好意思：'select'元素没有按照预期对'click'事件做出响应：http://forum.jquery.com/topic/problem-with-click-on-select-boxes-webkit。尝试使用'focus'处理程序来代替：'selectBox.focus（function（）{...'但是：确保您没有在处理程序中执行任何操作以从元素中移除焦点，否则您会陷入一个丑陋的循环。 – Palpatim

点击jQuery和Joomla更新选择框

回答

相关问题