Jump to content

What part am I missing?


fssnerd

Recommended Posts

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";
        }
}
?>

 

Link to comment
https://forums.phpfreaks.com/topic/253411-what-part-am-i-missing/
Share on other sites

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!

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.