Форум

makc9I · #11 (**permalink**) 20.03.2013, 17:04

от внешних дивов можно абстрагироваться, они просто определяют положение текущего дня в неделе.

У меня отображается целая неделя, грубо говоря если сегодня среда, то понедельник и вторник будут обернуты в div class = "past", среда в div class="today", выходные в div class="holliday", остальные usual.

вот так выглядит блок с заказом:

<div class="order_box">
			<span class="time">7 : 00 - </span>
			<span class="destination">Вологда(5001)</span>
			<div class="seat1 place">Иванов Иван</div>
			<div class="seat2 place free">свободно</div>
			<div class="seat3 place free">свободно</div>
			<div class="seat4 place free">свободно</div>
			
			<div class="approved"> Статус:подтверждено</div>
</div>

Если мы кликаем на seat2 к примеру, то там должна появиться такая конструкция

<div class="seat2 place free">
   <form action="url" method="POST">
      <input type="text" name="name">
      <input type="submit" value="ok">
   </form>
</div>

Человек вводит туда свое ФИО, к примеру Сидоров Андрей, нажимает ок. Отрабатывается форма, данные улетают в базу, страница перезагружается и теперь мы видим такой блок:

<div class="order_box">
			<span class="time">7 : 00 - </span>
			<span class="destination">Вологда(5001)</span>
			<div class="seat1 place">Иванов Иван</div>
			<div class="seat2 place">Сидоров Андрей</div>
			<div class="seat3 place free">свободно</div>
			<div class="seat4 place free">свободно</div>
			
			<div class="approved"> Статус:подтверждено</div>
</div>

рони · #12 (**permalink**) 20.03.2013, 17:54

makc9I,
так?

<!DOCTYPE HTML>
<html>
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(function () {
                $(".free").mouseenter(function () {
                    $(this).text("бронь").css({
                        "background": "#FAD400",
                        "color": "#0000CD",
                        "cursor": "pointer"
                    })
                }).mouseleave(function () {
                    $(this).text("свободно").css({
                        "background": "",
                        "color": "",
                    })
                }).click(function () {
                    var myform = $("<form/>", {
                        "action": "url",
                        "method": "POST"
                    })
                    $("<input/>", {
                        "type": "text",
                        "name": "name"
                    })
                        .appendTo(myform);
                    $("<input/>", {
                        "type": "submit",
                        "value": "ok"
                    })
                        .appendTo(myform);
                    $(".free").off();
                    $(this).html(myform)
                });
            })
        </script>
    </head>
    <body>
        <div class="order_box">	<span class="time">7 : 00 - </span>
	<span class="destination">Вологда(5001)</span>

            <div class="seat1 place">Иванов Иван</div>
            <div class="seat2 place free">свободно</div>
            <div class="seat3 place free">свободно</div>
            <div class="seat4 place free">свободно</div>
            <div class="approved">Статус:подтверждено</div>
        </div>
    </body>

</html>

makc9I · #13 (**permalink**) 21.03.2013, 12:05

да, это именно то, что надо.
Только интересно, почему фокус с этого инпута уже никуда не пропадает, т.е. как только мы кликнули в поле, мы уже не может просто кликнуть в соседнее поле, ничего не произойдет. Думаю это логично, но нужна кнопка отмена, которая будет возвращать прежний вид полю("свободно" или "бронь" при наведении). Еще надо дать имя инпуту такое же как и имя класса дива, внутрь которого мы кликнули, т.е. seat1-seat4. Также я немного модифицировал данные о блоке, теперь внешний див имеет такой вид:

<div class="order_box" id="<уникальный id>">

Вот необходимо добавить скрытый инпут,value параметр которого будет содержать id родительского diva класса order_box.

Пока это все написал и буду пробовать реализовать, может и у самого получится

рони · #14 (**permalink**) 21.03.2013, 12:30

