Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Как вставить jquery.js в tpl

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Хочу прикрутить на сайт маску с вводом телефона 9(999)999-9999
Сделал все по инструкции, как описано тут http://ruseller.com/lessons.php?rub=32&id=424
Потом решил вставить этот скрипт в форму заказа, которая в формате tpl
Вот код. Я его вставил в самый верх, что бы проверить работоспособность.
Поле появилось, но маска не работает и перестало работать "Способ доставки" (выделено в коде).
Подскажите, что я делаю не так, пожалуйста!

Код:
 
<html dir="ltr" lang="en">
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
 
</head>
<body>
 
 
    <script type="text/javascript">
   jQuery(function($) {
      $.mask.definitions['~']='[+-]';
      $('#phone').mask('(999) 999-9999');
   });</script>    
   
   
 
<table border="0">
<tbody>
<tr>
<td><input id="phone" type="text" tabindex="3" /></td>
</tr>
</tr>
</tbody></table>
 
 
</body>
</html>
 
 
<?php
 
$error = '';
 
if ($tpl['photo']['price_real'] == '0') {
    $url = cute_get_link(array('module_url' => 'photo'), 'modules');
    $error = '<h1>Ошибка</h1>Нельзя оформить заказ на 0 '.$photo['photo_currency'].'
    <br /><a href="'.cute_get_link(array('module_url' => 'photo'), 'modules').'">Назад</a>';
}
 
if ($photo['photo_min_order'] > $tpl['photo']['price_real']) {
    $url = cute_get_link(array('module_url' => 'photo'), 'modules');
    $error = '<h1>Ошибка</h1>Минимальная сумма заказа '.$photo['photo_min_order'].' '.$photo['photo_currency'].'
    <br /><a href="'.cute_get_link(array('module_url' => 'photo'), 'modules').'">Назад</a>';
}
 
echo $tpl['checkFormScript'];
?>
 
