Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Самопроизвольное открытие datepicker в диалоговом окне (https://javascript.ru/forum/jquery/42922-samoproizvolnoe-otkrytie-datepicker-v-dialogovom-okne.html)

Хиросим 14.11.2013 03:04

Самопроизвольное открытие datepicker в диалоговом окне
 
Всем привет.
Не могу разобраться, прошу подмоги.
Банальная задачка открыть форму с календариком в диалоговом окне. И календарик и окно беру из jQuery UI
Проблема в том, что при открытии окна открывается и календарь, что не желательно. Кроме того - после неудачной валидации формы функцией sendRequest календарь тоже открывается. (функция sendRequest на самом деле кривая, привел ее потомучто не могу понять почему она инициирует окрытие календаря.)
<div id="dialog" style="display:none">
<form action="#" name="request" method="post">
        <label>Дата заезда</label><input class="ahtung" id="request_datepicker" name="request[date_begin]" type="text" readonly="readonly" value="" />
        <input id="obj_id" name="request[obj_id]" type="hidden" value="" />
        <input name="request_submit" type="submit" value="Отправить запрос" />
</form>
</div>

$(function()
{
	$("#dialog").dialog(
	{
		autoOpen: false,
		position: ['center', 'center'],
		modal: true,
		resizable: false,
		width: 750,
		hide: 'explode',
		show: 'fold'
	});
	
	$(".request").click(function()
	{
		$('form[name=request]').submit(sendRequest);
		$("#dialog #obj_id").val($(this).attr('id'));
		$("#dialog").dialog("option", "title", 'Запрос цен и свободных мест для объекта - ' + $(this).attr('name'));
		$("#dialog").dialog("open");
		
		$('#request_datepicker').datepicker(
		{
			dateFormat: "yy-mm-dd",
			minDate: 0
		});
		
	});
	
	function sendRequest()
	{
		$('#dialog .ahtung').each(function()
		{
			if(!$(this).val())
			{
				alert('Не заполнено обязательное поле "' + $(this).siblings('label').html()+ '"'); 
				return false;
			}
		})
		return false;
	}
});

DjDiablo 14.11.2013 08:49

Работающий пример где нибудь в fiddle покажи.

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

Хиросим 14.11.2013 14:30

Вот закинул балванку на времянку)
http://igrushkivdom.ru/

Хиросим 14.11.2013 14:36

Забыл.
Нужно на кнопу "наличие мест" жмакнуть.
В опере валидация формы не открывает календарь, в фаерфоксе открывает
???

DjDiablo 14.11.2013 18:02

Я не могу редактировать этот код и проверить свои мысли. К сожалению пока ты не выложишь кусок кода на http://jsfiddle.net/ который я или другие форумчане сможем редактировать то мы не сможем проверять свои идеи и гипотезы. Почему и просил пример для редактирования.

На вскидку могу предложить несложный трюк.
//подключаем datepicker
 $('#request_datepicker').datepicker({
     dateFormat: "yy-mm-dd",
     minDate: 0
 });

//подключаем диалог
$("#dialog").dialog({
     autoOpen: false,
     open: function (event, ui) {
         //если есть открытые datepicker тогда закроем их
         if ($(".ui-datepicker").is(":visible")) $(".ui-datepicker").hide();
      },
      close: function () {
         $(this).dialog("close");
      }
});

//теперь можно открывать диалог
$('какаятокнопка').click(function(){
    $("#dialog").dialog("open");
})

Хиросим 14.11.2013 18:19

как пожелаете))
http://jsfiddle.net/bb2G2/

DjDiablo 14.11.2013 18:40

<input id="from" type="text" tabindex="-1" />

вот смотри сам
http://jsfiddle.net/bb2G2/2/


и вот этот способ кстатии тоже работает.
if ($(".ui-datepicker").is(":visible")) $(".ui-datepicker").hide();

Хиросим 14.11.2013 19:05

DjDiablo,
Спасибо.
А гдето можно прочитать о физике процесса? Хочется же понять как жыкверя работает, она что при открытии диалогового окна по всем инпутам фокусом пробегает ??? если да, то нахрена?? ну и т.д.

DjDiablo 14.11.2013 19:05

Вот еще одна демка
http://jsfiddle.net/bb2G2/4/

Почитать разве что в исходниках. Думаю просто фокус на первое поле устанавливается при открытии диалога.
Если datepicker будет вторым полем а не первым то открываться он не будет.
Вот пример http://jsfiddle.net/bb2G2/5/


Часовой пояс GMT +3, время: 22:49.