Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> advAjax - suggestion, ocenka + pomoc
JaRoPHP
post
Post #1





Grupa: Zarejestrowani
Postów: 675
Pomógł: 15
Dołączył: 7.11.2004
Skąd: Katowice

Ostrzeżenie: (0%)
-----

WITAM!!!

Widziałem kilka projektów AJAX typu suggestion tool i sam postanowiłem zbudować podobny w oparciu o bibliotekę advAJAX.
Działanie jest proste - użytkownik wpisuje słowo, jeśli w bazie danych są podobne, to wyświetlane jest okno podpowiedzi, jesli nie,
to musi sam dokończyć wpisywanie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . Następnie słowo to dodawane jest do bd (jeśli go nie było).
Efekt pracy przedstawię poniżej, ale nie jest to w 100% działający projekt, ponieważ po wyborze słowa (jak są polskie litery, np. brązowy),
a następnie skasowaniu z niego kilku ostatnich liter - w oknie podpowiedzi nie wyświetla się nic, dopóki są polskie litery (miły wyjątek stanowi przeglądarka IE).
Jak ktoś będzie wiedział jak to rozwiazać to proszę, oraz proszę o wypowiedzenie się na temat tego "narzędzia"...

Pliki wchodzące w skład projektu:

Oczywiście wymagany jest plik advajax.js

Baza danych z której są pobierane słowa:
[SQL] pobierz, plaintext 
  1. CREATE TABLE words
  2. (
  3. id int AUTO_INCREMENT,
  4. value varchar(50),
  5. PRIMARY KEY (id)
  6. )type=MyISAM;
  7.  
  8. INSERT 
  9. INTO words
  10.  VALUES("1", "czerwony");
  11. INSERT 
  12. INTO words
  13.  VALUES("2", "pomarańczowy");
  14. INSERT 
  15. INTO words
  16.  VALUES("3", "żółty");
  17. INSERT 
  18. INTO words
  19.  VALUES("4", "zielony");
  20. INSERT 
  21. INTO words
  22.  VALUES("5", "niebieski");
  23. INSERT 
  24. INTO words
  25.  VALUES("6", "błękitny");
  26. INSERT 
  27. INTO words
  28.  VALUES("7", "fioletowy");
  29. INSERT 
  30. INTO words
  31.  VALUES("8", "brązowy");
  32. INSERT 
  33. INTO words
  34.  VALUES("9", "czarny");
  35. INSERT 
  36. INTO words
  37.  VALUES("10", "piaskowy");
  38. INSERT 
  39. INTO words
  40.  VALUES("11", "granatowy");
  41. INSERT 
  42. INTO words
  43.  VALUES("12", "seledynowy");
  44. INSERT 
  45. INTO words
  46.  VALUES("13", "biały");
  47. INSERT 
  48. INTO words
  49.  VALUES("14", "purpurowy");
  50. INSERT 
  51. INTO words
  52.  VALUES("15", "różowy");
  53. INSERT 
  54. INTO words
  55.  VALUES("16", "szary");
  56. INSERT 
  57. INTO words
  58.  VALUES("17", "srebrny");
[SQL] pobierz, plaintext

Plik start.html zawierający prosty formularz:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Suggestion advAjax</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  6. <script type="text/javascript" src="advajax.js"></script>
  7. <script type="text/javascript" src="suggest.js"></script>
  8. <link rel="stylesheet" href="css.css" type="text/css" />
  9. </head>
  10. <body>
  11. <div id="inputBox">
  12.       <form action="add.php" method="post">
  13.       Poszukiwana fraza: <input type="text" id="string" name="string" autocomplete="off" onkeyup="showWords(); return false;" />
  14.       <input type="submit" value="Dalej" id="button" />
  15.       </form>
  16.       <div id="suggestion"></div>
  17. </div>
  18.  
  19. </body>
  20. </html>
[HTML] pobierz, plaintext

Plik suggest.js wykorzystujący AJAX:
Kod
function $(id) {
    return document.getElementById(id);
}

// zmiana koloru wiersza (onmouseover)
function highlight() {
    this.className = "highlight";
}

// zmiana koloru wiersza (onmouseout)
function unHighlight() {
    this.className = "unhighlight";
}

// akceptacja podpowiedzi
function selectWord() {
    $("string").value = this.innerHTML;
    $("suggestion").style.display = "none";
}

// konwersja dokumentu XML na elementy span
function parseRecords(xml) {
    // zapisanie danych bieżącej strony
    with (xml.getElementsByTagName("words").item(0)) {
        var count = getAttribute("count")*1;
    }
    
    if(count == 0)
        $("suggestion").style.display = "none";
    
    // wpisanie odpowiednich słów do pola suggestion
    var space = $("suggestion");
    space.innerHTML = ""; // wyczyszczenie poprzedniej listy
    var word = xml.getElementsByTagName("word");
    for (i = 0; i < word.length; i++) {
        spanNode = document.createElement("span");
        spanNode.innerHTML = word[i].childNodes[0].nodeValue;
        spanNode.onmouseover = highlight;
        spanNode.onmouseout = unHighlight;
        spanNode.onmousedown = selectWord;
        space.appendChild(spanNode);
    }
}

// funkcja wywołująca skrypt php i pobierająca dokument XML
function showWords() {
    var string = $("string").value;
    if(string) { // przy pustym polu nie następuje wysyłanie żądania
        advAJAX.get({
            url : "suggest.php?prefix="+$("string").value,
          
            onInitialization : function() {
                $("suggestion").style.display = "block";
            },
        
            onSuccess : function(obj) {
                parseRecords(obj.responseXML);
            },
        
            onError : function(obj) {
          alert("Nie można nawiązać połączenia z serwerem.");
            }
        });
    }
    else { // ukrycie warstwy
  $("suggestion").style.display = "none";
    }
}

