Архивы javascript - Страница 2 из 10

Javascript: Открыть страницу на новой вкладке, передав на неё данные через POST

01.06.2023 Павел Грибов WEB

Есть несколько вариантов решения данной задачи Самым простым из них является размещение на странице скрытой формы, заполнение её данными в нужный момент, и принудительный submit. Например как-то так:

<form id="my_form" method="post" action="?view=new_page" target="Новое окно">
	<input type="hidden" id="my_var" name="my_var" value="" />
</form>

<script type="text/javascript">
	my_var="Мои данные в POST";
	window.open('', 'Новое окно');
	document.getElementById('my_form').submit();
</script>

</form>

my_var="Мои данные в POST";

window.open('', 'Новое окно');

document.getElementById('my_form').submit();

</script>

Оставить комментарий javascript, new tab, post

nmp — ошибка проверки самоподписанного сертификата

13.02.2023 Павел Грибов WEB, Windows

При установке модуля через nmp, иногда возникает ошибка вида:

reason: self-signed certificate in certificate chain

1	reason: self-signed certificate in certificate chain

Причин возникновения её может быть множество. У меня например — из-за антивируса Касперского, который имеет свойство подпехивать свои сертификаты в промежуток трафика SSL. Что делать? Одним из решений может быть отключение у npm проверки подлинности SSL. Это конечно плохое решение, но в моём случае оказалось единственным вариантом

npm set strict-ssl false

1	npm set strict-ssl false

Оставить комментарий javascript, nmp, nodejs, self-signed certificate

Диалоговое окно на чистом javascript

27.12.2022 Павел Грибов WEB

Задача: вывести диалоговое окно без использования Jquery

Решение:

<style>
.DialogConfirm{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(96, 79, 79, 0.51);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.DialogConfirm>div{
  width: 90%;
  margin: 30% auto;
  padding: 10px 20px;
  background: #f7f7f7;
  border-style: solid;
  border-color: aliceblue;
  border-width: initial;
}

.DialogConfirm div p{
  text-align:center;
}

.DialogConfirm div button{
    width: 40%;
    margin: 0 5%;
    border-style: double;
    border-color: black;
}    
</style>    
<script>
function myConfirm(text,buttons=Array(), cb){
    var body = document.getElementsByTagName('body')[0];
    var overlay = document.createElement('div');
    overlay.className = 'DialogConfirm';
    var box = document.createElement('div');  
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(text));
    box.appendChild(p);
    buttons.forEach(function(bt, index, array) {
        tmp_btn=document.createElement('button');
        tmp_btn.appendChild(document.createTextNode(bt));
        tmp_btn.addEventListener('click', function(){ cb(bt); body.removeChild(overlay); }, false);
        box.appendChild(tmp_btn);
    });
        
    overlay.appendChild(box)
    body.appendChild(overlay);    
}
myConfirm('Бахнем и весь мир в труху?',["Давай","Попозжа"], function(value){ console.log(value); });   
</script>

<style>

.DialogConfirm{

position: fixed;

width: 100%;

height: 100%;

background: rgba(96, 79, 79, 0.51);

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

}

.DialogConfirm>div{

width: 90%;

margin: 30% auto;

padding: 10px 20px;

background: #f7f7f7;

border-style: solid;

border-color: aliceblue;

border-width: initial;

}

.DialogConfirm div p{

text-align:center;

}

.DialogConfirm div button{

width: 40%;

margin: 0 5%;

border-style: double;

border-color: black;

}

</style>

function myConfirm(text,buttons=Array(), cb){

var body = document.getElementsByTagName('body')[0];

var overlay = document.createElement('div');

overlay.className = 'DialogConfirm';

var box = document.createElement('div');

var p = document.createElement('p');

p.appendChild(document.createTextNode(text));

box.appendChild(p);

buttons.forEach(function(bt, index, array) {

tmp_btn=document.createElement('button');

tmp_btn.appendChild(document.createTextNode(bt));

tmp_btn.addEventListener('click', function(){ cb(bt); body.removeChild(overlay); }, false);

box.appendChild(tmp_btn);

});

overlay.appendChild(box)

body.appendChild(overlay);

}