<?  
if (empty($error)) {
 
    echo_module_header(TXT('MAKE_ORDER'));
?>
 
<form method="POST" action="<?=$order_url?>" onsubmit="return chech_sumbit_photo();">
 
<table class="photo-order" cellspacing="0">
    <tr>
        <td colspan=2>
        
        <h3><?=TXT('CART')?></h3>
        
            <table class="cartTable">
                <tr>
                    <td width=80><img src="/admin/modules/photo/images/photos_icon.png" border=0 />
                    <td>
                        <div><?=TXT('PHOTO_COUNT')?>: <?=$tpl['photo']['count'];?> <?=TXT('UNITS')?></div>
 
                        <? if ($_COOKIE['cupon_code']) { ?>
                            <div><?=TXT('YOUR_DISCOUNT')?>: <?=$tpl['discount']['amount']?>&nbsp;<?=$tpl['discount']['percent']?></div>
                        <? } ?>
                        
                        <div><?=TXT('ORDER_TOTAL_SUM')?>:  
                        
                            <? if ($_COOKIE['cupon_code']) { ?>
                                <s><?=$tpl['photo']['price_real'];?></s>
                            <? } ?>
                            
                            <?=$tpl['photo']['price'];?> <?=$photo['photo_currency']?></div>
                            
                    <td>
                        <a class="editbtn" href="/do/photo"><?=TXT('EDIT')?></a>
            </table>    
<?
 
echo
    '<tr>'.
    '<td colspan=2>'.
    '<h3>'.TXT('PERSONAL_DATA').'</h3>'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('NAME').
    '<td><input type="text" name="contactname" id="contactname" value="'.$tpl['member']['name'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('FULLNAME').  
    '<td><input type="text" name="contactname2" id="contactname2" value="'.$tpl['member']['fullname'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('EMAIL').
    '<td><input type="text" name="useremail" id="useremail" value="'.$tpl['member']['mail'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('PHONE').
    '<td><input type="text" name="userphone" id="userphone" value="'.$tpl['member']['phone'].'" required />'.
//***************
//способ доставки
//***************
    '<tr>'.
    '<td class="photo-order-th">'.TXT('DELIVERY_METHODS').
    '<td><div id="deliverybox"></div>'.
//***************    
    '<tr>'.
    '<td class="photo-order-th">'.TXT('COUNTRY').
    '<td>'.$tpl['member']['country'].
    '<tr>'.
    '<td class="photo-order-th">'.TXT('CITY').
    '<td><input type="text" name="usercity" id="usercity" value="'.$tpl['member']['city'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('ZIPCODE').
    '<td><input type="text" name="zipcode" id="zipcode" value="" />'.
    '<tr>'.
    '<td class="photo-order-th" width="100"><div id="delivery_address_name">&nbsp;</div>'.
    '<td><div id="delivery_address_input">&nbsp;</div>'.
    '<tr>'.
    '<td align="right">'.
    '<td>'.
        '<div id="choosetime"></div>'.
        '<div id="deliveryprice"></div>'.
        '<div id="deliverytime"></div>'.
    '<script>
    $(document).ready(function() {
          get_delivery_type("'.$country_id.'");
    });    
    </script>'.
    '<tr>'.
    '<td valign=top colspan=2>'.
    '<h3>'.TXT('PAYMENT_METHODS').'</h3>'.
    $tpl['payment'].
    '<tr>'.
    '<td valign=top colspan=2>'.
    '<h3>'.TXT('ADDITIONAL_INFO').' <sup>('.TXT('OPTIONAL').')</sup> </h3>'.
    '<textarea name="addinfo" id="addinfo" onkeypress="return isNotMax(this)" maxlength="200"></textarea>'.
    '<input type="hidden" value="'.$session_id.'" name="order_session">'.
    $tpl['confirm'].
    '<tr>'.
    '<td colspan=2>'.
    '<input type="submit" value="" class="makeorderbutton">'.
'</table>'.
'</form>';
 
include chunk.'/google/checkout-conversion.block';
 
} else {
    echo $error;
}
?>
 

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 09:42 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
Подскажите, что я делаю не так

ссылку нужно давать - сразу будет видно в чем дело.
 
ну и нескромный вопрос - почему все остальное выводите после </html> тега???

Цитата:
 
</body>  
</html>  
 
 
<?php  
 

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 09:46 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
спасибо, что быстро откликнулись!
Что бы не засорять Вам мозг, вынес в отдельный модуль
1. Создал модуль phone.php
2. Создал tpl со скриптом
 
phone.php

Код:
 
<?
include modules.'/shop/tpl/orderform2.tpl';
?>
 

 
tpl

Код:
 
<html dir="ltr" lang="en">
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
 
</head>
<body>
 
 
    <script type="text/javascript">
   jQuery(function($) {
      $.mask.definitions['~']='[+-]';
      $('#phone').mask('(999) 999-9999');
   });</script>    
   
   
 
<table border="0">
<tbody>
<tr>
<td>Phone</td>
<td><input id="phone" type="text" tabindex="3" /></td>
<td>(999) 999-9999</td>
</tr>
</tbody></table>
 
 
</body>
</html>
 

 
Результат http://foto.itgreen.ru/do/phone

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 10:14 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
Результат

жмете F12 (хром, IE и так далее) и заглядываете в консоль - все становится очевидным

Цитата:
http://foto.itgreen.ru/do/jquery.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://foto.itgreen.ru/do/jquery.maskedinput-1.2.2.js Failed to load resource: the server responded with a status of 404 (Not Found)
phone:11 Uncaught ReferenceError: jQuery is not defined
phone:175 Uncaught TypeError: Cannot read property 'definitions' of undefined

 
последние 2 - следствие первых двух

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 10:17 15-04-2016 | Исправлено: Mavrikii, 10:17 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А, извините, подправил

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 10:24 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
А, извините, подправил

у вас сейчас там висит два обработчика.. из куска вверху и отельного куска внизу (в отдельной "странице"). не нужно такую мешанину делать, может бред получиться как сейчас.

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 10:30 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если честно, то я не понял откуда взялся второй )) вставлял один, но "топором".
Может особенность движка.

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 10:40 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
то я не понял откуда взялся второй ))

я же написал, у вас две страницы в одной.. в обеих есть  

Цитата:
$('#phone').mask('(999) 999-9999');  

вот и цепляется два раза к одному элементу.
ввод сейчас работает, но цифры пропускает

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 10:41 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Да, действительно работает!
Я понял, что заработало, после того, как я вынес библиотеки .js в другую папку.
 
Попробовал вставить в работающий модуль, который публиковал изначально - работает!
Потом перенес в раздел ECHO вот эту строку
<td><input id="phone" type="text" tabindex="3" /></td>  
Поле появилось, но маска не работает.
Может надо как то хитро вставлять?

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 11:04 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
Может надо как то хитро вставлять?

