使用Jquery时,javascript函数出现问题

3

我对Javascript非常陌生,最近才开始尝试使用jquery。 我有一个Javascript函数,当它在我的项目中单独使用时,可以完美地运行。如下所示... *更新*这两个函数在<input>标签之后声明,但添加了jquery代码后仍然抛出相同的错误document.getElementById("name_first")为null

<script type="text/javascript">

function printSymbol(symbol) {  document.getElementById('name_first').value
+= symbol; };

function deleteSymbol() {  document.getElementById('name_first').value
= document.getElementById('name_first').value.substr(0, document.getElementById('name_first').value.length
- 1); };

</script>

然而,当我将我的jQuery添加到相同的元素中时,我的现有JavaScript函数返回错误:document.getElementById("name_first")为空。

这个jQuery函数可以正常工作,并声明如下。

<script type="text/javascript">
$(document).ready(function() {

$("input[type=text]").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});

});
</script>

:::::更新::::::

我使用以下Actionscript代码从Flash键盘调用printSymbol函数,这个方法运行良好。

getURL("javascript:printSymbol('" + evnt.data + "');");

我已经按照之前建议的方法尝试使用以下jQuery函数来完成此操作。

<script type="text/javascript">
$(document).ready(function() {

$("input[type=text]").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});

function printSymbol(symbol) {
    $('name_first').append(symbol)
};

function deleteSymbol() {
    $('name_first').text( $('name_first').text().substr(0, $('#name_first').text().length - 1))
};
});
</script>

然而,我不知道这是否有效,因为我无法使用当前使用getURL("javascript:printSymbol('" + evnt.data + "');");调用的Flash键盘来调用这些函数。我该如何外部调用新的jQuery函数?
希望这对您有所帮助,非常感谢您迄今为止的帮助:)
更新:
请参见下面的完整更新代码(包括HTML)。
<?php session_start(); ?>
<?php require_once('Connections/db.php'); ?>


          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
          <html>
          <head>
          <title>None</title>
          <!-- Include Javascript functions and css files -->
          <link href="autoSuggest.css" rel="stylesheet" type="text/css" />
          <script type="text/javascript" src="jquery.js"</script>
          <script type="text/javascript" src="jquery.autoSuggest.js"</script>

            <script type="text/javascript">
            $(document).ready(function() {
            $("#name_first").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});
             });
            </script>

          </head>

          <body>

          <form action="" method="get" name="form1" target="_self" id="form1">
          <input name="name_first" type="text" id="name_first" value="" size="25" maxlength="50" />
          </form>

<script type="text/javascript"> 

function printSymbol(symbol) {  
$("#name_first").val($("#name_first").val() + symbol); 
} 

function deleteSymbol() {  
$("#name_first").val($("#name_first").val().substr(0,$("#name_first").val().length 
- 1)); 
} 

</script>


     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="582" height="241">
    <param name="movie" value="images/KB_NoNum.swf" />
    <param name="quality" value="high" />
      <embed src="media/KB_With_Space.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="582" height="241">  </embed>
    </object>
    </body> 
    </html>

使用BASSISTANCE的自动完成进行新更新。

我现在使用的代码是带有自动完成插件的(不再是autosuggest)。

  <script>
  $().ready(function() {
    $("#name_first").change().autocomplete("data_search.php", {
        width: 260,
        selectFirst: false
    });
   });

  </script>

<script type="text/javascript"> 

function printSymbol(symbol) {  
$("#name_first").val($("#name_first").val() + symbol); 
} 

function deleteSymbol() {  
$("#name_first").val($("#name_first").val().substr(0,$("#name_first").val().length 
- 1)); 
} 

</script>

当使用普通键盘时,自动完成功能可以很好地从数据库中提取数据。

但是,当使用我的屏幕键盘并调用printSymbol函数时,文本会输入到文本字段中,它不会触发自动完成......困惑

看起来这个自动完成插件必须使用keypress函数才能操作,所以我又陷入了困境。

jQuery函数的更新(不起作用)

    <script>
  $(document).ready(function() {
   $('.selector').bind('autocompletechange', function(event, ui) {
    $("#name_first").change().autocomplete("data_search.php", {
        width: 260,
        selectFirst: false
    });
   });
   });

  </script>

