Основы работы на JS в рамках платформы

Введение 

В этой статье мы рассмотрим базовые моменты по работе с JS в рамках платформы Falcon Space. 

Если вы совсем базово знаете JS, jQuery, то вы сможете делать расширения функционала на JS. 

JS можно менять в следующих местах: 

  • Глобальный JS (в быстрых действиях) - работает на всех страницах 
  • JS в рамках страницы (на редактировании страницы, вкладка JS) - работает на выбранной странице 

          

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

$(function(){
    // code here 
});

Простые операции с jQuery

Работа с селекторами jQuery: 

$('body') // найти элемент с тегом body
$('.p1') // все элементы с классом p1
$('#x1') // все элементы с id=x1 (если используете id то он должен быть уникальным на странице!)
$('input[type=text]') // все элементы input с атрибутом type=text

$('input:visible') // все видимые элементы input на странице

$('.p1 span') // все элементы span которые лежат к контейнерам с классом p1

$('.as-table[data-code=t1] .crd2Row[data-itemID=123] td[data-code=col1]') // ячейка с кодом col1 в строке с id=123 в таблице t1 

Получение элементов на странице: 

// установить поле формы
// для списка  
$('.as-form[data-code=form1] .as-form-item[data-code=col1] select option[value=123]').attr("selected", "selected");
// для поля с текстом
$('.as-form[data-code=form1] .as-form-item[data-code=col2] input').val('123');

// установка разметки в определенный контейнер с классом abc
$('.abc').html('здесь некая разметка'); 

Установить элемент: 

// получаем данные некоторых полей формы
// для списка  
var col1  = $('.as-form[data-code=form1] .as-form-item[data-code=col1] select').val();
// для поля с текстом
var col2  = $('.as-form[data-code=form1] .as-form-item[data-code=col2] input').val();

// получение полей таблицы 
var col3  = $('.as-table[data-code=table1] .crd2Row[data-itemID=123] .crd2Item[data-code=col3] .crd2Cell ').text(); // or .html()

Как скрыть/показать элемент: 

$('.s1').addClass('hide');
$('.s2').removeClass('hide');

Добавить элемент или удалить его со страницы: 

$('.s1').html('<span class="x1"></span>'); // полностью заменяем содержимое контейнера
$('.s2').append('<span class="x1"></span>'); // добавляем в конец контейнера
$('.s2').prepend('<span class="x1"></span>'); // добавляем в начало контейнера

$('.s1').remove();  // полное удаление элемента со страницы 

Получить или установить значение атрибута: 

$('.s1').attr("attr1"); // получили значение атрибута attr1
$('.s1').removeAttr("attr1"); // удалили атрибут attr1
$('.s1').attr("attr1", "123"); // установили значение атрибута attr1


 Функции обработки событий на странице: 

$(document).delegate('.s1', 'change', function(e){  // вызывается функция при изменении значения элемента 
 ...
});   

$(document).delegate('.s1', 'click', function(e){  // вызывается функция при клике на элемент
   e.preventDefault(); // отменяет действие по умолчанию, например, переход по ссылке для ссылок.

 ...
});   

Пройти в цикле некоторые элементы: 

// в списке с классом s1 проставляем у всех элементов в конце их индекс
$('ul.s1 li').each(function(index, el){
   var  s=$(this).html();
   $(this).html(s + "-" + index);
});

Как подлезть со своим кодом JS в нужный момент

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

Для этого существуют JS коллбеки.  Они вызывают тогда, когда произошло определенное событие. Его вы можете обработать, написав свой JS коллбек. 

Коллбеки таблиц - /docs/tablicy--kak-dobavit-kollbek-posle-zagruzki-tablicy

Коллбеки форм - /docs/formy--kak-dobavit-kollbek-posle-zagruzki-formy-i-posle-sokhraneniya-formy

Коллбеки дашборда - /docs/dashbordy--kak

Глобальные JS коллбеки - /docs/js--kak-vyzvat-kollbek-pered-zagruzkoy-vsekh-komponentov-as-js

Как вывести некое сообщение пользователю? 

as.sys.bootstrapAlert("Some text", {type: "info", delay: 1000000, icon: "fa fa-bars", hidePrev: true});
  • type - задает вид окна (success, info, danger, warning, secondary и т.д.)
  • delay - сколько мс будет висеть окно
  • icon - можно задать иконку font awesome
  • hidePrev - если true, то скрывает предыдущие сообщения при наличии таковых на странице. 

Открыть/закрыть диалоговое окно

В большинстве случаев проще использовать модальную форму (разметку кнопки с фы-form-modal).

В случае необходимости кастомного диалогового окна используем следующий код: 

// title - заголовок окна, html - разметка внутри окна. buttonText - название кнопки (если пустая строка - то кнопка не выводится)
as.sys.showDialog(title, html, buttonText, function(){
   // коллбек по нажатию на кнопку buttonText
}, isBig, function(){
   // вывполняется когда окно выведено на экран
}, function(){
   // выполняется когда окно закрывается
}); 
as.sys.closeDialog() - закрытие диалогового окна. 

Как отправлять запросы на сервер и обрабатывать ответ от сервера? 

Для этого используем механизм requestJS. Подробнее - /docs/js--realizaciya-kastomnykh-dorabotok-js-po-sisteme 

Дополнительные возможности в JS

// перейти на другую страницу 
location.href='/about'

// вывести что-то в консоль браузера 
console.log("x1", data)
// или цветное решение 
as.log(params, { info: true, title: 'Sortable Request' });  // большой зеленый текст
as.log(params, { error: true, title: 'Sortable Request' }); // большой красный текст

Как обновить некую область на странице

Вы можете переиниализировать компоненты на странице, обновить данные формы или таблицы.  Для этого необходимо поместить их в некий контейнер (например с классом s1): 

<div class="s1">
  <div class="as-form" data-code="x1" data-itemID="1"></div>
  <div class="as-table" data-code="x2" data-itemID="1"></div>
</div>

Чтобы обновить данные этих формы и таблицы, вызываем as.initControls():

as.initControl($('.s1'))

Если не передать параметр, то обновление будет в рамках всего body.            

Falcon Space - функциальная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space
Веб-платформа для создания личных кабинетов

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Веб-приложения на MS SQL. Партнерская программа для разработчиков и веб-студий

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space, используя только SQL и HTML.
Смотреть примеры с кодом SQL
Документация по платформе
Работа на MS SQL Server

Google поиск по нашей документации