VPF::Не отправляется POST-запрос - Форум программистов

slavenk

Дата 28.1.2015, 19:11 (ссылка)

(нет голосов)

Загрузка ...

TheAthlete

Профиль
Группа: Участник
Сообщений: 69
Регистрация: 22.10.2009

Репутация: нет
Всего: нет

Здравствуйте!
Изучаю jQuery по книге "Адам Фримен - jQuery для профессионалов (Expert's Voice) - 2013", Разбираю код реагирования на изменения значений формы:

Код


<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-1.7.js" type="text/javascript"></script>
    <script src="jquery.tmpl.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var data = [
               { name: "Astor", product: "astor", stocklevel: "10", price: "2.99"},
               { name: "Daffodil", product: "daffodil", stocklevel: "12", price: "1.99"},
               { name: "Rose", product: "rose", stocklevel: "2", price: "4.99"},
               { name: "Peony", product: "peony", stocklevel: "0", price: "1.50"},
               { name: "Primula", product: "primula", stocklevel: "1", price: "3.12"},
               { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: "0.99"},
            ];
  
            var templResult = $('#flowerTmpl').tmpl(data);
            templResult.slice(0, 3).appendTo('#row1');
            templResult.slice(3).appendTo("#row2");
                
            $('input').focus(handleFormFocus).blur(handleFormFocus);
         
            function handleFormFocus(e) {
                var borderVal = e.type == "focus" ? "medium solid green" : "";
                $(this).css("border", borderVal);
            }     
  
            var total = $('#buttonDiv')
                .prepend("<div>Total Items: <span id=total>0</span></div>")
                .css({clear: "both", padding: "5px"});
            $('<div id=bbox />').appendTo("body").append(total).css("clear: left");
                
            $('input').change(function(e) {
                var total = 0;
                $('input').each(function(index, elem) {
                    total += Number($(elem).val());
                });            
                $('#total').text(total);
            });     
        });
  </script>
    <script id="flowerTmpl" type="text/x-jquery-tmpl">
        <div class="dcell">    
            <img src="${product}.png"/>
            <label for="${product}">${name}: </label>
            <input name="${product}" value="0" required />
        </div>
    </script>
</head>
<body>
    <h1>Jacqui's Flower Shop</h1>
    <form method="post" action="http://node.jacquisflowershop.com/order">
        <div id="oblock">        
            <div class="dtable">
                <div id="row1" class="drow">
                </div>
                <div id="row2"class="drow">
                </div>            
            </div>
        </div>
        <div id="buttonDiv"><button type="submit">Place Order</button></div>                    
    </form>
</body>
</html>

Если нажать на submit, то ничего не происходет. Если закомментировать код

Код


var total = $('#buttonDiv')
                .prepend("<div>Total Items: <span id=total>0</span></div>")
                .css({clear: "both", padding: "5px"});
            $('<div id=bbox />').appendTo("body").append(total).css("clear: left");
                
            $('input').change(function(e) {
                var total = 0;
                $('input').each(function(index, elem) {
                    total += Number($(elem).val());
                });            
                $('#total').text(total);
            });

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

Добавлено через 5 минут и 45 секунд
Есть предположение, что вся проблема в том, что JS добавляет код с помощью prepend, в рузультате не срабатывает submit.

slavenk

Дата 28.1.2015, 19:45 (ссылка)

(нет голосов)

Загрузка ...

TheAthlete

Профиль
Группа: Участник
Сообщений: 69
Регистрация: 22.10.2009

Репутация: нет
Всего: нет

Проблему решил: суть проблемы в том, что div id=bbox захватывает кнопку, в результе submit находится вне формы. Нужно поменять appendTo("body") на appendTo("form"):

Код


$('<div id=bbox />').appendTo("body").append(total).css("clear: left");

на

Код


$('<div id=bbox />').appendTo("form").append(total).css("clear: left");

_zorn_

Дата 28.1.2015, 21:32 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: нет
Всего: 12

Совет - изучайте jQuery после того как изучите javascript и css селекторы.
Причем в случае jQuery, css селекторы приорететней.

Это сообщение отредактировал(а) _zorn_ - 28.1.2015, 21:34

slavenk

Дата 29.1.2015, 12:08 (ссылка)

(нет голосов)

Загрузка ...

TheAthlete

Профиль
Группа: Участник
Сообщений: 69
Регистрация: 22.10.2009

Репутация: нет
Всего: нет

Полностью согласен. Я впринципе на среднем уровне знаю JS и css, но немного подзабыл.

sQu1rr

Дата 29.1.2015, 12:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

А еще советую писать максимально гибко (а для меня просто красиво)

Код


$('<div>', { id: 'bbox' }).appendTo('form').append(total).css({ clear: 'left' });

Тогда вы можете спокольно заменить ID или аттрибут clear на переменные без редактирования кода, выставления правильных ковычек и всего такого.

PS
Не всегда можно сделать так что бы кнопка была в форме. Тогда ее можно вызвать с помощью

Код


$('form').submit();

slavenk

Дата 29.1.2015, 18:45 (ссылка)

(нет голосов)

Загрузка ...

TheAthlete

Профиль
Группа: Участник
Сообщений: 69
Регистрация: 22.10.2009

Репутация: нет
Всего: нет

Спасибо! Буду пробовать. Можете подсказать еще такой вопрос:
нужно обработать radiobutton на onchange с помощью jquery. Создал тестовый файл, все работает, в рабочем коде - нет. Код такой:

Код


<fieldset id="foobar">
  <label>foo?
    <input name="foobar" type="radio" value="foo" />
  </label>
  <label>bar?
    <input name="foobar" type="radio" value="bar" />
  </label>
</fieldset>  
<script>
$(function () {
    $('#foobar input[type=radio]').change(function(){
      alert ( $(this).val() );
      });
})
</script>

Подскажите пожалуйста, куда копать, где искать ошибку?

Это сообщение отредактировал(а) slavenk - 29.1.2015, 18:47

Aliance

Дата 30.1.2015, 08:26 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

Что значит в рабочем коде не работает. Если в тестовом работает, а в рабочем нет - значит код написан правильно, но подключен не верно. Либо есть что-то, что мешает. Этого не угадать, видя только тестовый код. Что консоль пишет? В консоле можете набрать ваш селектор и посмотреть, находит ли он что-либо. jQuery вообще подключен? Какой версии, такой же как и в тестовом примере?

ПС: Вместо [type=radio] можно написать :radio ( http://api.jquery.com/radio-selector/ )

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »