Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts

    script.aculo.us Ajax Auto Completion problem

    Hi I'm currently learning myself how to use the script.aculo.us framework and i thought I'd try out a little basic script to see how the ajax functions work.

    The script is querying a mysql database to get and display a list of countries and place them in an unordered list for the user to choose from and displays once he starts typing into a text box.

    But im having a bit of trouble with it, when i start typing a letter say 'L' the list appears ok like below:

    Latvia
    Lebanon
    Lesotho
    Liberia
    Libya
    Liechtenstein
    Lithuania
    Luxembourg

    but say if I wanted luxembourg and I typed 'Lu' the list disappears instead of displaying luxembourg! I've noticed I had to put the Mysql LIKE wildcard symbol % at the end after the variable to check, if I put it at the front before the variable it seems to spit all of them out.

    secondly If I choose an option and hit enter the form submits itself, so ive put return false in the onsubmit attribute for the time being but is there another way to prevent the form submitting itself if i hit enter on that field.

    And thirdly, it doesnt seem to work in firefox, its doesnt display the menu. It runs ok but kinda slow response in IE but runs fine in opera (apart from the probs above) any ideas?

    here is the html page

    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" />
    <title>Untitled Document</title>
    <script src="/js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
    window.onload = function() {
    	new Ajax.Autocompleter('textfield','result','serverSideScript.php',{});
    }
    </script>
    <style type="text/css">
    body {
    	font-family: "Century Gothic", Arial, Tahoma, sans-serif;
    }
    ul {
    	margin: 0;
    	padding: 0;
    	position: relative;
    	list-style-type: none;
    	cursor: hand;
    	border: 1px solid #000;
    	border-bottom: none;
    }
    li {
    	border-bottom: 1px solid #000;
    	font-weight: bold;
    	padding: 5px;
    	font-size: .8em;
    }
    .selected {
    	background-color: #00CC99;
    	color: #fff;
    }
    </style>
    </head>
    <body>
    <form>
    <div>
    <label>Country:</label>
    <input type="text" id="textfield" name="textfield" />
    <div id="result"></div>
    </div>
    </form>
    </body>
    </html>
    The server side script

    PHP Code:
    <?php
    $server 
    'localhost';
    $user 'root';
    $pw '';
    $db 'test';

    mysql_connect($server,$user,$pw);
    mysql_select_db($db);

    $textfield $_POST['textfield'];
    $testval "L";

    $sql "SELECT * FROM country WHERE countryName LIKE '".$textfield."%'";
    $res mysql_query($sql) or die(mysql_error());
    $row mysql_fetch_assoc($res);

    echo 
    '<ul>';
    if(
    $res) {
        while(
    $row mysql_fetch_assoc($res))
        {
            echo 
    "<li>".$row['countryName']."</li>";
        }
    }
    echo 
    '</ul>';
    ?>
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts
    Well I've found out why its not working in firefox, it doesnt seem to be parsing the prototype.js file correctly. I just looked at the error console and it had heaps of errors saying ajax is not defined and missing after property id etc.

    i clicked the link below the error and it opened the source on the line in question and its displaying a heap of well, gibberish!

    Code:
    geRCRD(�	�аe3�����Pм…��И������цk2����Q�����������a1џџ�������������� ��������������џџџџШ��”����mL1�������� ��������������џџџџ№��}Щ�����ЇoL1�������� ��������������џџџџ��‹Ь�����rL1�������� ��������������џџџџ@��a����$�DvL1�������� ��������������џџџџh��@У�����МL1�������� ��������������џџџџ��їК�����N”L1�������� ��������������џџџџИ��	\����bЄL1�������� ��������������џџџџр��)����`шL1�������� ��������������џџџџ��З����ДыL1�������� ��������������џџџџ0��šЩ�����_юL1������Q ��������������џџџџX��Ь�����хџL1�������� ��������������џџџџ€��ZИ�����Д�M1�������� ��������������џџџџЈ��Ќ�����эM1�������� ��������������џџџџа��Ы�����BM1�������� ��������������џџџџј��dЪ�����oM1�������� ��������������џџџџ  ��EТ�����МM1�������� ��������������џџџџH ��•И�����	M1�������� ��������������џџџџp ��žИ�����:M1�������� ��������������џџџџ˜ ��G����єM1�������� ��������������џџџџР ��e����M1�������� ��������������џџџџш ��N����рM1�������� ��������������џџџџ!��ќQ���/*M1�������� ��������������џџџџ8!��ћ����
    -M1�������� ��������������џџџџ`!��Ѕ����А/M1�������� ��������������џџџџˆ!��k����р1M1�������� ��������������џџџџА!������Є:M1�������� ��������������џџџџи!��G����ГEM1�������� ��������������џџџџ�"��Њ����jKM1�������� ��������������џџџџ("��Љ����:SM1�������� ��������������џџџџP"��ё����/UM1�������� ��������������џџџџx"��N����—WM1�������� ��������������џџџџ "��С����ZM1�������� ��������������џџџџШ"��Р����і[M1�������� ���������Q���џџџџ№"��.����G`M1�������� ��������������џџџџ#��С�����”`M1�������� ��������������џџџџ@#��GА�����ЄxM1�������� ��������������џџџџh#��пА�����цzM1�������� ��������������џџџџ#��&И�����‹{M1�������� ��������������џџџџИ#��hЗ�����Ж}M1�������� ��������������џџџџр#��Ÿ����~M1�������� ��������������џџџџ$��!����щ€M1�������� ��������������џџџџ0$��9����6M1�������� ��������������џџџџX$��#����~…M1�������� ��������������џџџџ€$��ћЪ�����:‹M1�������� ��������������џџџџЈ$������#’M1��Q���� ��������������џџџџа$��1А�����џ M1�������� ��������������џџџџј$��џЏ�����ІM1�������� ��������������џџџџ %��~Ь�����|ЇM1�������� ��������������џџџџH%��VЎ�����3ЉM1�������� ��������������џџџџp%��ч�����ЛЉM1�������� ��������������џџџџ˜%��У�����~рM1�������� ��������������џџџџР%��Q����сM1�������� ��������������џџџџш%��[����всM1�������� ��������������џџџџ&��A%�����П$N1�������� ��������������џџџџ8&��œЄ�����Е%N1�������� ��������������џџџџ`&��І�����ˆN1�������� ��������������џџџџˆ&Q:�����dN1�������� ��������������џџџџА&��Щv�����ЂN1�������� ��������������џџџџи&��Ђ�����яЂN1�������� ��������������џџџџ�'��\�����JЅN1�������� ��������������џџџџ('��Ыv�����$КN1�������� ��������������џџџџP'��Њ[����ЉјN1�������� ��������������џџџџx'��u`����O1�������� ��������������џџџџ '��м$�����НGO1�������� ��������������џџџџШ'��`����ІYO1�������� ��������������џџџџ№'��WК�����рvO1�������� ��������������џџџџ(��SЌ�����“ЯO1�������� ��������������џџџџ@(��„Ќ�����рЯO1�������� �����Q�������џџџџh(��ŽЌ�����pаO1�������� ��������������џџџџ(��–Ќ�����јаO1�������� ��������������џџџџИ(��™й�����Q1�������� ��������������џџџџр(��їs�����TaQ1�������� ��������������џџџџ)��z�����ЁX1�������� ��������������џџџџ0)��€�����UЁX1�������� ��������������џџџџX)��{�����[ЂX1�������� ��������������џџџџ€)��&$�����іДX1�������� ��������������џџџџЈ)��)$�����—ЕX1�������� ��������������џџџџа)��0������…НX1�������� ��������������џџџџј)��+$�����МЦX1�������� ��������������џџџџ *��ЮЌ�����ВiQ�������� ��������������џџџџH*��*�����ja1�������� ��������������џџџџp*��H*�����Uja1�������� ��������������џџџџ˜*��y*�����Ђja1�������� ��������������џџџџР*��Ў�����яja1�������� ��������������џџџџш*��	Щ�����Аma1�������� ��������������џџџџ+��7Щ�����Ќa1�������� ��������������џџџџ8+��ьж�����@um1�������� ��������������џџџџ`+��…3����ko1�������� ��������������џџџџˆ+��Sњ�����XФ 2�������� ��������������џџџџА+��0ћ�����рФ 2�������� ��������������џџџџи+��њќ�����TЧ 2�������� ��������������џџQRCRD(�	�
    m3�����Pм…��P������аe3����
    Q�������I�3���������,��Гњ�����7в 2�������� ��������������џџџџ(,��nм�����ъм 2�������� ��������������џџџџP,��…м�����aќ 2�������� ��������������џџџџx,��жШ�����Ю*$2�������� ��������������џџџџ ,��,Y����\Ъ,2�������� ��������������џџџџШ,��Z����qЬ,2�������� ��������������џџџџ№,��Z����oЭ,2�������� ��������������џџџџ-��Z����Ћв,2�������� ��������������џџџџ@-��{R����нд,2�������� ��������������џџџџh-��h4���	�eе,2�������� ��������������џџџџ-��ІV
    Q��
    �Ве,2�������� ��������������џџџџИ-��Ё3���	�Cж,2�������� ��������������џџџџр-��ЪZ����з,2�������� ��������������џџџџ.��!Z����їм,2�������� ��������������џџџџ0.��5Z����ƒ
    -2�������� ��������������џџџџX.��ВZ����‚-2�������� ��������������џџџџ€.��4Z����™Д2�������� ��������������џџџџЈ.��Й�����ЁJ2�������� ��������������џџџџа.��9г�����\–�3�������� ��������������џџџџј.��	§�����3�3�������� ��������������џџџџ /��Oж�����lž�3�������� ��������������џџџџH/��йv�����ШЊ�3�������� ���������
    Q���џџџџp/��“�����E*�3�������� ��������������џџџџ˜/��в#����'Џ�3�������� ��������������џџџџР/��‰(����А�3�������� ��������������џџџџш/��ВЋ�����{Г�3�������� ��������������џџџџ0��я"����„Е�3�������� ��������������џџџџ80��_'�����П�3�������� ��������������џџџџ`0��х,�����3�������� ��������������џџџџˆ0��э,�����3�������� ��������������џџџџА0��ђ,�����„3�������� ��������������џџџџи0��і,�����ж˜3�������� ��������������џџџџ�1��7[����ђЕ3�������� ��������������<6��������������������
    Q��������������������h6������������������������������������������”6������������������������������������������Р6������������������������������������������ь6������������������������������������������7������������������������������������������D7������������������������������������������p7������������������������������������������œ7������������������������������������������Ш7������������������������������������������є7������������������������������������������ 8������������������������������������������L8����
    Q��������������������������������������������������������������������������������
    m3����аe3����аe3����0����������������������(�0�������������������������№ъЦD��$�I�3�0���p��$�I�3�0���œ��$�I�3�0���Ш��$�I�3�0��� �$�I�3�0���L�$�I�3�0���x�$�I�3�0���Є�$�I�3�0���а�$�I�3�0���ќ�$�I�3�0���(�$�I�3�0���T�$�I�3�0���€�$�I�3�0���Ќ�$�I�3�0���и�$�I�3�0����$�I�3�0���0�$�I�3�0���\�$�I�3�0���Д�$�I�3�0���р�$�I�3�0����$�I�3�0���8�$�I�3�0���d�$�I�3�0����$�I�3�0���М�$�
    Q3�0���ш�$�I�3�0����$�I�3�0���@�$�I�3�0���l�$�I�3�0���˜�$�I�3�0���Ф�$�I�3�0���№�$�I�3�0����$�I�3�0���H�$�I�3�0���t�$�I�3�0��� �$�I�3�0���Ь�$�I�3�0���ј�$�I�3�0���$�$�I�3�0���P�$�I�3�0���|�$�I�3�0���Ј�$�I�3�0���д�$�I�3�0�����$�I�3�0���,�$�I�3�0���X�$�I�3�0���„�$�I�3�0���А�$�I�3�0���м�$�I�3�0���	�$�I�3�0���4	�$�I�3�0���`	�$�I�3�0���Œ	�$�I�3�0���И	�$�I�3�0���ф	�$�I�3�0���
    �$�I�3�0���<
    �$�I�3�0���h
    �$�I�3�0���”
    �$�I�3�0���Р
    �$�I�3�0���ь
    �$�I�3�0���
    Q�$�I�3�0���D�$�I�3�0���p�$�I�3�0���œ�$�I�3�0���Ш�$�I�3�0���є�$�I�3�0��� �$�I�3�0���L�$�I�3�0���x�$�I�3�0���Є�$�I�3�0���а�$�I�3�0���ќ�$�I�3�0���(
    �$�I�3�0���T
    �$�I�3�0���€
    �$�I�3�0���Ќ
    �$�I�3�0���и
    �$�I�3�0����$�I�3�0���0�$�I�3�0���\�$�I�3�0���ˆ�$�I�3�0���Д�$�I�3�0���р�$�I�3�0����$�I�3�0���8�$�I�3�0���d�$�I�3�0����$�I�3�0���М�$�I�3�0���ш�$�I�3�0����$�I�3�0���@�$�I�3�0���l�$�I�3�0���˜�$�I�3�0���Ф�$�I�3�0���№�$�I�3�0����$�I�3�0���H�$�I�
    Q0���t�$�I�3�0��� �$�I�3�0���Ь�$�I�3�0���ј�$�I�3�0���$�$�I�3�0���P�$�I�3�0���|�$�I�3�0���Ј�$�I�3�0���д�$�I�3�0�����$�I�3�0���,�$�I�3�0���X�$�I�3�0���„�$�I�3�0���А�$�I�3�0���м�$�I�3�0����$�I�3�0���4�$�I�3�0���`�$�I�3�0���Œ�$�I�3�0���И�$�I�3�0���ф�$�I�3�0����$�I�3�0���<�$�I�3�0���h�$�I�3�0���”�$�I�3�0���Р�$�I�3�0���ь�$�I�3�0����$�I�3�0���D�$�I�3�0���p�$�I�3�0���œ�$�I�3�0���Ш�$�I�3�0���є�$�I�3�0��� �$�I�3�0���L�$�I�3�0���x�$�S�D�S���Є
    Qo__;
      });
    any ideas why this is happening.
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •