Всплывающие окна

[DmitryBorisenko33]

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

[renat2985]

Привет. У нас есть класс hidden "class":"hidden" который скрывает блок.
И есть js функция toggle(' ') которой можно задать имя блока и она будет добавлять/удалять с блока класс hidden. Тем самым будет скрывать и показывать ваш блок.

js функции выполнять можно только в линках "type":"link". Все это выглядит примерно таким образом:

  {
   "type":"text",
   "name":"my-block",
   "title":"TEXT TEXT TEXT TEXT",
   "class":"hidden"
  },
  {
   "type":"link",
   "title":"test link",
   "action":"javascript:toggle('my-block');",
  },

"type":"text" - можно заменять на любой другой тип.

Если хочется что бы текс был как бы в всплывающем поле необходимо добавить класс pop-up и стили с нужными вам размерами и позицией, ну и кнопку сделаем немного красивее, получится так:

  {
   "type":"text",
   "name":"my-block",
   "title":"TEXT TEXT TEXT TEXT",
   "style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;",
   "class":"pop-up hidden"
  },
  {
   "type":"link",
   "title":"test link",
   "action":"javascript:toggle('my-block');",
   "class":"btn btn-block btn-warning"
  },

Если хочется добавить крестик в этот выпадающий блок, код будет таким:

  {
   "type":"text",
   "name":"my-block",
   "title":"<button class=\"close\" onclick=\"toggle('my-block')\">×</button>TEXT TEXT TEXT TEXT",
   "style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;",
   "class":"pop-up hidden"
  },

Если нажимая на кнопку хотим отправить GET и показать наш блок, кнопка должна выглядеть так:

  {
   "type":"link",
   "title":"test link",
   "action":"javascript:toggle('my-block');send_request(this,'tut_get_url_Suda_mozno_dobavitj_peremennie')",
   "class":"btn btn-block btn-warning"
  },

Ну а более правильный способ наверное будет таким. Как только мы нажмем на кнопку, у нас появится скрытое поле с картинкой и надписью Загрузка. Страничка к которой мы делаем GET должна вернуть ответ в json формате:
{"title":"Загрузка завершена, все делали."}
И когда она его вернет этот текст заменит старый в вашем всплывающем окне.

  {
   "type":"text",
   "name":"my-block",
   "title":"<div class=\"loader\"></div><h3>{{LangLoading}}</h3>",
   "style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;",
   "class":"pop-up hidden"
  },
  {
   "type":"link",
   "title":"test link",
   "action":"javascript:toggle('my-block');send_request(this,'tut_get_url_Suda_mozno_dobavitj_peremennie','[[my-block]]')",
   "class":"btn btn-block btn-warning"
  },

---

В дополнение, пришла еще идея, не проверял но должно работать:
У нас есть еще response, в котором мы можем указать имя блока в который вставить изменения которые пришли отправив GET.

  {
   "type":"text",
   "name":"my-block",
   "title":" "
  },
  {
   "type":"button",
   "title":"test link",
   "action":"get=[[peremennaja]]&test=2",
   "response":"[[my-block]]",
   "class":"btn btn-block btn-warning"
  },

И страничка к которой мы делаем GET должна вернуть примерно такой json:
{"title":"Тут какой-то ваш текст","style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;","class":"pop-up"}

Если есть идеи как это все сделать более изящно, предлагайте.

[DmitryBorisenko33]

Сейчас проверяю. Иду постепенно. Спасибо Ренат.

[DmitryBorisenko33]

Последний вариант с response работает четко!!
Думаю что он самый изящный из всех. Предпоследний вариант сделать не получилось.

[renat2985]

В таком случае вот так буде лучше, что бы меньше передавать в ответе пришедшего от GET. Т.к. его ответ проблематично редактировать.

{
  "type":"text",
  "name":"my-block",
  "style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;",
  "class":"hidden"
 },
 {
  "type":"button",
  "title":"test link",
  "action":"get=[[peremennaja]]&test=2",
  "response":"[[my-block]]",
  "class":"btn btn-block btn-warning"
 },

Ответ на GET:
{"title":"Тут какой-то ваш текст","class":"pop-up"}

