Форум Сайтостроение Веб-строительство

Форма подгружается ajax, как вывести до клика только часть формы?

P
На сайте с 06.01.2009
Offline
592
postavkin
789

Здравствуйте.

Помогите, пож-та.

В коде html

	
<div id="load"></div>
<div id="cont"></div>

в js searchform.js


$.ajax
 ({
     type: "POST",
     url: "/forma/search.php",
     data: {page : page, str: str, urlnash: urlnash, urlnash2: urlnash2},
     success: function(msg)
     {
         $("#container").ajaxComplete(function(event, request, settings)
         {
             loading_hide();
             $("#container").html(msg);

         });
     }
 });

В search.php форма некоторым набором полей и вывод списка товаров. Т.е. юзер выбрал нужные характеристики, нажал "найти", searchform.js считывает что заполнил юзер, обращается повторно к search.php и выводит юзеру снова форму и товары в соответствии с выбранными характеристиками.

Сейчас получилось свернуть весь блок с формой и товарами.

т.е. я в html сделал так


<div class="accordion">
<h3>форма фильтрации товаров</h3>
<div class="mess _1">
     <div id="load"></div>
     <div id="cont"></div>
</div>
</div>

а в общий all.js к которому идет обращение в html


<script src="/script/all.js"></script>
<script src="/script/searchform.js"></script>

дописал чтобы блок весь был свернут, т.е. в all.js есть


	$(".accordion .mess").hide();
	$(".accordion h3").eq(0).css("color","#FF6600");
	
    $(".accordion h3").click(function(){

        $(this).next(".mess").slideToggle("slow")
        .siblings(".mess:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
     });

Подскажите, пож-та, есть ли возможность свернуть не весь блок, а всё кроме первой строки формы которая прописана в search.php ?

спасибо

ps

кусок кода

$(".accordion .mess").hide();

и т.д. пробовал ставить в searchform.js предварительно обрамив нужные куски в search.php но само собой ничего не получилось, так как изначально все работает как надо, но при использовании формы юзером и нажатии кнопки найти, вся форма снова сворачивается.

Александр И
На сайте с 20.11.2016
Offline
24
Александр И
#1
postavkin:
Подскажите, пож-та, есть ли возможность свернуть не весь блок, а всё кроме первой строки формы которая прописана в search.php ?

Я не уверен, что правильно вас понял.

Было бы хорошо, если бы вы визуализировали то, что хотите получить.

Или можете показать пример в личные сообщения.

Как вариант, вместо hide(), вы просто можете задать оформление для .mess.invisible ($('.accordion .mess').toggleClass('invisible') вместо .hide()) - ограничить высоту блока / скрыть определенные вложенные блоки/поля ввода.

Например, .mess.invisible {max-height: 320px; overflow-y: hidden;}

Если нужно скрыть все поля ввода, кроме первого .mess.invisible input ~ input {display: none;}

Чтобы обрезание блока выглядело лучше, можно добавить эффект размывания и стрелочку/кнопку "Развернуть все".

S
На сайте с 30.09.2016
Offline
469
Sitealert
#2
postavkin:
всё кроме первой строки формы

Эээ... в форме как бы не строки, а поля... Заворачиваете всё, что надо, в дивы, и прячете.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
P
На сайте с 06.01.2009
Offline
592
postavkin
#3

Вот как сейчас сделано - вся форма и товары скрыты, открыв по нажатию.Дальше при подборе товара форма сама не скрывается.

[ATTACH]159474[/ATTACH]

Вот что нужно в итоге

[ATTACH]159475[/ATTACH]

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

[ATTACH]159476[/ATTACH]

jpg 159474.jpg
jpg 159475.jpg
jpg 159476.jpg
S
На сайте с 30.09.2016
Offline
469
Sitealert
#4

Ну так задайте блок внутри формы и сворачивайте его.

P
На сайте с 06.01.2009
Offline
592
postavkin
#5

Александр И, спасибо за вариант. Не сможете ли помочь? https://jsfiddle.net/e0weyz3v/

спасибо

---------- Добавлено 19.01.2017 в 01:20 ----------

Sitealert, сворачиваю блок как на картинке №2 выше, разворачиваеь юзер, пользуется формой или пагинацией, в итоге нажав на кнопку - все обратно сворачивается.

S
На сайте с 30.09.2016
Offline
469
Sitealert
#6
postavkin:
разворачиваеь юзер, пользуется формой или пагинацией, в итоге нажав на кнопку - все обратно сворачивается.

Значит, не тот блок задан на сворачивание по клику.

P
На сайте с 06.01.2009
Offline
592
postavkin
#7
Sitealert:
Значит, не тот блок задан на сворачивание по клику.

Извините, мне по клику надо не сворачивать, а разворачивать.

Там все сложнее, сворачивается обратно, так как hide прописано в js к которому скрипт обращается при пересчете товаров подходящих под характеристики юзера. Я понимаю в чем проблема, но не знаю, как решить.

S
На сайте с 30.09.2016
Offline
469
Sitealert
#8
postavkin:
Извините, мне по клику надо не сворачивать, а разворачивать

А юзер нажимает на кнопку не кликом?

postavkin:
в итоге нажав на кнопку - все обратно сворачивается.


---------- Добавлено 19.01.2017 в 01:38 ----------

postavkin:
hide прописано в js к которому скрипт обращается при пересчете товаров подходящих под характеристики юзера. Я понимаю в чем проблема, но не знаю, как решить.
Прописать на hide то, что надо.
danforth
На сайте с 18.12.2015
Offline
153
danforth
#9

Вы бы сайт скинули, чтобы в консоли можно было писать конкретно на вашем случае. А то jsfiddle на вашем примере не описывает всех ваших требований.

Вам что-то подобное нужно?

https://jsfiddle.net/qp5rv91y/

Junior Web Developer
P
На сайте с 06.01.2009
Offline
592
postavkin
#10
danforth:
Вы бы сайт скинули, чтобы в консоли можно было писать конкретно на вашем случае. А то jsfiddle на вашем примере не описывает всех ваших требований.
Вам что-то подобное нужно?
https://jsfiddle.net/qp5rv91y/

Да, так и сделано, но хочу чтобы часть полей видимая была

/ru/forum/comment/14880867

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий