Hi all,
I am very new to Javascript and have only started playing with jquery recently. I have a Javascript function that while used on its own within my project, works flawlessly. as below.. * UPDATE * these 2 functions are declared after the <input> tag and still throw the same error document.getElementById("name_first") is null when i add the jquery code.
<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>
However, when i add my jquery to the same element my existing javascript function returns the error : document.getElementById("name_first") is null
The Jquery function works fine and is declared as below.
<script type="text/javascript">
$(document).ready(function() {
$("input[type=text]").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});
});
</script>
:::::UPDATE::::::
I call the printSymbol function from a flash keyboard with the following Actionscript code, which works fine.
getURL("javascript:printSymbol('" + evnt.data + "');");
I have tried as suggested earlier to do this using only jquery functions as below.
<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>
However i do not know if this is working as i cant call these functions with my current Flash keyboard that is using : getURL("javascript:printSymbol('" + evnt.data + "');"); to call. How would i externally call the new jquery functions?
Hope this is a little more informative for u guys, and thanks very much for your help so far :).
UPDATE
Please see below the fully updated code with some updates ( including 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>
NEW UPDATE USING AUTOCOMPLETE FROM BASSISTANCE.
Code im now using with autcomplete plugin ( NOT ) autosuggest anymore.
<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>
The function of the auto complete works fine pulling data from database etc while using normal keyboard.
When using my on screen keyboard that uses the printSymbol function, the text is entered into the text field, BUT it does not trigger the autocomplete.... confused
It seems like this autocomplete plugin must use the keypress function to operate, so stumped again i think.
UPDATE OF jQuery function ( not working )
<script>
$(document).ready(function() {
$('.selector').bind('autocompletechange', function(event, ui) {
$("#name_first").change().autocomplete("data_search.php", {
width: 260,
selectFirst: false
});
});
});
</script>
UPDATE using http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js
Code used
<script>
$(document).ready(function() {
$("input").autocomplete({
source: "search_data.php"});
});
</script>
Again the function works with normal keyboard, but the input from the on screen keyboard does not trigger :( using keypress i guess again.