2011-04-30 21 views
1

我很努力地指出這是失敗的地方。我可以讓這個插件在我的本地PC上使用php/jquery工作,但是試圖在我的生產環境中使用Perl複製它(因爲我不會考慮使用php,所以我不會參考)。來自Perl的JQuery自動完成功能

index.cgi - 這是生成包含文本框的html頁面的Perl代碼。

#!/usr/bin/perl -w 

use DBI; 
use CGI; 
use warnings; 
use strict; 

$cgi = new CGI; 
$cgi->autoEscape(undef); 
print $cgi->header; 
print $cgi->start_html(-title=>'test', 
         -dtd=>'//W3C//DTD HTML 4.01 Transitional//EN', 
         -style=>'/themes/ui-lightness/jquery.ui.all.css', 
         -script=>[ 
           {-type=>'javascript', -src=>'/js/jquery-1.5.2.min.js'}, 
           {-type=>'javascript', -src=>'/js/test.js'}, 
           {-type=>'javascript', -src=>'/ui/jquery-ui-1.8.11.custom.js'}, 
           {-type=>'javascript', -src=>'/ui/jquery.ui.core.js'}, 
           {-type=>'javascript', -src=>'/ui/jquery.ui.widget.js'}, 
           {-type=>'javascript', -src=>'/ui/jquery.ui.position.js'}, 
           {-type=>'javascript', -src=>'/ui/jquery.ui.autocomplete.js'} 
         ] 
     ); 

print $cgi->start_div({-class=>'ui-widget'}); 
print $cgi->textfield(-id=>'customer',-size=>25),$cgi->br; 
print $cgi->end_div(),$cgi->br; 
print $cgi->div({-class=>'ui-widget-content',-id=>'log'}); 
print $cgi->end_html; 

test.pl - 這是在後臺的JSON饋送到自動填充運行的代碼:

#!/usr/bin/perl 
use warnings; 
use strict; 
use CGI; 
use DBI; 
use JSON; 

my $cgi = CGI->new; 
print $cgi->header(-type => "application/json", -charset => "utf-8"); 
my $dbh = DBI->connect('dbi:mysql:hostname=test;database=test',"test","test"); 
my $term = $cgi->param('term'); 
my $sth = $dbh->prepare(qq{SELECT customer.name, customer.id FROM test WHERE customer.name ?;}) or die $dbh->errstr; 
$sth->execute($term.'%') or die $sth->errstr; 
my $json = {}; 
while(my @customer = $sth->fetchrow_array()) { 
    $json->{$customer[0]} = $customer[1]; 
} 
print JSON::to_json($json); 

test.js - 這是實際的JQuery正在使用:

$(function() { 
     function log(message) { 
       $("<div/>").text(message).prependTo("#log"); 
       $("#log").attr("scrollTop", 0); 
     } 

     $("#customer").autocomplete({ 
       source: "test.pl?term=", 
       minLength: 2, 
       select: function(event, ui) { 
         log(ui.item ? 
           "Value: " + ui.item.value + " Key " + ui.item.id : 
           "Nothing selected, input was " + this.value); 
       } 
     }); 
}); 

我一直在谷歌周圍,但沒有找到任何堅實的地方有人有一個與JQuery Perl的例子。 test.js和index.cgi文件幾乎完全複製jquery自動完成的jquery-ui示例文件中的代碼,除了index.cgi是使用CGI.pm在Perl中編寫的。

任何幫助將不勝感激,再次由於服務器的性質和其上的應用程序,我在這裏的語言有所限制。

+0

test.pl甚至不進行編譯。 – tadmc 2011-04-30 12:50:57

+0

我知道你說過你不會進入它,但我真的很好奇你爲什麼不能在你的服務器上安裝PHP – 2011-04-30 13:02:15

+1

'use strict'和'warnings'缺失。不要浪費時間忽略這些。 – Lumi 2011-04-30 15:26:13

回答

0

您沒有在返回的json字符串中分配值或標籤字段。您正在傾銷名稱和ID。自動填充功能不知道您想要在自動填充結果中顯示哪一個。將客戶名稱分配給值字段。

$json->{"value"} = $customer[0]; 
$json->{"id"} = $customer[1]; 

jQuery自動完成需要使用json結果返回的「值」或「標籤」字段。如果不包含它,jquery自動完成將不起作用:

自動完成的基本功能與分配給「標籤」和「值」字段的查詢結果一起工作。jQuery UI站點上'label'和'value'字段的解釋:

「本地數據可以是一個簡單的字符串數組,也可以是數組中每個項目的對象,帶有標籤或值財產或兩者。標籤屬性顯示在建議菜單中。在用戶從菜單中選擇一些內容後,該值將被插入到輸入元素中。如果只指定了一個屬性,它將用於兩個,例如。如果你只提供值的特性,價值也將被用作標籤「

鏈接到完整的例子: http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/

3

Perl和jQuery大都是孤立的。如果Perl發送正確的HTML,您的瀏覽器應該執行正確的jQuery代碼。如果在test.pl中發送了正確的JSON - 假設您已經設置了jQuery來正確處理它 - 它應該正確處理。

但是,正如我在評論中提到的,它必須先編譯。您在$dbh作業結束時缺少分號。這意味着Perl認爲你沒有完成任務,並期待你以某種方式嘗試將$sth賦值與$dbh賦值聯繫起來。

一旦我做了這個改變,你的代碼就編譯了。檢查編譯:perl -c test.pl。但它失敗了,因爲我沒有訪問你要檢查的數據庫,所以假設連接字符串是正確的,我不明白爲什麼這不起作用。

而且永遠,永遠 - 在發展至少 - 啓動你的腳本了與:

use strict; 
use warnings; 
... 

給自己一個戰鬥的機會趕上編碼錯誤。當然,在生產環境中,如果在預生產測試中有一段代碼未能測試,它們也會給你更好的錯誤信息。

+0

當我從CLI運行test.pl時,我能夠看到JSON格式的數據輸出。我不完全確定如何調試,以查看Perl腳本JQuery腳本的結果之間的溝通不暢,我只能假設。 Content-Type:application/json;字符集= UTF-8 { 「559」: 「這是記錄558 \ r」, 「127」: 「這是記錄126 \ r」, 「32」: 「這是記錄31 \ R」 } 我添加了使用警告並嚴格使用Perl腳本,他們簽出罰款。 – Mose 2011-04-30 23:30:13