kjtocool

Whew! It took a while, but I finished all the enhancements and upgrades. What's left is a very simple, streamlined AJAX Suggest example which mimics the functionality of Google Suggest. The only thing it doesn't do is auto submit when a user selects a suggestion, that will get added in the near future. Regardless, I handled all the events: arrow up key, arrow down key, tab, etc ... the whole 9 yards. I figured I would write a tutorial on the process since it was all such a learning experience, it includes a link to download all the files if you're so inclined. http://www.xtinctdesigns.com/tutorials.php

Basically, I have an empty div. I then use javascript to fill it with content. As of now, when it is filled, the div bumps everything below it down. Instead, I want it to overlap what's below it, and have what's below it stay right where it was, with some of it now being hidden. An example is google suggest, when you type something, the suggestions overlap the buttons. Any help is much appreciated!

Hello everyone, I have a bit of a problem. I am writing a custom ajax suggest box, and running into problems making it compatiable with Mozilla. The events I use are as follows: Body: onclick="emptySuggestions();" - This event simply clears out the div tag containing the suggestions. onkeydown="handleTab(event)" - This event handles a user hitting the "tab" key, if there are suggestions, it then empties them. Input Text Box: onfocus="resetCurrentLi()" - This event resets the current <li> of the <ul> to nothing on focus. onkeyup="handleInput(event, this.value);" - This event does the heavy lifting, sending the users input on each keyup event. Each LI: onmouseenter=\"newCurrentLi(this.value, '" + escape(split) + "');\" - This html is all generated via javascript, thus the escapes. Essentially, onmouseenter it fires with the number of the li on a zero based index, and the text in the li. Obviously, this doesn't work in FireFox! onclick=\"emptySuggestions();\" - This empties the suggestions, since one was clicked. Everything is working great .... in IE. In mozilla, all the rollover events based on the "mouseenter" don't work. Can someone advise me on an equivalent event, because I can't seem to find a workaround.

dear sir, relying on others to write the code for you without so much as an attempt to solve the problem on your own will generally not fly.

Yep, thanks guys for your help. The solution was with the flags I mentioned above, and mentioned in the thread zanus linked too. What I did was put an onclick="testFocus();" event on the BODY tag. Thankfully, this fires AFTER the onclick="correct()" function of each LI in the suggestion box. Because it fires after, what I was able to do was: Anytime the xmlHttp object hits readyState 4, I turn a suggestionsShown variable to true. Anytime the correct() function is called, which happens if the user clicks a suggestion, I set the variable back to false. Thus, since the body onclick fires second, if the flag is true, the testFocus() function simply empties the suggestions, and walla, it all works perfectly. There are a few minor tweaks to make yet, I want to handle the mouseup, mousedown events, throttle the function for fast typers, as well as a few other small issues. I'll be sure to post my code on completion.

it clearly doesn't have focus. I will play with it more tomorrow, at least now I have a few ideas to go with.

Heh, Yeah, it plops the word in just fine, it's just if you click elsewhere on the page, and want the suggestions to disappear, they stay there until you click one!

Zanus, I just tested it in both IE and Firefox, putting the onblur="lostFocus()" on the div doesn't work. The div never notices a loss of focus, and just remains open exactly like the first example. Example of this attempt: Link

Well, it makes sense in my head ... but I've never done that before. How would you go about it? /** * Called when text box loses focus (currently not used) * -- Clears the suggestion div */ function lostFocus() { if(document.getElementById("suggestions").????) { document.getElementById("suggestions").innerHTML = ""; } } I just don't know how to find out if the div has focus / has been clicked. The only way I can think of is to have each div have an onfocus() and onblur() function, which would then set a variable which you could then test in the lostFocus() function ... like so: isFocused=false; elem.onfocus=function(){isFocused=true} elem.onblur=function(){isFocused=false} What worries me then is that, since both the div and textbox could theoretically have focus, if I clicked out of both while they both had focus ... which onblur() function would fire first?

I've tried that. If I do that, as described above, you then can't select one of the 'suggestions.' This happens because the onblur event fires before the onclick event of the suggestion, which then sets the div to "", clearing the suggestions and forgetting about the users click! I've added an example of what happens with that code, you can find it here: Link