нужно видеть конечный результат, чтобы найти проблему.. раз не совсем понимаете, как работает, то она может быть в чем угодно. поэтому и говорю - дайте линк. либо смотрите консоль браузера на наличие ошибок.

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 11:06 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Буду признателен  
1. foto2.itgreen.ru
2. зайти на сайт admin/admin1
3. http://foto2.itgreen.ru/do/photo  
4. загрузить какую нить картинку и нажать "Оформить заказ"
5. поле "Phone" должна работать маска

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 11:15 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
поле "Phone" должна работать маска

работает, что не так?

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 11:28 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
нене, не с верху, а в разделе "Личные данные"

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 11:31 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss

Цитата:
нене, не с верху, а в разделе "Личные данные"

какой id у элемента там? вы к нему применяете маску? очевидно же, что нет, так как  
 $('#userphone').mask('(999) 999-9999') я не вижу

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 11:34 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот код

Код:
 
'<td>Phone</td>'.
'<td><input id="phone" type="text" tabindex="3" />'.
 

 
И полный код страницы

Код:
 
<html dir="ltr" lang="en">
<head>
    <script type="text/javascript" src="..\plugins\jquery.js"></script>
    <script type="text/javascript" src="..\plugins\jquery.maskedinput.js"></script>
 
</head>
<body>
 
 
    <script type="text/javascript">
   jQuery(function($) {
      $.mask.definitions['~']='[+-]';
      $('#date').mask('99/99/9999');
      $('#phone').mask('(999) 999-9999');
      $('#phoneext').mask("(999) 999-9999? x99999");
      $("#tin").mask("99-9999999");
      $("#ssn").mask("999-99-9999");
      $("#product").mask("a*-999-a999");
      $("#eyescript").mask("~9.99 ~9.99 999");
   });</script>    
   
   
 
<table border="0">
<tbody>
<tr>
<td>Date</td>
<td><input id="date" type="text" tabindex="1" /></td>
<td>99/99/9999</td>
</tr>
<tr>
<td>Phone</td>
<td><input id="phone" type="text" tabindex="3" /></td>
<td>(999) 999-9999</td>
</tr>
<tr>
<td>Phone + Ext</td>
<td><input id="phoneext" type="text" tabindex="4" /></td>
<td>(999) 999-9999? x99999</td>
</tr>
<tr>
<td>Tax ID</td>
<td><input id="tin" type="text" tabindex="5" /></td>
<td>99-9999999</td>
</tr>
<tr>
<td>SSN</td>
<td><input id="ssn" type="text" tabindex="6" /></td>
<td>999-99-9999</td>
</tr>
<tr>
<td>Product Key</td>
<td><input id="product" type="text" tabindex="7" /></td>
<td>a*-999-a999</td>
</tr>
<tr>
<td>Eye Script</td>
<td><input id="eyescript" type="text" tabindex="8" /></td>
<td>~9.99 ~9.99 999</td>
</tr>
</tbody></table>
 
 
</body>
</html>
 
 
<?php
 
$error = '';
 
if ($tpl['photo']['price_real'] == '0') {
    $url = cute_get_link(array('module_url' => 'photo'), 'modules');
    $error = '<h1>Ошибка</h1>Нельзя оформить заказ на 0 '.$photo['photo_currency'].'
    <br /><a href="'.cute_get_link(array('module_url' => 'photo'), 'modules').'">Назад</a>';
}
 
if ($photo['photo_min_order'] > $tpl['photo']['price_real']) {
    $url = cute_get_link(array('module_url' => 'photo'), 'modules');
    $error = '<h1>Ошибка</h1>Минимальная сумма заказа '.$photo['photo_min_order'].' '.$photo['photo_currency'].'
    <br /><a href="'.cute_get_link(array('module_url' => 'photo'), 'modules').'">Назад</a>';
}
 
echo $tpl['checkFormScript'];
?>
 
