jquery.js неправильно ссылается на файлы, созданные Perl Template Toolkit
У меня есть очень простой маленький пример JavaScript/Perl CGI, который я использовал, чтобы начать работу с большим проектом. Когда я запускаю его как client.html а также server.plРаботает без нареканий. Тем не менее, когда я меняю client.html в client.tmplи назовите это от того же самого server.pl скрипт с использованием Template Toolkit, он не может найти функции jQuery.
Я даже создал master.tmpl файл, и используется [% INCLUDE client.html %] внутри, и это не удается. Консоль браузера проверяет, что путь к jquery.js правильно, но это как будто он не может загрузить его, когда он внутри шаблона.
Ниже приведен HTML-файл, который я по сути пытаюсь превратить в .tmpl файл (форматирование испорчено, впервые здесь, извините):
client.html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<meta charset="UTF-8" />
<script src="http://domainname/ajax_example/jquery.js"></script>
<script type="text/javascript">
function myTimer() {
var typingTimer;
var doneTypingInterval = 2000;
$("#user_text").keyup( function() {
clearTimeout(typingTimer);
if ( $('#user_text' ).val()) {
typingTimer = setTimeout(updateText, doneTypingInterval);
}
});
function updateText() {
var current_text = document.getElementById('user_text').value;
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if ( http.readyState == 4 && http.status == 200 ) {
var response = http.responseText;
document.getElementById('server_response').value = response;
}
};
http.open("GET", "http://domainname/ajax_example/cgi-bin/server.pl?user_text=" + current_text , true );
http.send();
}
}
</script>
</head>
<body>
<div>Input Text: <input type="text" id="user_text" name="user_text" onkeyup="myTimer()"/></div><br/>
<div>Server Resp.: <textarea id="server_response" name="server_response"> </textarea></div>
<br/>
</body>
</html>
server.pl это работает:
server.pl
$cgi = CGI->new;
$id = $cgi->param('user_text');
$result = uc($id);
print $cgi->header();
print $result;
server.pl это не работает:
server.pl
$cgi = CGI->new;
$id = $cgi->param('user_text');
**returned from result calculation sub** $result = uc($id);
my $config = {
EVAL_PERL => 1,
POST_CHOMP => 1,
INTERPOLATE => 1,
INCLUDE_PATH => '/usr/lib/cgi-bin/ajax_example/:/var/www/html/ajax_example/',
};
print $cgi->header( -charset=>'utf-8' );
my $tt = Template->new($config);
$tt->process('client.tmpl', \$result);
}
Имейте в виду, я стараюсь изо всех сил обобщить код, но Perl и JavaScript работают отлично, если только он не используется через TT. Ошибка:
#user_text.keyup is not a function:
("#user_text").keyup(function(){
Та же самая ошибка, которую я получил бы, если бы поставил неверный путь к jquery.js, Путь хороший, хотя, без сомнения.
Спасибо за любые рекомендации, которые может дать любой.
1 ответ
Непосредственной проблемой является то, что вы включили INTERPOLATE опция, которая интерполирует переменные Perl в любом месте шаблона. Это заставляет модуль пытаться заменить $( по значению и разрушает синтаксис JavaScript
В любом случае, это небрежный способ использования шаблонов: вы должны передать все необходимые значения в $vars хеш, и извлеките их оттуда, используя [% variable %] шаблонные директивы. То же самое относится к EVAL_PERL вариант, так как любое сложное манипулирование данными обычно должно быть в коде, который вызывает process, Все, что вам нужно сделать внутри шаблона, доступно в виде директивы Template.
Говоря о $vars хэш, вы должны получить Not a HASH reference ошибки, потому что вы переходите к process ссылка на строковую переменную $result вместо хэша, содержащего это значение. Неясно, как вы хотите, чтобы это значение обрабатывалось, но единственное упоминание о id в вашем HTML это id атрибут <input> элемент в нижней части HTML, поэтому я поместил в них директиву, чтобы показать вам, как все это работает
Посмотрите на этот код
Программа CGI
use strict;
use warnings 'all';
use CGI;
use Template;
my $cgi = CGI->new;
my $id = $cgi->param('user_text') // 'abc123';
my $result = uc $id;
print $cgi->header( -charset => 'utf-8' );
my $tt = Template->new( {
# INCLUDE_PATH => '/usr/lib/cgi-bin/ajax_example/:/var/www/html/ajax_example/',
POST_CHOMP => 1,
} );
$tt->process('client.html', { result => $result } );
Я изменил ваш HTML-файл следующим образом. Я не мог сказать, что вы хотели сделать со значением, которое CGI-код извлекает из user_text параметр, поэтому я положил его в value атрибут для первого поля ввода
Файл шаблона
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<meta charset="UTF-8" />
<script src="http://domainname/ajax_example/jquery.js" />
<script type="text/javascript">
function myTimer() {
var typingTimer;
var doneTypingInterval = 2000;
$("#user_text").keyup( function() {
clearTimeout(typingTimer);
if ( $('#user_text' ).val() ) {
typingTimer = setTimeout(updateText, doneTypingInterval);
}
} );
function updateText() {
var current_text = document.getElementById('user_text').value;
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if ( http.readyState == 4 && http.status == 200 ) {
var response = http.responseText;
document.getElementById('server_response').value = response;
}
};
http.open("GET",
"http://domainname/ajax_example/cgi-bin/server.pl?user_text=" + current_text,
true );
http.send();
}
}
</script>
</head>
<body>
<div>Input Text:
<input type="text" id="user_text" name="user_text" value="[% result %]" onkeyup="myTimer()"/>
</div>
<br/>
<div>Server Resp.:
<textarea id="server_response" name="server_response"/>
</div>
<br/>
</body>
</html>
И вот результирующий вывод из кода CGI. Как видите, $("#user_text").keyup вызов остается неизменным, а значение из кода CGI - result элемент передан в $vars хэш - был подставлен в value атрибут текста input элемент
Я надеюсь, что это поможет вам прогрессировать и заставить ваше приложение работать
выход
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<meta charset="UTF-8" />
<script src="http://domainname/ajax_example/jquery.js" />
<script type="text/javascript">
function myTimer() {
var typingTimer;
var doneTypingInterval = 2000;
$("#user_text").keyup( function() {
clearTimeout(typingTimer);
if ( $('#user_text' ).val() ) {
typingTimer = setTimeout(updateText, doneTypingInterval);
}
} );
function updateText() {
var current_text = document.getElementById('user_text').value;
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if ( http.readyState == 4 && http.status == 200 ) {
var response = http.responseText;
document.getElementById('server_response').value = response;
}
};
http.open("GET",
"http://domainname/ajax_example/cgi-bin/server.pl?user_text=" + current_text,
true );
http.send();
}
}
</script>
</head>
<body>
<div>Input Text:
<input type="text" id="user_text" name="user_text" value="ABC123" onkeyup="myTimer()"/>
</div>
<br/>
<div>Server Resp.:
<textarea id="server_response" name="server_response"/>
</div>
<br/>
</body>
</html>