← Вернуться в раздел «Web-программирование»

» Как вставить jquery.js в tpl

Автор: Johnboss
Дата сообщения: 15.04.2016 09:42

Добрый день!

Хочу прикрутить на сайт маску с вводом телефона 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']?> <?=$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"> </div>'.
    '<td><div id="delivery_address_input"> </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;
}
?>

Автор: Mavrikii
Дата сообщения: 15.04.2016 09:46

Johnboss

Цитата:

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

ссылку нужно давать - сразу будет видно в чем дело.

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

Цитата:

</body>
</html>

<?php

Автор: Johnboss
Дата сообщения: 15.04.2016 10:14

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

phone.php

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

Автор: Mavrikii
Дата сообщения: 15.04.2016 10:17

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 - следствие первых двух

Автор: Johnboss
Дата сообщения: 15.04.2016 10:24

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

Автор: Mavrikii
Дата сообщения: 15.04.2016 10:30

Johnboss

Цитата:

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

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

Автор: Johnboss
Дата сообщения: 15.04.2016 10:40

Если честно, то я не понял откуда взялся второй )) вставлял один, но "топором".
Может особенность движка.

Автор: Mavrikii
Дата сообщения: 15.04.2016 10:41

Johnboss

Цитата:

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

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

Цитата:

$('#phone').mask('(999) 999-9999');

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

Автор: Johnboss
Дата сообщения: 15.04.2016 11:04

Да, действительно работает!
Я понял, что заработало, после того, как я вынес библиотеки .js в другую папку.

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

Автор: Mavrikii
Дата сообщения: 15.04.2016 11:06

Johnboss

Цитата:

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

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

Автор: Johnboss
Дата сообщения: 15.04.2016 11:15

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

Автор: Mavrikii
Дата сообщения: 15.04.2016 11:28

Johnboss

Цитата:

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

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

Автор: Johnboss
Дата сообщения: 15.04.2016 11:31

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

Автор: Mavrikii
Дата сообщения: 15.04.2016 11:34

Johnboss

Цитата:

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

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

Автор: Johnboss
Дата сообщения: 15.04.2016 11:37

Вот код

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

Автор: Mavrikii
Дата сообщения: 15.04.2016 11:40

Johnboss
вы внимательно читаете, что вам пишут?

Цитата:

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

Цитата:

$('#phone').mask('(999) 999-9999');

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

Автор: Johnboss
Дата сообщения: 15.04.2016 11:45

Спасибо Вам огромное!
Изменил ID и все заработало )))
Можно к Вам обратить за помощью с доработкой сайта за $?

Добавлено:
Не срабатывает кнопка "Оформить заказ", пишет, что не приняли согласие с правилами, хотя галочка стоит

Автор: Mavrikii
Дата сообщения: 15.04.2016 19:24

Johnboss
вроде работает все, чего панику разводите?

Автор: Johnboss
Дата сообщения: 18.04.2016 08:56

Да я отрубил проверку на этой кнопке, поэтому и работает ))

Автор: Mavrikii
Дата сообщения: 18.04.2016 09:31

Johnboss
тогда чего от нас хотите? нужно видеть то, что не работает, чтобы найти проблему.

Страницы: 1

Предыдущая тема: Jquery .hasClass в условии не срабатывает

Форум Ru-Board.club — поднят 15-09-2016 числа. Цель - сохранить наследие старого Ru-Board, истории становления российского интернета. Сделано для людей.