<?  
if (empty($error)) {
 
    echo_module_header(TXT('MAKE_ORDER'));
?>
 
<form method="POST" action="<?=$order_url?>" onsubmit="return chech_sumbit_photo();">
 
<table class="photo-order" cellspacing="0">
    <tr>
        <td colspan=2>
        
        <h3><?=TXT('CART')?></h3>
        
            <table class="cartTable">
                <tr>
                    <td width=80><img src="/admin/modules/photo/images/photos_icon.png" border=0 />
                    <td>
                        <div><?=TXT('PHOTO_COUNT')?>: <?=$tpl['photo']['count'];?> <?=TXT('UNITS')?></div>
 
                        <? if ($_COOKIE['cupon_code']) { ?>
                            <div><?=TXT('YOUR_DISCOUNT')?>: <?=$tpl['discount']['amount']?>&nbsp;<?=$tpl['discount']['percent']?></div>
                        <? } ?>
                        
                        <div><?=TXT('ORDER_TOTAL_SUM')?>:  
                        
                            <? if ($_COOKIE['cupon_code']) { ?>
                                <s><?=$tpl['photo']['price_real'];?></s>
                            <? } ?>
                            
                            <?=$tpl['photo']['price'];?> <?=$photo['photo_currency']?></div>
                            
                    <td>
                        <a class="editbtn" href="/do/photo"><?=TXT('EDIT')?></a>
            </table>    
<?
echo
    '<tr>'.
    '<td colspan=2>'.
    '<h3>'.TXT('PERSONAL_DATA').'</h3>'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('NAME').
    '<td><input type="text" name="contactname" id="contactname" value="'.$tpl['member']['name'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('FULLNAME').  
    '<td><input type="text" name="contactname2" id="contactname2" value="'.$tpl['member']['fullname'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('EMAIL').
    '<td><input type="text" name="useremail" id="useremail" value="'.$tpl['member']['mail'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('PHONE').
    '<td><input type="text" name="userphone" id="userphone" value="'.$tpl['member']['phone'].'" required />'.
    '<tr>'.
'<td>Phone</td>'.
'<td><input id="phone" type="text" tabindex="3" />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('COUNTRY').
    '<td>'.$tpl['member']['country'].
    '<tr>'.
    '<td class="photo-order-th">'.TXT('CITY').
    '<td><input type="text" name="usercity" id="usercity" value="'.$tpl['member']['city'].'" required />'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('ZIPCODE').
    '<td><input type="text" name="zipcode" id="zipcode" value="" />'.
    '<tr>'.
    '<td class="photo-order-th" width="100"><div id="delivery_address_name">&nbsp;</div>'.
    '<td><div id="delivery_address_input">&nbsp;</div>'.
    '<tr>'.
    '<td class="photo-order-th">'.TXT('DELIVERY_METHODS').
    '<td><div id="deliverybox"></div>'.
    '<tr>'.
    '<td align="right">'.
    '<td>'.
        '<div id="choosetime"></div>'.
        '<div id="deliveryprice"></div>'.
        '<div id="deliverytime"></div>'.
    '<script>
    $(document).ready(function() {
          get_delivery_type("'.$country_id.'");
    });    
    </script>'.
    '<tr>'.
    '<td valign=top colspan=2>'.
    '<h3>'.TXT('PAYMENT_METHODS').'</h3>'.
    $tpl['payment'].
    '<tr>'.
    '<td valign=top colspan=2>'.
    '<h3>'.TXT('ADDITIONAL_INFO').' <sup>('.TXT('OPTIONAL').')</sup> </h3>'.
    '<textarea name="addinfo" id="addinfo" onkeypress="return isNotMax(this)" maxlength="200"></textarea>'.
    '<input type="hidden" value="'.$session_id.'" name="order_session">'.
    $tpl['confirm'].
    '<tr>'.
    '<td colspan=2>'.
    '<input type="submit" value="" class="makeorderbutton">'.
'</table>'.
'</form>';
 
 
include chunk.'/google/checkout-conversion.block';
 
} else {
    echo $error;
}
?>
 

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 11:37 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss
вы внимательно читаете, что вам пишут?
 

Цитата:
<td class="photo-order-th">Телефон<td><input type="text" name="userphone" id="userphone" value="" required />


Цитата:
 $('#phone').mask('(999) 999-9999');  

 
разницу замечаете? по этой причине маска к тому элементу и не лепится

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 11:40 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо Вам огромное!
Изменил ID и все заработало )))
Можно к Вам обратить за помощью с доработкой сайта за $?
 
Добавлено:
Не срабатывает кнопка "Оформить заказ", пишет, что не приняли согласие с правилами, хотя галочка стоит

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 11:45 15-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss
вроде работает все, чего панику разводите?

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 19:24 15-04-2016
Johnboss



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Да я отрубил проверку на этой кнопке, поэтому и работает ))

Всего записей: 136 | Зарегистр. 20-12-2004 | Отправлено: 08:56 18-04-2016
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Johnboss
тогда чего от нас хотите? нужно видеть то, что не работает, чтобы найти проблему.

Всего записей: 15113 | Зарегистр. 20-09-2014 | Отправлено: 09:31 18-04-2016
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Как вставить jquery.js в tpl


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru