Basics of working on JS within the framework of the platform

Introduction

In this article, we will look at the basic points of working with JS within the Falcon Space platform.

If you know JS, jQuery very basic, then you can do extensions of functionality in JS.

JS can be changed in the following places:

  • Global JS (in quick actions) - works on all pages
  • JS within the page (on page editing, JS tab) - works on the selected page

          

In most cases, it is better to put the code in such a wrapper. In this case, it will be executed after the page is fully loaded:

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

Simple operations with jQuery

Working with jQuery selectors:

$('body') // find an element with the body tag
$('.p1') // all elements with class p1
$('#x1') // all elements with id=x1 (if you use id, then it must be unique on the page!)
$('input[type=text]') // all input elements with the type=text attribute

$('input:visible') // all visible input elements on the page

$('.p1 span') // all span elements that belong to containers with class p1

$('.as-table[data-code=t1] .crd2Row[data-itemID=123] td[data-code=col1]') // the cell with the code col1 in the row with id=123 in table t1 

Getting items on a page:

// set the form field
// for the list
$('.as-form[data-code=form1] .as-form-item[data-code=col1] select option[value=123]').attr("selected", "selected");
// for a field with text
$('.as-form[data-code=form1] .as-form-item[data-code=col2] input').val('123');

// installing markup in a specific container with class abc
$('.abc').html('there is some kind of markup here'); 

Install item:

// we get the data of some fields of the form
// for the list 
var col1  = $('.as-form[data-code=form1] .as-form-item[data-code=col1] select').val();
// for a field with text
var col2  = $('.as-form[data-code=form1] .as-form-item[data-code=col2] input').val();

// getting table fields
var col3  = $('.as-table[data-code=table1] .crd2Row[data-itemID=123] .crd2Item[data-code=col3] .crd2Cell ').text(); // or .html()

How to hide/show an item:

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

Add an item or remove it from the page:

$('.s1').html(''); // completely replace the contents of the container
$('.s2').append(''); // adding to the end of the container
$('.s2').prepend(''); // adding to the beginning of the container

$('.s1').remove();  // complete removal of an element from the page 

Get or set the attribute value:

$('.s1').attr("attr1"); // we got the value of the attribute attr1
$('.s1').removeAttr("attr1"); // removed the attr1 attribute
$('.s1').attr("attr1", "123"); // set the value of the attr1 attribute


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

$(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 is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}