Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   установка фокуса в форме логина на поле имени (https://javascript.ru/forum/jquery/68240-ustanovka-fokusa-v-forme-logina-na-pole-imeni.html)

winch 04.04.2017 06:16

установка фокуса в форме логина на поле имени
 
...вроде простая задача, но пришлось с ней больше часа просидеть. в результате:

так не работает
$(function(){
      $("input[name='login_name']").trigger("focus");
});

а вот так работает
setTimeout(function(){
      $("input[name='login_name']").trigger("focus");
},0);


кто нибудь мог бы объяснить почему?

p.s. сама форма логина появляется в результате ajax вызова.

ksa 04.04.2017 08:30

Цитата:

Сообщение от winch
кто нибудь мог бы объяснить почему?

Так ты сам дал ответ
Цитата:

Сообщение от winch
сама форма логина появляется в результате ajax вызова

Т.е. на момент "готовности документа" того элемента просто нет на странице.

winch 04.04.2017 09:03

но этот код скрипта появляется (и следовательно выполняется) только вместе с формой.

winch 04.04.2017 09:18

причем если сделать, например, так:
$(function(){
      $("input[name='login_name']").css({border:'red'}).trigger("focus");
});

то красная рамочка вокруг поля появляется, а фокус ставиться всё равно не хочет.

ksa 04.04.2017 09:24

Цитата:

Сообщение от winch
а фокус ставиться всё равно не хочет

Так может его "забирает" другой элемент...

winch 04.04.2017 09:45

а как другой элемент может "забирать фокус" без js кода?
почему тогда через setTimeout работает?

ksa 04.04.2017 10:24

Цитата:

Сообщение от winch
а как другой элемент может "забирать фокус" без js кода?

Мой хрустальный шар маленько поистерся, т.ч. картинка смазанная.



Цитата:

Сообщение от winch
почему тогда через setTimeout работает?

Потому как он выполняется позднее всех и его уже никто не "перебивает".

winch 04.04.2017 11:07

а тогда каким образом можно протрейсить, чтобы найти того, кто фокус забирает?

рони 04.04.2017 11:10

Цитата:

Сообщение от winch
сама форма логина появляется в результате ajax вызова

в ajax и надо добавлять фокус

winch 04.04.2017 11:19

Цитата:

Сообщение от рони (Сообщение 449202)
в ajax и надо добавлять фокус

в смысле? так?
$.ajax({ url: '...',
	success: function(res){
		$("input").focus();
	}
});


мне так неудобно, поскольку ajax вызов у меня универсальный, для разных форм и диалоговых окон, а фокус мне надо только в форме логина ставить.

рони 04.04.2017 11:25

winch,
да, но после того как добавлена форма в конце success

ksa 04.04.2017 11:26

Цитата:

Сообщение от winch
а тогда каким образом можно протрейсить, чтобы найти того, кто фокус забирает?

Как вариант, не ставить фокус... После загрузки всей страницы смотреть у какого элемента он есть.

laimas 04.04.2017 11:30

Цитата:

Сообщение от winch
поскольку ajax вызов у меня универсальный, для разных форм и диалоговых окон, а фокус мне надо только в форме логина ставить

А что мешает работать с атрибутами? Если есть например пользовательский атрибут focus, значит устанавливаем, или через атрибут data-post="операция". Речь то об универсальности, вот и описывайте "универсальное".

winch 04.04.2017 11:36

Цитата:

Сообщение от ksa (Сообщение 449205)
Как вариант, не ставить фокус... После загрузки всей страницы смотреть у какого элемента он есть.

так пробовал - ни у кого нету фокуса.

winch 04.04.2017 11:39

Цитата:

Сообщение от рони (Сообщение 449204)
winch,
да, но после того как добавлена форма в конце success

да понял конечно, что после добавления формы. но вот загвозка:
мне так неудобно, поскольку ajax вызов у меня универсальный, для разных форм и диалоговых окон, а фокус мне надо только в форме логина ставить.

winch 04.04.2017 11:46

Цитата:

Сообщение от laimas (Сообщение 449206)
А что мешает работать с атрибутами? Если есть например пользовательский атрибут focus, значит устанавливаем, или через атрибут data-post="операция". Речь то об универсальности, вот и описывайте "универсальное".

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

рони 04.04.2017 12:04

Цитата:

Сообщение от winch
мне так неудобно,

меняйте алгоритм ... проще добавить условие чем мудрить с неким сторожем, который будет ждать появления нужной формы и ставить фокус. добавили форму, добавили фокус, предусмотрите callback в вашем ajax... хотите трудностей ройте в сторону MutationObserver

laimas 04.04.2017 12:04

Причем тут шаблоны и индивидуальные JS? Ну не с небес же сваливаются формы и прочее на страницах, что-то же их определяет, что?
Вы пишите об универсальном асинхронном запросе, а что в данном случае есть универсальность как не клиентский обработчик выполняющий различные определенные задачи?

var define = {
    a: function() {
        //установить фокус
    },
    b: function() {
        //раскрасить в горошек
    } 
}

success: function(data) {
    var d = $(data).appendTo(selector).find('[data-xxx]')
    //если есть определения задач, то цикл и их выполнение 
}


А уж серверу определить желаемое не сложно.

winch 04.04.2017 12:52

var define = {
    a: function() {
        //установить фокус
    },
    b: function() {
        //раскрасить в горошек
    }
}

этот код где должен быть размещен, на основной странице или в подгружаемой форме?

laimas 04.04.2017 12:55

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

Через атрибуты ведь можно задать не только операцию/операции, но и аргументы.

winch 04.04.2017 13:01

т.е. на основной странице. так?

laimas 04.04.2017 13:04

А что есть основная страница?
Ну что за вопросы. Это описание операций для асинхронного запроса, где он подключается, там и должно быть описание. Просто поместите этот объект в тот же скрипт где и код самого запроса. А уже где вы его подключаете мне не ведомо.

winch 04.04.2017 13:13

основная страница, в моем понимании выглядит примерно так:
<html>
<head>
	<script src="../jquery.js"></script>
	<script>
		function  AjaxLoad(){ //  универсальная функция, обеспечивающая загрузку
			….
		}
	</script>
</head>
<body>
	<div>......</div>
<body/>
</html>

winch 04.04.2017 13:16

а подгружаемая форм выглядит примерно так:
<form>
	<input />
	…..
</form>
<script>
$(function(){
	// код обслуживающий эту форму
});
</script>

laimas 04.04.2017 13:19

<html>
<head>
    <script src="../jquery.js"></script>
    <script>
        //объект функций описывающий определяемые сервером задачи
        var define = {
            
        };

        function  AjaxLoad(){ //  универсальная функция, обеспечивающая загрузку
            ….
        }
    </script>
</head>
<body>
    <div>......</div>
<body/>
</html>


Какой смысл их подключать отдельным файлом. Хотя если скрипты объемные, то для удобства можно в режиме отладки иметь и отдельные подключаемые файлы, а вот на сервер помещать упакованные в один.

laimas 04.04.2017 13:21

Цитата:

Сообщение от winch
а подгружаемая форм выглядит примерно так

Как душе угодно, но если завтра потребуется установить фокус и у другой формы, что писать для нее свой обработчик загружаемый с формой?

winch 04.04.2017 13:28

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

winch 04.04.2017 13:32

Цитата:

Сообщение от laimas (Сообщение 449232)
Как душе угодно, но если завтра потребуется установить фокус и у другой формы, что писать для нее свой обработчик загружаемый с формой?

я всегда пишу для каждой формы свой индивидуальный обработчик.
общий у меня только аякс загрузчик.

laimas 04.04.2017 13:56

То, что ваш загрузчик принимает от сервера код форм и помещает их на страницу никоим образом не означает, что он универсален. А если наряду с загрузкой форм загружается и скрипт их обслуживающий, то какие тогда проблемы?

И вообще, универсальность не может быть абсолютной, есть границы, в которых приложение либо технический аппарат может выполнять операции/функции расширяющие его возможности, но логически связанные. Вы же не станете к самолету пытаться прицепить плуг для вспашки полей только ради универсальности.

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

И такие различные задачи, которые будут востребованы, и должны быть определены. Они не являются частью индивидуальных обработчиков тех или иных форм, или прочих элементов. Это набор, операции, которые могут потребоваться при выполнении различных задач/обработчиков.

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

{"add":{"#a":"data",".b":"data"}, - поместить данные в объект id=a и классом b
"msg":"data", - вывести сообщение
"opt":[1,2,3] - определить значения переменных
"exe":{"a":[...],...} - выполнить функции
}

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

winch 04.04.2017 15:04

Цитата:

Сообщение от laimas (Сообщение 449235)
То, что ваш загрузчик принимает от сервера код форм и помещает их на страницу никоим образом не означает, что он универсален.

он ещё создает псевдо-окно позиционирует его и помещает туда полученный аяксом код.
пример его работы можно посмотреть здесь: http://rem-mastera.ru/DemandOrdersList
если нажать на: "войти на сайт", "откликнуться", "сделать заказ" то будут подгружаться различные формы.

Цитата:

Сообщение от laimas (Сообщение 449235)
А если наряду с загрузкой форм загружается и скрипт их обслуживающий, то какие тогда проблемы?

Проблема была в том что скрипт, загружающийся с формой не хотел ставить фокус на на поле логина. С этого вопроса я и начал этот топик.


я абсолютно согласен с тем, что любая универсальность имеет границы разумности, и самолету плуг не нужен :)

Для редиректа на другую страницу после отправки форм через ajax я тоже использую подобный механизм: сервер, после обработки формы отдает json объект, универсальный отправщик ajax-форм проверяет наличие в этом json поля redirect, если такое поле имеется, бараузер перенаправляется по указанному url.

laimas 04.04.2017 15:45

Цитата:

Сообщение от winch
он ещё создает псевдо-окно

да что угодно, отделите котлеты от мух и все встанет на свои места.


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