Категорія: Javascript

Submit form with delay while entering data into input or select field

Січень 9, 2017 by admin

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

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);
	}
});

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

Січень 9, 2017 by admin

For instance, we have select with id="element id" and we have to set red color for text

#select2-element_id-container {
  color: red;
}
#select2-element_id-container .select2-selection__placeholder
{
  color: red;
}

#select2-element_id-container {

color: red;

}

#select2-element_id-container .select2-selection__placeholder

{

color: red;

}

select2 для select отриманого у відповіль на AJAX-запит

Січень 9, 2017 by admin

Завів окремий клас filter_select для селектів, які мають бути select2

$(".filter_select" ).select2({
  theme: "bootstrap"
});

$(".filter_select" ).select2({

theme: "bootstrap"

});

Проблема виникла, коли я селект із цим класом отримую як відповідь на ajax-запит. В результаті маємо select із класом select2, але функціонал не діє, використати document on не можем, так як дії немає

Вирішив проблему наступним чином

$(document).ajaxComplete(function() {
  $(".filter_select" ).select2({
    theme: "bootstrap"
  });	
});

$(document).ajaxComplete(function() {

$(".filter_select" ).select2({

theme: "bootstrap"

});

Анімація AJAX-запитів

Січень 3, 2017 by admin

Коли ajax-запит триває довго, виникає не зрозуміла ситуація. Чи запит уже закінчив роботу, чи ще ні. Для цього не погано було б організувати анімацію, яка б запускалась перед ajax-запитом, та виключалась після його виконання.

Даний метод є дуже простий і зручний, оскільки він буде задіяний на усі існуючі в проекті ajax-запити, без будь-якого додаткового прописування ідентифікаторів об'єктів. Оскільки ми біндимо функцію анімації на саму подію початку та кінця Ajax-запиту

index.html

...
<div id="divLoading"> 
</div>

...

</div>

applocation.css

#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;
}

#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

$(document).on("ready page:load",function() {
  $(document).on("ajax:before", function() {
    $("div#divLoading").addClass('show');
  });
  $(document).ajaxComplete(function() {
    $("div#divLoading").removeClass('show');
  });
});

$(document).on("ready page:load",function() {

$(document).on("ajax:before", function() {

$("div#divLoading").addClass('show');

});

$(document).ajaxComplete(function() {

$("div#divLoading").removeClass('show');

});

scroll вікна при добавленні контенту ajax’ом

Грудень 7, 2016 by admin

Після добавлення контенту ajax'ом scroll не з'явився. Вирішується проблема наступним чином

$("body").css({ overflow:"auto" });

1	$("body").css({ overflow:"auto" });

Робота з jQuery після Ajax виклику

Вересень 10, 2016 by admin

Якщо у вас підгрузився, наприклад div класу element, у відповідь на ajax-запит, то спроба забіндити той же click по цьому елементу стандартним способом

$('.element').on('click',function(){
...

1 2	$('.element').on('click',function(){ ...

буде невдалим. Потрібно:

$(document).on('click','.element',function(){
...

1 2	$(document).on('click','.element',function(){ ...

Ajax bootstrap modal windows in Rails

Вересень 5, 2016 by admin

В одному із Rails проектів інтернет магазину з продажу книг, була задача організувати попередній перегляд (скороченої версії) книги в pdf форматі. Для цього, було прийнято рішення, при кліку на лінк, відкривати модальне вікно із відображенням цього файлу (хоча amazon робить трохи по іншому – слайдер сторінок, які у вигляді зображень )

Continue reading →

Ajax в Rails

Січень 15, 2016 by admin

Все детально розписано тут, раджу почитати. Я ж розгляну свою реалізацію на прикладі проекту, в якому є модель tovar, для якої потрібно знищувати картинку при потребі

Continue reading →

JavaScript в Rails

Січень 14, 2016 by admin

Функцію біндимо на дві події

$(document).on("page:load ready", function(){
...
});

$(document).on("page:load ready", function(){

...

});

Веб-Розробка

WebDevelop

Category Archives: Javascript

Submit form with delay while entering data into input or select field

How to change the css of color of select2 tag

select2 для select отриманого у відповіль на AJAX-запит

Анімація AJAX-запитів

scroll вікна при добавленні контенту ajax’ом

Робота з jQuery після Ajax виклику

Ajax bootstrap modal windows in Rails

Ajax в Rails

JavaScript в Rails