Hi all, I am trying to build a custom AJAX suggestion text box, the idea being that as a user types, the box will query a database and return matching results. I am running into an issue, basically, the suggestions get populated properly, but when the box is showing results and the user clicks away from the search box, the suggestions remain! I can't find a feasible way to remove them. I have tried a onblur="removeSuggestions()" call on the textbox. The call will work fine, but onblur executes before the onclick event in the div that holds the suggestions. So, it gets rid of the suggestions and discounts the users click, since it caused the text box to lose focus, and that event fires first. I am very new to AJAX, and this if my first real go at it, so I'm sure this is a silly problem. Any help would be appreciated. Example of the box not going away (no onblur event in this example, so the suggestions just stay): Link JS Code var xmlHttp; /** * Called initially * ## Calls GetXmlHttpObject() * ## Calls stateChanged() * -- Creates and sends the xmlHttp object * * @param {String} userInput the input the user types in the search box */ function suggest(userInput) { if (userInput.length == 0) { document.getElementById("suggestions").innerHTML = ""; return; } xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Your browser does not support this application. Please update to a newer version."); return; } var url = "database.php?query=" + userInput + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true); xmlHttp.send(null); } /** * Called by stateChanged() * ## Calls trim() * -- Handles the onclick event for when a suggestion is clicked * * @param {Object} userInput the input the user types in the search box */ function correct(userInput) { document.getElementById("inputtext").value = trim(userInput); document.getElementById("suggestions").style.display = 'none'; // Removing the suggestions? } /** * Called when text box loses focus (currently not used) * -- Clears the suggestion div */ function lostFocus() { document.getElementById("suggestions").innerHTML = ""; } /** * Called by suggest() * -- Handles a change in the state of xmlHttp object * -- Splits all returned results on "," and returns them in an UL */ function stateChanged() { if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { var split = xmlHttp.responseText.split(","); var suggestionList = ""; if(split[0] != "") { for(var i = 0; i < split.length; i++) { suggestionList += "<li><a href=\"#\" onclick=\"javascript: correct('" + split[i] + "');\"> " + split[i] + "</a></li>"; } if(suggestionList != "") { suggestionList = "<ul>" + suggestionList; suggestionList += "</ul>"; } } document.getElementById("suggestions").innerHTML = suggestionList; document.getElementById("suggestions").style.display = 'block'; } } /** * Called by suggest() * -- Creates and returns the xmlHttp object */ function GetXmlHttpObject() { var xmlHttp = null; try { xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer } } return xmlHttp; } /** * Called by stateChanged() * -- Trims the whitespace from a string * * @param {String} str the string to trim */ function trim(str) { if (str != null) { var i; for (i = 0; i < str.length; i++) { if (str.charAt(i) != " ") { str = str.substring(i, str.length); break; } } for (i = str.length - 1; i >= 0; i--) { if (str.charAt(i)!= " ") { str = str.substring(0, i + 1); break; } } if (str.charAt(0) == " ") { return ""; } else { return str; } } return null; } HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="suggest.js"> </script> <script type="text/javascript"> function test() { alert("test") } </script> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <title>Auto Suggest Example</title> </head> <body> <form action="#" method="post" > <table border="0" cellpadding="0" cellspacing="0" align="center" style="width: 80%"> <tr> <td> <input type="text" id="inputtext" onkeyup="suggest(this.value)" autocomplete="off" class="style1" /> <input type="submit" name="submit" value="Search" class="style1" /> <br /> <div id="suggestions" style="display: block"> </div> </td> </tr> <tr> <td height="25" class="style1"> Version 1.0.24 </td> </tr> </table> </form> </body> </html>

It's always something easy! Thanks, much appreciated.

I had tried it that way originally, it blows up too: SELECT a.userID, Date_Format(a.date, % M % D, % Y ) AS theDate, a.review, b.typeName, c.name AS grade, d.movieName, d.year FROM myCinema_Reviews a, myCinema_Types b, myCinema_Grades c, myCinema_Movies d WHERE reviewID = '2' AND a.typeID = b.typeID AND a.grade = c.id AND a.movieID = d.movieID MySQL said: Documentation #1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '%M %D, %Y) AS theDate, a.review, b.typeName, c.name AS grade, d.movieName, d.yea' at line 1