Plik suggest.php (wywoływany przez suggest.js)
[PHP] pobierz, plaintext 
  1. <?php
  2. 	header('Content-type: text/xml; charset=iso-8859-2');
  3.  
  4. 	$dbhost = 'localhost';
  5. 	$dbuser = 'root';
  6. 	$dbpass = 'l';
  7. 	$db = 'ajax';
  8. 	$dbtable = 'words';
  9.  
  10. 	@mysql_connect($dbhost, $dbuser, $dbpass);
  11. 	@mysql_select_db($db);
  12.  
  13. 	$prefix = @$_GET['prefix'];
  14. 	$query = @mysql_query('SELECT * FROM words WHERE value LIKE "'.$prefix.'%" ORDER BY value LIMIT 0,20');
  15. 	$countRow = @mysql_num_rows($query);
  16.  
  17. 	echo '<?xml version="1.0" encoding="iso-8859-2"?>';
  18. 	echo '<words count="'.$countRow.'">';
  19. 	while ($row = @mysql_fetch_assoc($query)) {
  20. 		echo '<word>'.htmlspecialchars($row['value']).'</word>';
  21. 	}
  22. 	echo '</words>';
  23. ?>
[PHP] pobierz, plaintext

Plik add.php odpowiedzialny za dodanie słowa do bazy danych:
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. 	$dbhost = 'localhost';
  4. 	$dbuser = 'root';
  5. 	$dbpass = '';
  6. 	$db = 'ajax';
  7. 	$dbtable = 'words';
  8.  
  9. 	@mysql_connect($dbhost, $dbuser, $dbpass);
  10. 	@mysql_select_db($db);
  11.  
  12. 	$query = @mysql_query('SELECT * FROM words WHERE value = "'.$_POST["string"].'"');
  13. 	if(@mysql_num_rows($query) ==0)	
  14. 		$query = @mysql_query('INSERT INTO words VALUES("NULL", "'.$_POST["string"].'")');
  15.  
  16. 	header("Location: start.html");
  17. ?>
[PHP] pobierz, plaintext

Oraz plik kaskadowych arkuszy stylów (css.css):

html, body{
padding: 0;
margin: 0;
font-family : Arial, sans-serif;
}
Kod
#inputBox {
    border: 3px double #000;
    background: #CCF;
    margin: 1em;
    padding: 0.5em;    
}

#suggestion {
    background: #FFF;
    height: 100px;
    width : 200px;
    border: 1px solid #000;
    margin: 0.1em;
    position: relative;
    left: 140px;  
    overflow : auto;
    float : left;
    display: none;
    cursor: default;
}

#suggestion span {
    display: block;
}

#string {
    width : 200px;
    font-size : 13px;
    padding-left : 2px;
    border: 1px solid #000;
}

#button {
    width: 100px;
    color: #FFF;
    background: #000;
    border: 1px solid #FFF;
}    

.highlight {
    background-color: #69F;
    color: #FFF;
}

.unhighlight {
    background-color: #FFF;
    color: #000;
}

Gdyby nie omówiona wada, byłbym zadowolony z funkcjonalności (pomimo, że wystarczy sam js, ale czego sie nie robi dla praktyki (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ).

Ten post edytował JaRoPHP 15.05.2006, 08:03:24
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
JaRoPHP
post
Post #2





Grupa: Zarejestrowani
Postów: 675
Pomógł: 15
Dołączył: 7.11.2004
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Dzięki anAKiN za sugestie, choć nie do końca rozumiem.
Otóż na stronie na której prezentujesz advAJAX jest przykład,
Cytat
w którym jeden z argumentów został umieszczony bezpośrednio w argumencie url

:
Kod
advAJAX.get({
    url: "http://www.example.com/page.html?var1=value1",
    queryString : "var2=value2",
    parameters : {
      "var3" : "value3"
    },
    onSuccess : function(obj) { alert(obj.responseText); },
    onError : function(obj) { alert("Error: " + obj.status); }
});


Czy więc argument var1=value1 jest źle podany?

Oraz kolejne pytanie, jaka jest różnica między podanymi przez Ciebie rozwiązaniami.
Które jest lepsze i powinno zawsze działać?
Go to the top of the page
+Quote Post

Posty w temacie
- JaRoPHP   advAjax - suggestion   14.05.2006, 22:48:26
- - anAKiN   Argument Kodurl : "suggest.php?prefix=...   14.05.2006, 23:38:31
- - JaRoPHP   Dzięki anAKiN za sugestie, choć nie do końca rozum...   15.05.2006, 09:49:16
- - anAKiN   CytatCzy więc argument var1=value1 jest źle podany...   15.05.2006, 10:17:16
- - JaRoPHP   Dzięki anAKiN! A teraz moze ktoś wie, jak roz...   15.05.2006, 17:46:28
- - mariuszn3   Polskie znaki, w ogóle jakiekolwiek ciągi znaków j...   16.05.2006, 13:34:28
- - JaRoPHP   No tak, ale z kodowaniem utf-8 też są problemy - n...   16.05.2006, 18:42:43
- - dyktek   przez encodeURIComponent() musze przepuścić to co ...   19.05.2006, 10:51:39
- - mariuszn3   CytatNo tak, ale z kodowaniem utf-8 też są problem...   19.05.2006, 11:11:16
- - dyktek   no tak masz racje przez pomyłke wstawiłem to w bbc...   19.05.2006, 11:20:13

« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 3.10.2025 - 17:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn