Example
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $('.submit_on_enter').keydown(function(event) { if (event.keyCode == 13) { $('#form_id').submit(); return false; } }); }); |
Category Archives: Javascript
jQuery Validation Plugin on Rails
Приклад використання валідації на стороні клієнта за допомогою плагіна jQuery Validation в Rails
Gemfile
|
1 2 |
gem 'jquery-validation-rails' |
app/assets/javascripts/application.js
|
1 2 |
//= require jquery.validate |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$("#form_call").validate({ debug: true, rules: { "contact[name]": {required: true}, "contact[phone]": {required: true}, "contact[message]": {required: true} }, messages: { "contact[name]": "Введіть ваше ім'я", "contact[phone]": "Введіть номер телефону", "contact[message]": "Введіть текст повідомлення", } }); |
JavaScript: inspect Object
Submit form with delay while entering data into input or select field
I have to submit form by ajax, and I wanеd set delay before submit my entering data but only when I put in input field. When I change in select field, form submit at once
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var timerid; $(document).on('input change',".mode_cost_update", function(e) { form_id = "#edit_model_cost_"+$(this).data('id'); type=$(this).get(0).tagName; // For select submit at once if (type=='SELECT') { $(form_id).submit(); } // For other submit after 1s else { clearTimeout(timerid); timerid = setTimeout(function() { $(form_id).submit(); }, 1000); } }); |
How to change the css of color of select2 tag
For instance, we have select with id="element id" and we have to set red color for text
|
1 2 3 4 5 6 7 8 9 |
#select2-element_id-container { color: red; } #select2-element_id-container .select2-selection__placeholder { color: red; } |
select2 для select отриманого у відповіль на AJAX-запит
Завів окремий клас filter_select для селектів, які мають бути select2
|
1 2 3 4 |
$(".filter_select" ).select2({ theme: "bootstrap" }); |
Проблема виникла, коли я селект із цим класом отримую як відповідь на ajax-запит. В результаті маємо select із класом select2, але функціонал не діє, використати document on не можем, так як дії немає
Вирішив проблему наступним чином
|
1 2 3 4 5 |
$(document).ajaxComplete(function() { $(".filter_select" ).select2({ theme: "bootstrap" }); }); |
Анімація AJAX-запитів
Коли ajax-запит триває довго, виникає не зрозуміла ситуація. Чи запит уже закінчив роботу, чи ще ні. Для цього не погано було б організувати анімацію, яка б запускалась перед ajax-запитом, та виключалась після його виконання.
Даний метод є дуже простий і зручний, оскільки він буде задіяний на усі існуючі в проекті ajax-запити, без будь-якого додаткового прописування ідентифікаторів об'єктів. Оскільки ми біндимо функцію анімації на саму подію початку та кінця Ajax-запиту
index.html
|
1 2 3 4 |
... <div id="divLoading"> </div> |
applocation.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#divLoading { display : none; } #divLoading.show { //display : block; position : fixed; z-index: 100; background-image : asset-url('load.gif'); background-color:#666; opacity : 0.4; background-repeat : no-repeat; background-position : center; left : 0; bottom : 0; right : 0; top : 0; } |
application.js
|
1 2 3 4 5 6 7 8 |
$(document).on("ready page:load",function() { $(document).on("ajax:before", function() { $("div#divLoading").addClass('show'); }); $(document).ajaxComplete(function() { $("div#divLoading").removeClass('show'); }); }); |
scroll вікна при добавленні контенту ajax’ом
Після добавлення контенту ajax'ом scroll не з'явився. Вирішується проблема наступним чином
|
1 |
$("body").css({ overflow:"auto" }); |
Закриття modal-го вікна із ajax-контентом
Після банального $(element_id).modal('hide'); вікно закривається, але залишається темний фон і неможливість мишкою клікати по body. Мені допомогло наступне
|
1 2 3 |
$(modal_identificator).modal('hide') ; $('.modal-backdrop').remove(); |
Робота з jQuery після Ajax виклику
Якщо у вас підгрузився, наприклад div класу element, у відповідь на ajax-запит, то спроба забіндити той же click по цьому елементу стандартним способом
|
1 2 |
$('.element').on('click',function(){ ... |
буде невдалим. Потрібно:
|
1 2 |
$(document).on('click','.element',function(){ ... |