[DmitryBorisenko33]

Со стороны ардуино должно выглядеть так:

HTTP.on("/getSt", HTTP_GET, []() {

    String tmp = "{}";
    jsonWrite(tmp, "title", "<button class=\"close\" onclick=\"toggle('my-block')\">×</button>" + stateMQTT());
    jsonWrite(tmp, "style", "position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;");
    jsonWrite(tmp, "class", "pop-up hidden");

    HTTP.send(200, "application/json", tmp);
  });

И на странице должно быть так:

`{
   "type":"text",
   "name":"my-block"
   
  },

  {
   "type":"button",
   "title":"test link",
   "action":"getSt",
   "response":"[[my-block]]",
   "class":"btn btn-block btn-warning"
  },`

Хочу обратить внимание что пустой title в блоге text не нужен.
И я в ответ ардуино добавил крестик.

Проверено - работает идеально.

При таком раскладе я получил все то что хотел. Спасибо огромное. И на мой взгляд это самый изящный метод.

[renat2985]

У вас ошибка в этой строчке:
jsonWrite(tmp, "class", "pop-up hidden");
hidden - как раз таки и не покажет ваш блок.
И как писал выше #158 (comment) старайтесь избегать писать в arduino того что можно написать в web. В будущем вам проще будет редактировать все это.

[DmitryBorisenko33]

В таком случае вот так буде лучше, что бы меньше передавать в ответе пришедшего от GET. Т.к. его ответ проблематично редактировать.

{
  "type":"text",
  "name":"my-block",
  "style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;",
  "class":"hidden"
 },
 {
  "type":"button",
  "title":"test link",
  "action":"get=[[peremennaja]]&test=2",
  "response":"[[my-block]]",
  "class":"btn btn-block btn-warning"
 },

Ответ на GET:
{"title":"Тут какой-то ваш текст","class":"pop-up"}

Да действительно ошибка! Уже понял. и да строку "style" из ардуино можно не передавать.

Итак финально сто стороны ардуино должно быть так:

  HTTP.on("/getSt", HTTP_GET, []() {

    String tmp = "{}";
    jsonWrite(tmp, "title", "<button class=\"close\" onclick=\"toggle('my-block')\">×</button>" + stateMQTT());
    jsonWrite(tmp, "class", "pop-up");

    HTTP.send(200, "application/json", tmp);
  });

Со стороны web:

{
  "type":"text",
  "name":"my-block",
  "style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;",
  "class":"hidden"
 },

  {
   "type":"button",
   "title":"test link",
   "action":"getSt",
   "response":"[[my-block]]",
   "class":"btn btn-block btn-warning"
  },

[renat2985]

@DmitryBorisenko33 вижу в "type":"text", вы скорее всего предаете очень маленькие значения.
Поэтому наверное лучше будет "type":"text", заменить на "type":"h2", текст будет больше.

[DmitryBorisenko33]

@DmitryBorisenko33 вижу в "type":"text", вы скорее всего предаете очень маленькие значения.
Поэтому наверное лучше будет "type":"text", заменить на "type":"h2", текст будет больше.

О да проверил с h2. Таким образом можно менять размер текста в всплывающем окне.

Вообще этот способ вывода информации очень удобен и требует минимум кода. Самое незаменимое для проверки статусов соединения и прочего подобного...

[DmitryBorisenko33]

Ренат, я хотел еще спросить, а можно ли на одну кнопку назначать сразу несколько get запросов?

[renat2985]

Ренат, я хотел еще спросить, а можно ли на одну кнопку назначать сразу несколько get запросов?

Нет. Технически это не правильно. Но можно задать выводы в разные блоки на странице.
Например: "response":"[[my-block]],[[block2]]",
JSON: [{"title":"Тут какой-то ваш текст","class":"pop-up"},{"title":"Тут какой-то ваш текст для второго блока","class":"pop-up"}]
Обратите внимание, Когда мы хотим вывести данные в несколько блоков нам нужные такие скобки [*] если мы хотим вывести в 1 блок их ставить ненадо.

[DmitryBorisenko33]

@renat2985 Получается можно одним махом обновлять сразу много блоков. Это очень круто!!!