ajax | Разработчик сайтов и магазинов на битриксе . И не только.

Дожидаемся загрузки изображений после срабатывания ajax

07.12.2016 Автор:alex

Комментариев нет

Эту функцию вынести за Ready

// функция предзагрузки изображения
jQuery.preloadImages = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
 
    if (typeof arguments[0] == 'object') {
        var images = arguments[0];
        var n = images.length;
    } else {
        var images = arguments;
        var n = images.length - 1;
    }
    var not_loaded = n;
    for (var i = 0; i < n; i++) {
        jQuery(new Image()).attr('src', images[i]).load(function() {
            if (--not_loaded < 1 && typeof callback == 'function') {
                callback();
            }
        });
    }
}

// функция предзагрузки изображения

jQuery.preloadImages = function () {

if (typeof arguments[arguments.length - 1] == 'function') {

var callback = arguments[arguments.length - 1];

} else {

var callback = false;

}

if (typeof arguments[0] == 'object') {

var images = arguments[0];

var n = images.length;

} else {

var images = arguments;

var n = images.length - 1;

}

var not_loaded = n;

for (var i = 0; i < n; i++) {

jQuery(new Image()).attr('src', images[i]).load(function() {

if (--not_loaded < 1 && typeof callback == 'function') {

callback();

}

});

}

вот пример вызова ajax

jQuery.get(url , function( data ) {	 

	var container_str='.container_category_'+category+' .row'; //тут прописываем id, класс цели , что будем проверять
	jQuery(container_str).html(data);		
	//обработка после загрузки 
	var paths  = [];
	var images = jQuery(container_str).find('img');
	images.each(function() {
	paths.push(jQuery(this).attr('src'));
	});

	jQuery.preloadImages(paths, function () {
		// инициализация галереи  или иной код (можно удалить)- применялся для выравнивания блоков после загрузки. Функция setEqualHeight - описана в другой статье
		
		if (jQuery(window).width() >= '750'){
		//выравнивание по высоте всех стразу пицц, роллов и других			
			var obj=jQuery(container_str).find(".thumbnail");
			//функция выравнивания блоков по высоте ( )
			setEqualHeight(obj);				
		}  				
	//alert(0);		
	});	
	
});

jQuery.get(url , function( data ) {

var container_str='.container_category_'+category+' .row'; //тут прописываем id, класс цели , что будем проверять

jQuery(container_str).html(data);

//обработка после загрузки

var paths = [];

var images = jQuery(container_str).find('img');

images.each(function() {

paths.push(jQuery(this).attr('src'));

});

jQuery.preloadImages(paths, function () {

// инициализация галереи или иной код (можно удалить)- применялся для выравнивания блоков после загрузки. Функция setEqualHeight - описана в другой статье

if (jQuery(window).width() >= '750'){

//выравнивание по высоте всех стразу пицц, роллов и других

var obj=jQuery(container_str).find(".thumbnail");

//функция выравнивания блоков по высоте ( )

setEqualHeight(obj);

}

//alert(0);

});

Одиночные картинки

jQuery.preloadImages(["first_image.jpg","second_image.jpg"], function () {
  alert('Обе картинки загружены.');
});

jQuery.preloadImages(["first_image.jpg","second_image.jpg"], function () {

alert('Обе картинки загружены.');

});

по сути весь выше код это автоматизация вот этой команды

$(new Image()).attr('src', '/img/preload_me_plz.jpg').load(function() {
    alert('Я загрузилось!');
});

$(new Image()).attr('src', '/img/preload_me_plz.jpg').load(function() {

alert('Я загрузилось!');

});

Ajax отправка файла с формой ( yii2 и bootsrap)

16.11.2016 Автор:alex

1 Комментарий

Скрипт для формы (форма у меня лежит в модальном окне и в которое записывается ajax-ом)

$(document).on("submit", '#my-modal form', function (e) {
        e.preventDefault();
        var form = $(this);
		var url=form.attr('action');	
		// объект формы(он в себя собирает все поля и  файлы)
		var formData = new FormData(form[0]);	 // Значение нуль в скобках обязательно	
        $.ajax({
            url: url,
            type: "POST",
            //data: form.serialize(),
	processData: false,
	contentType: false,
            data:  formData ,
            success: function (result) {             
               
            
            }
        });
    });

$(document).on("submit", '#my-modal form', function (e) {

e.preventDefault();

var form = $(this);

var url=form.attr('action');

// объект формы(он в себя собирает все поля и файлы)

var formData = new FormData(form[0]); // Значение нуль в скобках обязательно

$.ajax({

url: url,

type: "POST",

//data: form.serialize(),

processData: false,

contentType: false,

data: formData ,

success: function (result) {

}

});

форма

<form  method="post" action="" enctype="multipart/form-data">
</form>

1 2	<form method="post" action="" enctype="multipart/form-data"> </form>

запись для Yii2 формы будет такая

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>
<?= $form->field($model, 'image')->fileInput() ?>
.....
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

<?= $form->field($model, 'image')->fileInput() ?>

.....

<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

</div>

<?php ActiveForm::end(); ?>

Эту же технологию можно использовать для любых ajax форм

Ниже немного теории

Объект FormData позволяет составить набор пар ключ/значение для отправки при помощи XMLHttpRequest. Это, в первую очередь, предназначено для отправки данных форм, но вы можете использовать этот объект независимо от форм, тогда передаваемые данные будут в том же формате, что и при обычной отправке формы с enctype=»multipart/form-data». Но при попытке отправки Объекта FormData через jquery $.ajax возникают проблемы, т.е. запрос придет, но файл вы не получите. Все это из-за 2 параметров которые в jquery ajax включены по умолчанию

processData: true; // по умолчанию

1	processData: true; // по умолчанию

По умолчанию, данные, переданные в параметр data в качестве объекта (с технической точки зрения, что-либо кроме строки), будут обработаны и преобразованы в строку запроса, для соответствия типу данных по умолчанию — «application/x-www-form-urlencoded; charset=UTF-8». Если необходимо отослать документ DOM или другие специфические данные, то установите данную опцию в false.

contentType: true; // по умолчанию

1	contentType: true; // по умолчанию

При отсылке данных на сервер, указывает тип данных. По умолчанию: «application/x-www-form-urlencoded», что подходит для большинства случаев.

ie отправляет неправильно кирилиллицу через ajax

08.11.2016 Автор:alex
Комментариев нет

решение можно найти тут
http://www.sql.ru/forum/879091/jquery-ajax-get-kirillica-v-parametrah-iz-ie-krakozyabry-na-servere

если страничка работает во всех браузерах кроме IE а ошибка в IE возникает если использовать кириллические символы: не работает ни поиск, ни добавление/изменение
При этом если про кодировку из jquery.ajax, в т.ч. на http://habrahabr.ru/blogs/webdev/17640/ из чего следует что улетает все в utf-8,

Нам поможет функция js encodeURIComponent