myConfirm('Бахнем и весь мир в труху?',["Давай","Попозжа"], function(value){ console.log(value); });

</script>

Оставить комментарий javascript, modal, диалоговое окно

Диалоговые окна на boostrap5 + jquery

08.06.2022 Павел Грибов WEB

Лень двигатель прогресса (с). В одной из задач, используется довольно большое количество однотипных окон с вопросами и кнопками -Да, Нет, Ок и т.д. Чтобы не рисовать каждый раз эти окна руками в коде html, можно поступить лучше: оформить создание диалогового окна «на лету» с вызовом пользовательской функции по нажатию какой-то из кнопок.

Решение:

function UUID_V4() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

function Dialog(title,message,buttons=Array(),callback=function(){}){
  var uuid=UUID_V4();  
       html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';
  html=html+' <div class="modal-dialog modal-lg">';
  html=html+'  <div class="modal-content">';
  html=html+'    <div class="modal-header">';
  html=html+'      <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';
  html=html+'      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
  html=html+'    </div>';
  html=html+'    <div class="modal-body">';
  html=html+'        <p>'+message+'</p>';
  html=html+'    </div>';
  html=html+'    <div class="modal-footer">';
  buttons.forEach(function(bt, index, array) {
    if (index==0){
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';  
    } else {
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';  
    };    
  });
  html=html+'    </div>';
  html=html+'  </div>';
  html=html+' </div>';
  html=html+'</div>';
  $("body").append(html);
  $("#"+uuid).modal("show");
  $("#"+uuid).on("hidden.bs.modal", function () {
    console.log("--закрыли окно");
    $("#"+uuid).remove();
  });
};
Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){
    console.log("!",result);
}

function UUID_V4() {

var S4 = function() {

return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

};

return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

}

function Dialog(title,message,buttons=Array(),callback=function(){}){

var uuid=UUID_V4();

html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';

html=html+' <div class="modal-dialog modal-lg">';

html=html+' <div class="modal-content">';

html=html+' <div class="modal-header">';

html=html+' <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';

html=html+' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';

html=html+' </div>';

html=html+' <div class="modal-body">';

html=html+' <p>'+message+'</p>';

html=html+' </div>';

html=html+' <div class="modal-footer">';

buttons.forEach(function(bt, index, array) {

if (index==0){

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';

} else {

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';

};

});

html=html+' </div>';

html=html+'</div>';

$("body").append(html);

$("#"+uuid).modal("show");

$("#"+uuid).on("hidden.bs.modal", function () {

console.log("--закрыли окно");

$("#"+uuid).remove();

});

};

Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){

console.log("!",result);

}

Оставить комментарий bootstrap, dialogs, javascript

JavaScript: создаем и позволяем скачать csv файл

05.05.2022 Павел Грибов WEB

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

Решение: Для создания файла воспользуемся функцией Blob, которая позволяет оперировать с бинарными данными. Далее создадим в DOM элемент <a>, поместим в href бинарные данные и сэмулируем нажатие на ссылку. Примерно так:

  //собираем csv файл
                      csv="OKPU;P1;P2;\n";
                      data.result.forEach(function(entry) {
                        csv=csv+entry.okpu+";"+entry.P1+";"+entry.P2+"\n";  
                      });
                        let a = document.createElement("a");
                        let file = new Blob([csv], {type: 'application/csv'});
                        a.href = URL.createObjectURL(file);
                        a.download = "sender_okpu_data.csv";
                        a.click();

//собираем csv файл

csv="OKPU;P1;P2;\n";

data.result.forEach(function(entry) {

csv=csv+entry.okpu+";"+entry.P1+";"+entry.P2+"\n";

});

let a = document.createElement("a");

let file = new Blob([csv], {type: 'application/csv'});

a.href = URL.createObjectURL(file);

a.download = "sender_okpu_data.csv";

a.click();

Оставить комментарий javascript, закачка, создание csv

« 1 2 3 4 … 10 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31