What part am I missing?

fssnerd · December 18, 2011

Hello,

I wanted to learn some Ajax and create a virtual packing list (using PHP and mySQL) which allows auto complete using Ajax. I load the packing list items into a form, then using Ajax, user types in part of all of an item number. As they type, it displays valid items from the packing list using the keys they have typed. I am missing how to get it to jump to an item within the form once they have selected the item. I am missing something fundamental here, I just don't know what. Yes, I am a just a newbie, so please no flames. I am hoping someone can gently point me in the right direction. Thank you.

Code samples:

packinglist.php
<html>
<head>
<title>Store P.O. receiving</title>
<script language="JavaScript" type="text/javascript" src="scripts/suggest.js"></script>
</head>
<body>
<center>
<?php
if (isset($_POST['submit']))
{
echo "Nice Choice!<br>";
}
?>
<form id="suggestSearch" action="<?php $PHP_SELF ?>" method="post">
Item Search: <input type="text" id="poitemcode" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off"/><input type="submit" value="Jump to item">
<div id="layer1"></div><br>
</form>
</center>
<!---------------------------------------------------------------------------->
<?php
include_once "/var/www/database_login.php";
include_once "functions/storepo_functions.php";
if(!($connection = mysql_connect("localhost", "$dbuser", "$dbpass")))
                {
         echo mysql_error() . "\n";
         exit();
                 }
list ($MyLocid, $MyLocation)  = GetLocation();
?>
<center>
<h3>Receive CAM shipment</h3>
<br>
<!----------------------------------------------------------------------------->
<?php
echo "<center><caption> Store# " . $MyLocid . " " . $MyLocation . "\n";
echo date('F d Y @ H:i:s');
?>

<table border="1" cellpadding="5%" cellspacing="0" bgcolor="#FFFFAA">
<tr><th> Item Number </th><th> Description </th><th> Unit </th><th> Remarks </th><th> Sent </th><th> Found </th><th> Part </th><th> All </th></tr>

<?php
if(!($connection = mysql_connect("localhost", "$dbuser", "$dbpass"))){
         echo mysql_error() . "\n";
         exit();
}
  $db_selected = mysql_select_db("intranet");
  $result = mysql_query ("SELECT polocation, podate, ponum, polinenum, poitemcode, poitemdesc, poitemuom, poremarks, poshipqty, porcvqty FROM storepo ORDER BY poitemcode ASC" , $connection);
  while (list($polocation, $podate, $ponum, $polinenum, $poitemcode, $poitemdesc, $poitemuom, $poremarks, $poshipqty, $porcvqty) = mysql_fetch_row($result))
  {
           $pokey = $polocation;
           echo "<tr>" ;
           echo "<td align=center>" . $poitemcode .  "</td><td align=center>" . $poitemdesc . "</td><td align=center>" . $poitemuom . "</td><td align=right>" .  $poremarks . "</td><td align=center>" . $poshipqty . "</td><td align=center>" . $porcvqty . "</td>";
           echo "<td>";
           echo "<form action=\"edit_storepo_item.php\" method=\"post\">" . "<input type=\"submit\" name=\"submit\" value=\"Partial\">" . "<input type=\"hidden\" name=\"pokey\" value=\"$pokey\">" . "<input type=\"hidden\" name=\"action\" value=\"Partial\"></form></td>";
           echo "<td>";
           echo "<form action=\"edit_storepo_item.php\" method=\"post\">" . "<input type=\"submit\" name=\"submit\" value=\"All\">" . "<input type=\"hidden\" name=\"pokey\" value=\"$pokey\">" . "<input type=\"hidden\" name=\"action\" value=\"All\"></form></td>";
           echo "</tr>" ;
   }
mysql_close($connection);
echo "</center></pre></table><hr>";
?>
</body>
</html>

...

       

suggest.js

if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
        } else if(window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
        } else {
                alert("Your Browser Sucks!");
        }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
        if (searchReq.readyState == 4 || searchReq.readyState == 0) {
                var str = escape(document.getElementById('poitemcode').value);
                searchReq.open("GET", 'functions/searchSuggest.php?search=' + str, true);
                searchReq.onreadystatechange = handleSearchSuggest;
                searchReq.send(null);
        }
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
                var ss = document.getElementById('layer1');
                var str1 = document.getElementById('poitemcode');
                var curLeft=0;
                if (str1.offsetParent){
                    while (str1.offsetParent){
                        curLeft += str1.offsetLeft;
                        str1 = str1.offsetParent;
                    }
                }
                var str2 = document.getElementById('poitemcode');
                var curTop=20;
                if (str2.offsetParent){
                    while (str2.offsetParent){
                        curTop += str2.offsetTop;
                        str2 = str2.offsetParent;
                    }
                }
                var str =searchReq.responseText.split("\n");
                if(str.length==1)
                    document.getElementById('layer1').style.visibility = "hidden";
                else
                    ss.setAttribute('style','position:absolute;top:'+curTop+';left:'+curLeft+';width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;');
                ss.innerHTML = '';
                for(i=0; i < str.length - 1; i++) {
                        //Build our element string.  This is cleaner using the DOM, but
                        //IE doesn't support dynamically added attributes.
                        var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                        suggest += 'onmouseout="javascript:suggestOut(this);" ';
                        suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
                        suggest += 'class="small">' + str[i] + '</div>';
                        ss.innerHTML += suggest;
                }
        }
}

//Mouse over function
function suggestOver(div_value) {
        div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
        div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
        document.getElementById('poitemcode').value = value;
        document.getElementById('layer1').innerHTML = '';
        document.getElementById('layer1').style.visibility = "hidden";
}

...

Searchsuggest.php

<?php
//Get our database abstraction file
require('database.php');

if (isset($_GET['search']) && $_GET['search'] != '') {
        //Add slashes to any quotes to avoid SQL problems.
        $search = $_GET['search'];
        $suggest_query = db_query("SELECT distinct(poitemcode) as suggest FROM storepo WHERE poitemcode like('" .$search . "%') ORDER BY poitemcode");
        while($suggest = db_fetch_array($suggest_query)) {
                echo $suggest['suggest'] . "\n";
        }
}
?>

scootstah · December 19, 2011

What do you mean by "jump to an item"?

fssnerd · December 21, 2011

Thanks for the reply! The form represents a very long packing list for a shipment. My desire is to use the Ajax/autocomplete function to place the user at the item within the form. If this were a non-Ajax project, I would have the form call itself with submit 'SELF', etc and then have it jump to the item using some anchors within the form.

I am missing something fundamental in how to implement the Ajax function to help the user navigate to the item within the very long form.

Thanks in advance for any advice/direction!

Sign In

What part am I missing?

Recommended Posts

fssnerd

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

fssnerd

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information