Hello, I am trying to format a date, but failing miserably. I've never worked with SQL Date formating, so it's likely I'm doing something silly, and couldn't find an answer on my own. Any help is greatly appreciated. The Query: SELECT a.userID, Date_Format( 'a.date', %M %D, %Y) AS theDate, a.review, b.typeName, c.name AS grade, d.movieName, d.year FROM myCinema_Reviews a, myCinema_Types b, myCinema_Grades c, myCinema_Movies d WHERE reviewID = '2' AND a.typeID = b.typeID AND a.grade = c.id AND a.movieID = d.movieID I basically want a.date converted from 'yyyy-mm-dd' (stored in the DB as type date) to something like: October 21, 2008 Thanks again for any help.

eval does exactly what your method did, I used it only because I knew it worked and was unaware of the other option. Your way is surely more efficient, thanks for the tip! As for the real issue, it worked like a charm, thank you a ton!

How do you do this? I am basically trying to use javascript to re-set the selected value of a html dropdown box. How can I do this? var dropdown = eval("movie_rankings.movie_" + old_rank + "_rank"); dropdown.option[0] = ?? Something along those lines?

Good deal! Thanks, I'll try that tonight.

So ... doing a little research, the best option I could come up with was: function setMovieNames() { with (document.form1) { textfield.value = "New"; } } First off I had to modify the function like above. Secondly I had to make all the fields I wanted to update text fields. And lastly I had to modify the css so that the text boxes are essentially invisible (no background or border). .textbox { background:none; border:none; } I'll continue working, if I find any other ways, I'll update. Please feel free to give any input, I'm pretty new to javascript.

This may be a simple question: How do I refresh the variables on a web page, without re-loading the rest of the page? For example: Say I have this in the head: <script language="javascript" type="text/javascript"> <!-- var movie_1 = "Movie 1"; var movie_2 = "Movie 2"; var movie_3 = "Movie 3"; var movie_4 = "Movie 4"; var movie_5 = "Movie 5"; function setMovieNames() { movie_1 = "Movie 7"; movie_2 = "Movie 2"; movie_3 = "Movie 3"; movie_4 = "Movie 4"; movie_5 = "Movie 5"; } //--> </script> And then something like this in the Body: <script language="javascript" type="text/javascript"> <!-- Prints the #1 Movie Name document.write(movie_1); //--> </script> <script language="javascript" type="text/javascript"> <!-- Prints the #2 Movie Name document.write(movie_2); //--> </script> <script language="javascript" type="text/javascript"> <!-- Prints the #3 Movie Name document.write(movie_3); //--> </script> <script language="javascript" type="text/javascript"> <!-- Prints the #4 Movie Name document.write(movie_4); //--> </script> <script language="javascript" type="text/javascript"> <!-- Prints the #5 Movie Name document.write(movie_5); //--> </script> How do I get it so that the web page will update those variables anytime the function to set the names is called?

Table data looks something like so: prod_id - ver_id - total_num 1 - 11 - 34 1 - 11 - 28 1 - 11 - 45 1 - 12 - 27 1 - 12 - 87 1 - 14 - 97 1 - 14 - 28 2 - 11 - 28 2 - 11 - 76 2 - 12 - 87 and so on. Essentially what I want to return is: 1 - 11 - Sum of all 1 - 12 - Sum of all 1 - 14 - Sum of all 2 - 11 - Sum of all 2 - 12 - Sum of all How would I go about this? Select prod_id, ver_id, SUM(total_num) Group By ver_id, prod_id?

Thanks for your help Andy, that seems to do the trick.

Problem is, the site is centered, so that leaves the image aligned to the left, and the site aligned to the center. Any way to get it to stop scrolling while being centered aligned horizontally?

I have a huge background image, and the site is centered over it. Whenever the site scrolls, the stupid BG starts to scroll down from the top, but all I want it to do is stay fixed vertically. How can I do this? Currently I use the following style: body { background-position: center; background-color: #000000; background-image: url(images/bg.jpg); background-repeat: no-repeat; margin-top: 200px; }

Heh, you're too advanced for me, I don't know what that is. ???

Because I want a result that excludes anything starting with a letter.