使用http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js进行更新

所使用的代码

    <script>
  $(document).ready(function() {
    $("input").autocomplete({
     source: "search_data.php"});

   });
  </script>

这个函数可以正常使用物理键盘,但是来自屏幕键盘的输入不能触发它:(我猜想需要使用keypress事件。


@Matthew,你能同时发布HTML和更新后的javascript/jquery吗? - ant
@Matthew,这应该可以正常工作,我认为有问题的是当你使用键盘时,你说一切都正常,只是在使用闪存键盘时不行...也许是因为自动建议在按键时触发...也许你应该编辑脚本以在更改时触发,而不是在按键时触发...或者为什么不使用其他方法。我使用http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/,也许你可以试试。 - ant
同志,这正是我担心的结果。我猜想将 on keypress 更改为 onchange 有点超出我的能力范围了吗?我喜欢当前这个的视觉效果,但我可能不得不放弃它,看看你所慷慨建议的那个。 - user279350
如果你编辑jquery.autoSuggest.js并将第140行从}).keydown(function(e) {改为}).change(function(e) {,那可能会起作用... - Blair McMillan
Blair/c0mrade非常感谢你们的帮助,我会尝试一下你们提出的建议,并看看效果如何。如果在此期间你们有任何想法,那太棒了 :)再次感谢你们。/我会一直摆弄到脑袋爆炸 :) - user279350
显示剩余2条评论
4个回答

1
你确定你没有改变表单吗?也许你从输入框中删除了id?应该是这样的:
<input type="text" name="name_first" id="name_first" />

错误提示表明要么 id 属性现在丢失了,要么不再是 "name_first"。
jQuery 正常工作是因为它匹配所有 type="text" 的 input 标签。
所以, 匹配您的 jQuery 选择器,但不匹配 document.getElementById('name_first') 选择器。

============================================

编辑以下更新

看起来自动建议只在onKeyDown事件上运行,但由于您正在更改值而不是输入到输入框中,因此该事件从未被调用。

我曾经需要使用屏幕上的JavaScript键盘来使自动完成框工作,并且最终不得不手动调用每个按键“press”上的自动完成。对不起,我现在没有访问该代码(我不再在那里工作)。

您需要做的是找到一个可以正确处理通过JavaScript更改的值的自动完成(不太可能),或者弄清楚如何手动调用自动完成。

要做到这一点,请首先为输入字段设置默认值(以节省时间),然后开始尝试使用Firebug控制台(您可以在其中输入JavaScript命令)来确定需要发送以触发自动完成的内容。从输入keyChange()并按Enter键开始(这是自动完成中包含的函数名称)。看看是否会发生任何事情。其他人可能能够评论您是否可以在外部调用jQuery扩展功能(Google也可能知道)。

至于为什么您的<input>标记没有更新,请在printSymbol函数内添加一些console.log()调用。例如:

function printSymbol(symbol) {
    console.log('symbol received: ' + symbol);
    console.log('name_first.val (pre): ' + $("#name_first").val());
    $("#name_first").val($("#name_first").val() + symbol); 
    console.log('name_first.val (post): ' + $("#name_first").val());
} 

应该能帮助你弄清楚发生了什么。如果它们看起来都正确,那么自动完成可能会再次重置值。


嗨,我自己尝试了一下,但是无济于事,ID已经被完全设置了 :( <input name="name_first" type="text" class="centertext" id="name_first" value="" size="25" maxlength="50" /> - user279350
哦,亲爱的,哈哈。好的,谢谢你所有的建议,我会去尝试直到我的大脑爆炸 :)再次感谢,Blair。 - user279350

1

