Frage zu jQuery UI autocomplete (HTML, CSS und Javascript)

[thread]16726[/thread]

Frage zu jQuery UI autocomplete

Tags: perl5 HTML Javascript ajax jQuery Ähnliche Threads

Leser: 15

Articles: hide open all | hide show old branches

+3 replies

Kuerbis

2011-09-14 17:21

User since
2011-03-20
963 Artikel
BenutzerIn
[default_avatar]

Hallo,

warum funktioniert die zweimalige Eingabe (Eingabe/Reset/Eingabe) von ID's die nur einmal vorkommen ( if ( len == 1 ) { ) nicht?

z.B. Eingabe 3(21456); reset Button drücken; Eingabe 3(21456);
bei der zweiten Eingabe passiert nichts mehr.

Code (perl): (dl )

#!/usr/bin/env perl
use warnings;
use 5.014;
use utf8;
use Mojolicious::Lite;
use DBI;

my $table = 'my_test_table';
my $dbh = DBI->connect( 'dbi:SQLite:dbname=my_test_db.db', '', '', 
    { RaiseError => 1, PrintError => 0, AutoCommit => 1, sqlite_unicode => 1, } 
) or die $DBI::errstr;
$dbh->do( "CREATE TEMP TABLE $table ( firstname TEXT, lastname TEXT, id INTEGER UNIQUE )" );

my $sth = $dbh->prepare( "INSERT INTO  $table ( firstname, lastname, id ) VALUES ( ?, ?, ?)" );
$sth->execute( 'Charlie', 'Harper', '321456' );
$sth->execute( 'Rachel Karen', 'Green', '253422' );
$sth->execute( 'John', 'Dorian', '433542' );
$sth->execute( 'Homer ☺', 'Simson', '433541' );

get '/eingabe';

get '/search_db/:opt' => sub {
    my $self = shift;
    my $opt = $self->param( 'opt' );
    my $term = $self->param( 'term' );
    my $ref;
    if ( $opt eq 'autocomplete' ) {
        my $sth = $dbh->prepare( "SELECT id FROM $table WHERE id LIKE ?" );
        $sth->execute( $term . '%');
        while ( my $row = $sth->fetchrow_arrayref() ) {
            push @$ref, @$row;
        }
    } elsif ( $opt eq 'row' ) {
      $ref = $dbh->selectall_arrayref( "SELECT * FROM $table WHERE id == ?", { Slice => {} }, $term );
      die scalar @$ref if @$ref != 1;
      $ref = $ref->[0];
    }        
    $self->render( json => $ref );
};

app->start;

__DATA__
@@ eingabe.html.ep
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            $( "#button_1" ).click( function() {
                document.getElementById( "form_1" ).reset();
                document.getElementById( "id" ).focus();
            });
            var searchID = '#id';
            $( searchID ).autocomplete({
                source: function( request, response ) {
                    $.getJSON( '/search_db/autocomplete', request, function( dataFromServer ) {
                        var suggestions = [];
                        var len = dataFromServer.length;
                        for ( var i = 0; i < len; i++ ) {
                            suggestions.push( dataFromServer[i].toString() );
                        }
                        if ( len == 1 ) {
                            $( searchID ).autocomplete( 'disable' );
                            $.getJSON( '/search_db/row', { term : suggestions[0] }, function( data ) {
                                for ( var key in data ) {
                                    if( data.hasOwnProperty( key ) ) {
                                        var input = document.getElementById( key );
                                        input.value = data[key];
                                    }
                                }
                            });
                        }
                        response( suggestions );
                        $( searchID ).autocomplete( 'enable' );  
                    });
                },
                select: function( event, ui ) {
                    $.getJSON( '/search_db/row', { term : ui.item.value }, function( data ) {
                        for ( var key in data ) {
                            if( data.hasOwnProperty( key ) ) {
                                var input = document.getElementById( key );
                                input.value = data[key];
                            }
                        }
                    });
                },
                delay: 100
            });    
        });
    </script>
</head>
<body>
<form id="form_1">
    <table>
        <tr><td>Firstname:</td><td><input type="text" id="firstname" name="firstname" /></td><td></td></tr>
        <tr><td>Lastname:</td><td><input type="text" id="lastname" name="lastname" /></td><td></td></tr>
        <tr><td>ID:</td><td><input type="number" id="id" name="id" autofocus="on" /></td><td>
                <button type="reset" id="button_1"> - </button></td></tr>
    </table><br />
    <input type="submit" value="OK"/>
</form>
</body>
</html>

+2 replies
AndiE

2011-09-14 19:20
User since
2010-10-24
65 Artikel
BenutzerIn
Hallo,

soweit ich das übersehen kann, liegt der Fehler in Zeile 12-
Code: (dl )

create ... integer unique
"unique" legt meines Wissens fest, dass der Wert, in diesem Falle die ID, nur einmal vergeben werden kann und nie wieder.

modedit Editiert von GwenDragon: Tags repariert
Last edited: 2011-09-14 19:41:54 +0200 (CEST)
- Kuerbis
  
  2011-09-15 08:06
  
  User since
  2011-03-20
  963 Artikel
  BenutzerIn
  
  Wenn ich lesend auf die Datenbank zugreife, sollte das kein Problem sein.

View all threads created 2011-09-14 17:21.