makc9I,
$(".free").off(); это отключило все прежние установки.
... кнопка отмена ))... вот так проект разрастается )))
пробуйте сами что неполучится страшивайте.

makc9I · #15 (**permalink**) 27.03.2013, 13:26

стал изучать курс по Jquery от codeSchool. Хоть и курс малюсенький, но я после работы прихожу уставший и это дело тянется уже неделю. Само задание почти не движется. Пытаюсь делать методом тыка и тех малых знаний, что уже получил с курса.
Кнопку отмена добавил, но не так, как надо.
добавил так:

$(document).ready(function () {
			$(".today .free, .usual .free, .holliday .free").mouseenter(function () {
				$(this).text("бронь")
					   .css({
							"background": "#FAD400",
							"color": "#0000CD",
							"cursor": "pointer"
						})
			}).mouseleave(function () {
				$(this).text("свободно")
					   .css({
							"background": "",
							"color": ""
						})
			}).click(function () {
                    var myform = $("<form/>", {
                        "action": "<?PHP $_SERVER['PHP_SELF']; ?>",
                        "method": "POST"
                    })
                   $("<button> отмена</button>")
                        .appendTo(myform);

Все бы хорошо, но кнопка обрабатывается методом, указанным в форме при клике, так как лежит внутри ее(формы). Можно конечно вместо кнопки сделать какой-нибудь span или div, но хочется именно кнопку без лишних заморочек со стилями, тем более что новые браузеры позволяют вставить кнопку где угодно. Не обязательно внутри формы.
Пытался сделать так:

...
.click(function () {
   $(this).append("<button> отмена</button>");
}

не получается так, грубо говоря мне надо просто добавить button ниже формы внутри этого же дива класса free. Я еще не научился грамотно ходить по DOMу видимо, и делаю какие-то нелепости.

makc9I · #16 (**permalink**) 27.03.2013, 17:36

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

makc9I · #17 (**permalink**) 28.03.2013, 10:09

вот такой получился код:

$(".today .free, .usual .free, .holliday .free").mouseenter(function () {
	$(this).text("бронь")
            .css({
		"background": "#FAD400",
		"color": "#0000CD",
		"cursor": "pointer"
             })
	}).mouseleave(function () {
		$(this).text("свободно")
		   .css({
			"background": "",
			"color": ""
  		    })
	}).click(function () {
                var myform = $("<form/>", {
                    "action": "<?PHP $_SERVER['PHP_SELF']; ?>",
                    "method": "POST"
                 })
                 $("<input/>", {
                     "type": "text",
                     "name": "name",
         	     "class": "name_input"
                  })
                    .appendTo(myform);

                  $("<input/>", {
                      "type": "submit",
                      "value": "ok",
  		      "id": "name_submit"
                    })
                      .appendTo(myform);
			
                   $(".free").off();
                   $(this).html(myform);
		   $(this).append("<button> отмена</button>")
		   $(this).css ({
			"cursor":"default"
		   })
           })
})

Теперь осталось как-то удалить всю форму по нажатию кнопки отмена.

makc9I · #18 (**permalink**) 28.03.2013, 11:13

добавление к листингу такого:

$("button").click (function(){
					$("#add_name_form").remove();
			})

не работает что-то

makc9I · #19 (**permalink**) 01.04.2013, 12:47

Практически все получилось.
Полная картина выглядит так:

Имеется такой блок:

<div class="order_box" id="56">
			<span class="time">10 : 00 - </span>
			<span class="destination">п. Молочное(5007)</span>
			<div class="seat1 place">Иванов</div>
			<div class="seat2 place">Петров</div>
			<div class="seat3 place free">свободно</div>
			<div class="seat4 place free">свободно</div>
			<a class="approve_btn" href="/index.php?&id=56"> подтвердить </a> 
			<div class="not_approved"> Статус:ожидает подтверждения</div>
		</div>

Визуально выглядит так:

При наведении на любую ячейку с надписью свободно видим следующее:

Клик по ячейке приводит к такому:

Вот код, который занимается обработкой сего чуда:

$(document).ready(function () {
	$(".today .free, .usual .free, .holliday .free")
	.mouseenter(function () {
		$(this).text("бронь")
			   .css({
					"background": "#FAD400",
					"color": "#0000CD",
					"cursor": "pointer"
				})
	}).mouseleave(function () {
		$(this).text("свободно")
			   .css({
					"background": "",
					"color": ""
				})
	}).click(function () {
			var myform = $("<form/>", {
				"action": "http://auto/index.php",
				"method": "POST",
				"id": "add_name_form"
			})
			$("<input/>", {
				"type": "text",
				"name": "name",
				"class": "name_input"
			})
				.appendTo(myform);
			$("<input/>", {
				"type": "submit",
				"value": "ok",
				"id": "name_submit"
			})
				.appendTo(myform);
				
			var cell_class = $(this).attr("class").slice(0,5);
			var order_id = $(this).parent().attr("id");
			
			$("<input/>", {
				"type":"hidden",
				"name": "place",
				"value": cell_class
				
			})
				.appendTo(myform);
				
			$("<input/>", {
				"type":"hidden",
				"name": "order_id",
				"value": order_id
				
			})
				.appendTo(myform);
			
						
			
								
			$(".free").off();
			$(this).html(myform);
			$(this).append("<button> отмена</button>");
			$(this).css ({
					"cursor":"default"
			})
			
			$("button").click (function(){
				$("#add_name_form").remove();
				$(this).remove();
								
			})
		})
})

Во всем этом есть одна брешь:

$(".free").off();

Как только мы вызываем метод off, мы лишаемся всех настроек для нашей ячейки, но это необходимо, чтобы можно было кликнуть в input text для ввода фамилии, и выводы мыши за пределы ячейки не приводили к отмене обработки.

Но, вдруг мы случайно кликнули в ячейку и хотим отменить это действие, для этого я и добавил кнопку "отмена".
Вот ее обработка:

$("button").click (function(){
   $("#add_name_form").remove();
   $(this).remove();
})

Все, что я могу сделать, это удалить созданную ранее форму. Но хочется, чтобы вся обработка положения мышки также вернулась, думал, что для этого достаточно прикрутить назад такое:

$(".today .free, .usual .free, .holliday .free")
	.mouseenter(function () {
		$(this).text("бронь")
			   .css({
					"background": "#FAD400",
					"color": "#0000CD",
					"cursor": "pointer"
				})
	}).mouseleave(function () {
		$(this).text("свободно")
			   .css({
					"background": "",
					"color": ""
				})
	})

Но как оказалось, прикручивать назад надо вообще весь код, но ведь в этом коде присутствует сама обработка нажатия на кнопку "отмена" и происходит рекурсия. Да и в целом не очень разумно дважды вызывать один и тот же код.
Возникли мысли, что надо как-то обойтись без

$(".free").off();

Но при этом как-то блокировать обработку мыши на момент клика по ячейке (бронь), чтобы выход за пределы ячейки не приходили к сбросу отображения формы, и сам клик в input text обрабатывался именно как клик туда(чтобы вводить текст), а не как клик по ячейке (бронь).

Вот возникла проблема, решения пока не нашел.

makc9I · #20 (**permalink**) 01.04.2013, 14:22

рони посоветовал использовать метод bind, теперь я реализовал все обработчики через него, вышло примерно так:
вместо

.mouseenter(function () {}

получилось

.bind("mouseenter",( function () {} )

При обработке клика в ячейку я делаю следующее

$(".free").unbind();

Как я понимаю, при нажатии на кнопку отмена нам необходима снова вызвать bind, но помимо обработчиков нужны ведь еще и сами действия, т.е. я принципиально не понимаю разницы между off и unbind.

Форум

Справочник

Discord чат

Курсы javascript