在编程中,你应该将你的函数/方法放在$(document).ready(function()之前或之后,而不是里面。然而,对于autosuggest,你应该将其放在里面。

你尝试过和jquery一起这样做吗:

<script type="text/javascript"> 

function printSymbol(symbol) {  
$("#name_first").val($("#name_first").val() + symbol); 
} 

function deleteSymbol() {  
$("#name_first").val($("#name_first").val().substr(0,$("#name_first").val().length 
- 1)); 
} 

</script>

既然你已经切换到自动完成,我或许能帮到你。你不需要修改jQuery插件本身,可以查看演示示例,查看页面源代码,例如:

$("#suggest1").focus().autocomplete(cities);

当焦点聚集在输入框id为suggest1上时,此代码将自动填充该输入框。城市数组在页面的某处定义,您可以更改它以使用静态数据。此插件演示页面上的数据称为localdata.js,请查看它。

但是,如果您有动态数据,则可以使用以下代码:

$("#singleBirdRemote").change().autocomplete("search.php", {
        width: 260,
        selectFirst: false
    });

或者你可以使用焦点或其他什么方式...我的时间很短,我需要走了...希望这有所帮助。

试试这个:

 <script>
  $(document).ready(function() {
   $('.selector').bind('autocompletechange', function(event, ui) {
  ...
   });
   });

  </script>

@Matthew,你传递给函数printSymbol的参数是什么?能否提供一个简单的输入输出示例?如果没有这些函数,自动建议是否可以正常工作? - ant
@Matthew 好的,那么你想要实现什么,可以给我一个简单的输入和输出吗?我真的不明白...我尝试过了。 - ant
onChange和OnFocus是错误的语法.. 正确的语法是 $("#singleBirdRemote").change().autocomplete("search.php", { width: 260, selectFirst: false }); 或者是 $("#singleBirdRemote").focus().autocomplete("search.php", { width: 260, selectFirst: false }); - ant
嗨,同志们,我已经按照建议完成了,并在原始问题的末尾发布了我的代码。但是,printSymbol仍然没有触发自动完成功能,但在键入时文本确实输入到文本字段中... 困惑 - user279350
你按照我写的做了吗?你是否检查了最新更新和jQuery API文档中的“尝试这个”:http://docs.jquery.com/UI/Autocomplete - ant
显示剩余8条评论

0
你是否在使用 document.ready?如果没有,请将你的 jQuery 代码包裹在这段代码中。
$(document).ready(function() {

.... Jquery code goes here 


});

编辑

function printSymbol(symbol) {
    $('#name_first').append(symbol);
}

function deleteSymbol() {
    $('#name_first').text( $('name_first').text().substr(0, $('#name_first').text().length - 1);
}

是的,根据最初发布的代码,Jquery代码被包含在文档就绪函数中,并且Jquery函数本身正在工作。现在我的普通JavaScript函数不再起作用了,这个函数没有被包含在Jquery文档准备好的函数中。 - user279350
尝试在你的函数中使用jQuery,检查我的答案编辑!! - trrrrrrm
普通的JavaScript函数是否在<head>标签中?如果是,并且它不在jQuery文档准备好的函数内部,则您正在尝试在实际存在之前访问<input>标记(DOM尚未加载)。将普通的JavaScript放入文档就绪函数中(无论是jQuery还是搜索替代方法),或将普通的JavaScript<script>块移动到<input>标记之后。或者,如From.ME.to.YOU所添加的那样,将普通的JavaScript转换为jQuery等效项(并放入文档准备好的函数中)。 - Blair McMillan
printSymbol在哪里被调用(哪些代码行中有printSymbol - 更新您的问题并包含此信息,因为这样更容易格式化)?您应该确认以下事项:1. printSymbol/deleteSymbol被调用的位置要么在jQuery文档准备好后,要么在<input>标签之后。2. printSymbol/deleteSymbol函数在jQuery文档准备好函数之外。 - Blair McMillan
@Matthew 看看这个:http://docs.jquery.com/UI/Autocomplete,然后看看我的更新答案。 - ant
显示剩余7条评论

0

我曾经遇到过这种奇怪的问题,当函数没有终止分号时,例如:

<script type="text/javascript"> 

function printSymbol(symbol) {  document.getElementById('name_first').value 
+= symbol; }; 

function deleteSymbol() {  document.getElementById('name_first').value 
= document.getElementById('name_first').value.substr(0, document.getElementById('name_first').value.length 
- 1); }; 

</script>

谢谢您的建议,但恐怕没有成功 :( - user279350

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接