www.webdeveloper.com
Results 1 to 6 of 6

Thread: Problem with Autocomplete Jquery pluging and hidden field (#id)

  1. #1
    Join Date
    Dec 2010
    Posts
    3

    Problem with Autocomplete Jquery pluging and hidden field (#id)

    Best to all,

    I'm new around here, and also with jquery php programming. I appreciate the cooperation you can get.

    Well, my problem is with the use of basic plugin for Jquery Autocoplete, I have not used any of the many that circulate on the Internet.
    I managed to do well the search and query the database, it returns me the names of the students, the problem comes when I assign the id of the selected name to a hidden field of the form to send via the id _get to another page editor.

    To achieve this autocomplete (or autosuggest), I created 3 files. 2 to make the query and process, and the next file that contains the form and the Javascript code that should work.

    busq-alumnos.inc.php:

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"> </ script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </ script>
    <script type="text/javascript" src="js/jquery.curvycorners.min.js"> </ script>
    <script type="text/javascript">
    $ (function () {
    $ ('# buscar'). Autocomplete ({
    source: 'ajax.php', / / php file that processes the search
    minLength: 2,

    select: function (event, ui) { / / Here's my biggest problem -
    $ ('# id'). Val (ui.item.id)
    }
    });
    });


    </ Script>

    </ Head>

    <body>

    <div id="busqueda">
    <form action="edit_alumno.php?id=" method="get">
    <p> Student: </ b> <input type="text" name="buscar" id="buscar" class="cuadro-2" /> </ p>
    <input type="submit" name="submit" value="enviar" />
    <input type="text" size="5" name="id" id="id" class="cuadro-2" value="" />

    / / -------- This field is not assigned it by javascript ----

    </ form>
    </ div> <! - # Search ->

    <div id="resultados">

    </ div> <! - # Results -> / / Here ends the part of the problem conicerne


    Anyway, the point is that everything works fine except the assignment of the hidden field id on the form.
    I've looked several times the official documentation and in many forums, and I can not figure out what goes wrong.

    Sure I have not explained very well, I hope you understand me ....

    Thanks and greetings!

    Luis Cardenas

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Hi,

    This appears to be a typo error. JavaScript is case-sensitive. See the bold line in the code below. Also, I would recommend changing the
    id of your variable from "id" to something more descriptive. Using "id" as the value if your id attribute could cause problems in some browsers.

    Code:
    <script type="text/javascript">
    $ (function () {
    $ ('#buscar'). Autocomplete ({
    source: 'ajax.php', / / php file that processes the search
    minLength: 2,
    
    select: function (event, ui) { // Here's my biggest problem -
    $('#id').val (ui.item.id)
    }
    });
    });
    </script>
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Dec 2010
    Posts
    3
    First of all, thank you for your speed in answering...

    I've just corrected the typo errors.. I think it's ok. I've changed the name of #id field... but the script does not work.

    This is the new code:

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.curvycorners.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('#buscar').autocomplete({
    source : 'ajax.php',
    minLength : 2,

    select : function(event, ui ) {
    $('#buscar').val(ui.item.id);
    }
    });
    });


    </script>
    </head>
    <body>

    <div id="busqueda">
    <form action="edit_alumno.php?id=" method="get">
    <p> <b>Alumno/a : </b><input type="text" name="buscar" id="buscar" class="cuadro-2" /> </p>
    <input type="submit" name="submit" value="enviar" />
    <input type="text" name="id" id="id" size="5" class="cuadro-2" value="" />

    </form>
    </div> <!-- #busqueda -->

    <div id="resultados">

    </div> <!-- #resultados -->


    -------------------------------------

    I think the problem is that jQuery can not find out what the id (or key) of the selected record, but I can´t find a good solution...

    I need this id value to send it to another page of edition ( "edit_alumno.php?id=").

    Thanks again, and greetings!!

    L.C.

  4. #4
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Hi,

    If you are using this Autocomplete plugin for jQuery, then you need to revise your code according to the documentation. However, based on your code, it looks like you're using some other Autocomplete plugin. Do you have a link to the documentation to this plugin?
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  5. #5
    Join Date
    Dec 2010
    Posts
    3
    Thanks for everything, Jona , I've solved the problem...

    Had forgotten to set in the php-json file the variable id, for this reason could not bind the values...

    Thanks again, please to meet you, bye!!
    L.C.

  6. #6
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Glad you got it figured out.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles