Архивы javascript - Страница 7 из 11

Пробуем ReactJS

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

Если честно, пока не представляю, что можно сделать с ReactJS, что нельзя сделать удобно и понятно при помощи Jquery+PHP. Но решил таки попробовать. Итак, что такое ReactJS — фактически это надстройка над JavaScript написанная на языке JavaScript. Т.е. всё что написано на ReactJS — компилируется или «на лету» при помощи babel в javascript или при выкладывании в «продакт» и далее подключается вызовом обычного JavaScript.

Чтобы не разделять «продакт» «девелоп» и не возиться с бабелом, я у себя настроил один из вариантов, а именно в косоли висит запущеный скрипт-компилятор, который мониторит изменения файлов в папке src и при изменении чего-либо, компилирует файл в папку js. Соответственно всегда имеем «продакт».

Что нужно сделать чтоб начать пользоваться ReactJS:

1) Поставить NodeJS и ReactJS на компьютере где разрабатываем (компиляция кода ReactJS в JavaScript происходит при помощи его):

apt install nodejs
npm install babel-cli@6 babel-preset-react-app@3

1 2	apt install nodejs npm install babel-cli@6 babel-preset-react-app@3

2) Ставим npx — утилита которая позволяет запускать npm пакеты

npm install -g npx

1	npm install -g npx

3) Зпаускаем в консоли что-типа:

npx babel --watch src --out-dir js --presets react-app/prod

1	npx babel --watch src --out-dir js --presets react-app/prod

В моем случае все скрипты из папки src компилируются в папку js

В итоге html страница может выглядеть так:

<!DOCTYPE html>
<html>    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <head>
        <meta charset="UTF-8">
        <title id="rj_title"></title>
    </head>
    <body id="rj_body">
        <div id="root"></div>
        <script src="js/test.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

</body>

</html>

а файл src/test.js так:

const name='Павел Игоревич';
const element = <h1>Привет {name}!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

const name='Павел Игоревич';

const element = <h1>Привет {name}!</h1>;

ReactDOM.render(

element,

document.getElementById('root')

);

В браузере выведет:

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

Простая загрузка файла на сервер используя JQUERY

18.12.2018 Павел Грибов PHP, WEB

Задача: сохранить файл на сервер без обновления страницы. Т.е. при помощи ajax

Решение:

Клиентская часть:

<h1>Отправка сообщения в техподдержку</h1>
    <div id="snd">
        <form id="data" method="post" enctype="multipart/form-data">
            <textarea id="tehtxt" name="tehtxt" class="form-control" rows="3" placeholder="Сообщение для техподдержки"></textarea>
            <br/>
            <input name="image" type="file" />
            <br/>
            <button class="btn btn-success" id="buttonsendteh">Отправить сообщение</button>
        </form>
    </div>
    <br/>
    <script>
        $("form#data").submit(function(e) {
                e.preventDefault();    
                var formData = new FormData(this);
                $("#buttonsendteh").hide();
                $.ajax({
                    url: "index.php?route=/controller/server/sendtoteh.php",
                    type: 'POST',                  
                    data: formData,
                    success: function (data) {
			$("#snd").html(data);    
			ListSbssMessages();
			$("#buttonsendteh").show();
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
        });
    </script>

<h1>Отправка сообщения в техподдержку</h1>

<br/>

<br/>

<button class="btn btn-success" id="buttonsendteh">Отправить сообщение</button>

</form>

</div>

<br/>

$("form#data").submit(function(e) {

e.preventDefault();

var formData = new FormData(this);

$("#buttonsendteh").hide();

$.ajax({

url: "index.php?route=/controller/server/sendtoteh.php",

type: 'POST',

data: formData,

success: function (data) {

$("#snd").html(data);

ListSbssMessages();

$("#buttonsendteh").show();

cache: false,

contentType: false,

processData: false

});

</script>

Серверная часть:

 $tehtxt=mysqli_real_escape_string($sqlcn->idsqlconnection,$_POST["tehtxt"]);
 $prc="";  
  if (isset($_FILES['image'])==true){
    $orig_file = $_FILES['image']['name']; 
    $userfile_name = GetRandomId(8) . '.' . pathinfo($orig_file, PATHINFO_EXTENSION);
    $src = $_FILES['image']['tmp_name'];    
    $res = move_uploaded_file($src, WUO_ROOT."/files/".$userfile_name);     
    $prc="Прикрепленный файл: $userfile_name";
  };

$tehtxt=mysqli_real_escape_string($sqlcn->idsqlconnection,$_POST["tehtxt"]);

$prc="";

if (isset($_FILES['image'])==true){

$orig_file = $_FILES['image']['name'];

$userfile_name = GetRandomId(8) . '.' . pathinfo($orig_file, PATHINFO_EXTENSION);

$src = $_FILES['image']['tmp_name'];

$res = move_uploaded_file($src, WUO_ROOT."/files/".$userfile_name);

$prc="Прикрепленный файл: $userfile_name";

};

Оставить комментарий form, javascript, Jquery, загрузка файла

Пример печати чека на ККМ Атол посредством JavaScript

20.06.2018 Павел Грибов Без рубрики

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

» Читать далее

6 комментариев javascript, атол, ккм, онлайн касса, печать чека

Jquery и маска ввода телефона

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

К сожалению наиболее часто упоминаемый в «интернетах» плагин maskedinput не очень хорошо работает на мобильных устройствах. Адекватной заменой может служить плагин inputmask: https://github.com/RobinHerbots/Inputmask

Один огромный минус — уж очень «жирноват» плагин для простых задачь. Иногда лучше использовать «чистый» javascript:

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
    <input  value="+7(___)___-____">
    <script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
    elem.focus();
    if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
    else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd("character", pos);
        range.moveStart("character", pos);
        range.select()
    }
}

function mask(event) {
    var matrix = this.defaultValue,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
        def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
        return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
}

    var input = document.querySelector("input");
    input.addEventListener("input", mask, false)
});
  </script>
</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled</title>

</head>

<body>

window.addEventListener("DOMContentLoaded", function() {

function setCursorPosition(pos, elem) {

elem.focus();

if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);

else if (elem.createTextRange) {

var range = elem.createTextRange();

range.collapse(true);

range.moveEnd("character", pos);

range.moveStart("character", pos);

range.select()

}

function mask(event) {

var matrix = this.defaultValue,

i = 0,

def = matrix.replace(/\D/g, ""),

val = this.value.replace(/\D/g, "");

def.length >= val.length && (val = def);

matrix = matrix.replace(/[_\d]/g, function(a) {

return val.charAt(i++) || "_"

});

this.value = matrix;

i = matrix.lastIndexOf(val.substr(-1));

i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");

setCursorPosition(i, this)

}

var input = document.querySelector("input");

input.addEventListener("input", mask, false)

});

</script>

</body>

</html>

Оставить комментарий inputmask, javascript, maskedinput, maskinput, мобильный

Простой способ сохранить файл по нажатию кнопки на странице (HTML)

08.02.2018 Павел Грибов PHP

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

Решение:

В коде html страницы упоминаем скрытую форму:

<form method="post" action="inc/csvExport.php">
	<input type="hidden" name="csvBuffer" id="csvBuffer" value="" />
</form>

</form>

Добавляем туда же обработчик нажатия вида:

    $("#viewwork").click(function(){       
            document.forms[0].method='POST';
            document.forms[0].action=save_file.php; 
            document.forms[0].target='_self';
            document.forms[0].submit();  	    	    
       return false;
    });

$("#viewwork").click(function(){

document.forms[0].method='POST';

document.forms[0].action=save_file.php;

document.forms[0].target='_self';

document.forms[0].submit();

return false;

});

Ну код на сервере для:

save_file.php:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

$ex= "1;2;3;4;5;6;7";
 header("Content-type: application/msexcel");
    header("Accept-Ranges: bytes");
    header("Content-Length: " . strlen($ex));
    header("Content-Disposition: attachment; filename=rep_by_addr.csv");

?>

<?php

// Данный код создан и распространяется по лицензии GPL v3

// Изначальный автор данного кода - Грибов Павел

// http://грибовы.рф

$ex= "1;2;3;4;5;6;7";

header("Content-type: application/msexcel");

header("Accept-Ranges: bytes");

header("Content-Length: " . strlen($ex));

header("Content-Disposition: attachment; filename=rep_by_addr.csv");

csvExport.php:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

header('Content-type: application/vnd.ms-excel');
if (isset($_GET["csv"])==true){
    header("Content-Disposition: attachment; filename=file.csv");
} else {
    header("Content-Disposition: attachment; filename=file.xls");
};
header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

try{
    echo $buffer;
}catch(Exception $e){

}
?>

<?php

// Данный код создан и распространяется по лицензии GPL v3

// Изначальный автор данного кода - Грибов Павел

// http://грибовы.рф

header('Content-type: application/vnd.ms-excel');

if (isset($_GET["csv"])==true){

header("Content-Disposition: attachment; filename=file.csv");

} else {

header("Content-Disposition: attachment; filename=file.xls");

};

header("Pragma: no-cache");

$buffer = $_POST['csvBuffer'];

try{

echo $buffer;

}catch(Exception $e){

}

Оставить комментарий html, javascript, php, сохранение файла

« 1 … 5 6 7 8 9 … 11 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
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