Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   конфликтуют плагин стилизации с ajax запросом (https://javascript.ru/forum/jquery/34381-konfliktuyut-plagin-stilizacii-s-ajax-zaprosom.html)

prohor.zotikov 02.01.2013 01:28

конфликтуют плагин стилизации с ajax запросом
 
здравствуйте. такая проблема распространена и я много где нашел разных советов. Чаще всего предлагают поменять переменную $ на jQuery... но не помогает. Плагин замечательный, но ajax работает только когда я его отключаю... вот код

это плагин в файле jquery.formstyler.js (взял отсюда http://dimox.name/jquery-form-styler/?cp=3#comments)
(function($) {
	$(function() {
		$.fn.styler = function(opt) {
	
			var opt = $.extend({
				browseText: 'Выбрать',
				zIndex: '1000'
			}, opt);
	
			return this.each(function() {
				var el = $(this);
	
				if (el.is('select')) {
					el.each(function() {
						if (el.next('span.jqselect').length < 1) {
							// одиночный селект
							function doSelect() {
								var selectbox =
									$('<span class="selectbox jqselect" style="display:inline-block;position:relative;z-index:' + opt.zIndex + '">'+
											'<div class="select" style="float:left"><div class="text"></div>'+
												'<b class="trigger"><i class="arrow"></i></b>'+
											'</div>'+
										'</span>');
								el.after(selectbox).css({position: 'absolute', left: -9999});
								var divSelect = selectbox.find('div.select');
								var divText = selectbox.find('div.text');
								var option = el.find('option');
								var optionSelected = option.filter(':selected');
								/* берем опцию по умолчанию */
								if (optionSelected.length) {
									divText.text(optionSelected.text());
								} else {
									divText.text(option.filter(':first').text());
								}
								/* проверяем активность селекта */
								if (el.is(':disabled')) {
									selectbox.addClass('disabled');
								} else {
									var ddlist = '';
									for (i = 0; i < option.length; i++) {
										var selected = '';
										var disabled = ' class="disabled"';
										if (typeof option.eq(i).attr('selected') !== 'undefined' && option.eq(i).attr('selected') !== false) selected = ' class="selected sel"';
										if (option.eq(i).is(':disabled')) selected = disabled;
										ddlist += '<li' + selected + '>'+ option.eq(i).text() +'</li>';
									}
									var dropdown =
										$('<div class="dropdown" style="position:absolute;overflow:auto;overflow-x:hidden">'+
												'<ul style="list-style:none">' + ddlist + '</ul>'+
											'</div>').hide();
									selectbox.append(dropdown);
									var li = dropdown.find('li');
									var selectHeight = selectbox.outerHeight();
									if (dropdown.css('left') == 'auto') dropdown.css({left: 0});
									if (dropdown.css('top') == 'auto') dropdown.css({top: selectHeight});
									var liHeight = li.outerHeight();
									var position = dropdown.css('top');
									/* при клике на псевдоселекте */
									divSelect.click(function() {
										/* умное позиционирование */
										var topOffset = selectbox.offset().top;
										var bottomOffset = $(window).height() - selectHeight - (topOffset - $(window).scrollTop());
										if (bottomOffset < 0 || bottomOffset < liHeight * 6)	{
											dropdown.height('auto').css({top: 'auto', bottom: position});
											if (dropdown.outerHeight() > topOffset - $(window).scrollTop() - 20 ) {
												dropdown.height(Math.floor((topOffset - $(window).scrollTop() - 20) / liHeight) * liHeight);
											}
										} else if (bottomOffset > liHeight * 6) {
											dropdown.height('auto').css({bottom: 'auto', top: position});
											if (dropdown.outerHeight() > bottomOffset - 20 ) {
												dropdown.height(Math.floor((bottomOffset - 20) / liHeight) * liHeight);
											}
										}
										$('span.selectbox').css({zIndex: (opt.zIndex-1)}).removeClass('focused');
										selectbox.css({zIndex: opt.zIndex});
										if (dropdown.is(':hidden')) {
											$('div.dropdown:visible').hide();
											dropdown.show();
										} else {
											dropdown.hide();
										}
										return false;
									});
									/* при наведении курсора на пункт списка */
									li.hover(function() {
										$(this).siblings().removeClass('selected');
									});
									var selectedText = li.filter('.selected').text();
									/* при клике на пункт списка */
									li.filter(':not(.disabled)').click(function() {
										var liText = $(this).text();
										if (selectedText != liText) {
											$(this).addClass('selected sel').siblings().removeClass('selected sel');
											option.removeAttr('selected').eq($(this).index()).attr('selected', true);
											selectedText = liText;
											divText.text(liText);
											el.change();
										}
										dropdown.hide();
									});
									dropdown.mouseout(function() {
										dropdown.find('li.sel').addClass('selected');
									});
									/* фокус на селекте */
									el.focus(function() {
										$('span.selectbox').removeClass('focused');
										selectbox.addClass('focused');
									})
									/* меняем селект с клавиатуры */
									.keyup(function() {
										divText.text(option.filter(':selected').text());
										li.removeClass('selected sel').eq(option.filter(':selected').index()).addClass('selected sel');
									});
									/* прячем выпадающий список при клике за пределами селекта */
									$(document).on('onchange', function(e) {
										if (!$(e.target).parents().hasClass('selectbox')) {
											dropdown.hide().find('li.sel').addClass('selected');
											selectbox.removeClass('focused');
										}
									});
								}
							} // end doSelect()
							// мультиселект
							 // end doMultipleSelect()
							if (el.is('[multiple]')) doMultipleSelect(); else doSelect();
							// обновление при динамическом изменении
							el.on('refresh', function() {
								el.next().remove();
								if (el.is('[multiple]')) doMultipleSelect(); else doSelect();
							})
						}
					});
				// end select
				}
			});
	
		}
	})
})(jQuery)


вот ajax запрос в файле ajax.js

<script type="text/javascript">
(function(jQuery) {
	jQuery(function() {
		jQuery('#country_id').change(function () {
			var country_id = jQuery(this).val();
			if (country_id == '0') {
				jQuery('#region_id').html('<option>- В начале выберите страну -</option>');
				jQuery('#region_id').attr('disabled', true);
				return(false);
			}
			jQuery('#region_id').attr('disabled', true);
			jQuery('#region_id').html('<option>загрузка...</option>');
			
			var url = 'js/ajax.php';
			jQuery.post(url, "country_id=" + country_id, 
					function (result) 
					{ 
						if (result.type == 'error') { alert('error'); return(false); } 
					
						else { var options = ''; jQuery(result.regions).each ( function() { options += '<option value="' + jQuery(this).attr('id') + '">' + jQuery(this).attr('title') + '</option>'; }); jQuery('#region_id').html(options); jQuery('#region_id').attr('disabled', false); }
					},
					"json"
			);
		});
	})
})(jQuery)
</script>


так подключаю эти файлы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Добро пожаловать</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link href="style/header.css" rel="stylesheet" type="text/css">
<link href="style/main.css" rel="stylesheet" type="text/css">
<link href="style/jquery.formstyler.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.formstyler.js"></script>
<script type="text/javascript">
(function($) {
	$(function() {
		$('select').styler();
	})
})(jQuery)
</script>

<?php include('js/input.js'); ?>
<?php include('js/ajax.js'); ?>

</head>


просто плагин как то перекрывает запрос... помогите советом

Deff 02.01.2013 01:42

prohor.zotikov,
Ссылка на Вашу тестовую Инет-страничку - имеется ?

prohor.zotikov 02.01.2013 01:57

Вложений: 2
я в mamp'е сайт делаю, не выкладывал на хостинг еще... вот скриншоты

когда отключен плагин
http://javascript.ru/forum/attachmen...d=135707721 5

когда включен плагин
http://javascript.ru/forum/attachmen...d=135707721 5

хоть какую страну выбирай, а в списке городов ничего не меняется

Deff 02.01.2013 02:13

Ну починка авто по фотографии - тяжела, особливо после НГ

prohor.zotikov 02.01.2013 02:19

кстати пользуясь случаем поздравляю всех с новым годом )

Hoshinokoe 02.01.2013 12:41

prohor.zotikov,

Выложите фрагмент разметки, который отображен на скриншотах. Тут не форум экстрасенсов, по картинкам не гадаем :).

Как я понимаю, там селекты country_id и region_id.

P.S. Какие ошибки в консоли браузера ?

prohor.zotikov 02.01.2013 13:20

вот фрагмент из основного файла

<div class="main_center_field">
			<div class="main_field_text"><p>Выберите вашу страну</p></div>
			<div class="selection"><?php include('select/registration_country.php'); ?></div>
		</div>
		<div class="main_field_border"></div>
		<div class="main_center_field">
			<div class="main_field_text"><p>Выберите ваш город</p></div>
			<div class="selection"><select name="region_id" id="region_id" class="registration_select"  disabled="disabled"><option value="0">- В начале выберите страну -</option></select></div>
		</div>
		<div class="main_field_border"></div>
		<div class="main_center_field">
			<div class="main_field_text"><p>Выберите ваш пол</p></div>
			<div class="selection"><?php include('select/registration_sex.php'); ?></div>
		</div>


registration_country.php

<select class="registration_select" name="country_id" id="country_id">
<?php
include('blocks/db.php');
$result=mysql_query('SELECT * FROM countries',$db);
if(!$result) { echo'<p>Возникли проблемы с сервером</p>'; exit(); } 
if(mysql_num_rows($result)>0)
{	
	$array=mysql_fetch_array($result);
	echo'<option value="0" selected="on">- Страна не выбрана -</option>';
	do { printf('<option value=%s>%s</option>',$array['id'],$array['country']); }
	while($array=mysql_fetch_array($result));
}
else { echo'<p>Возникли ошибки при запросе к серверу</p>'; }
?>  
</select>


registration_sex.php

<select class="registration_select" name="sex" id="sex">
<?php
echo '<option value="0" selected>- Пол не выбран -</option>';
echo '<option value="m">Мужской</option>';
echo '<option value="w">Женский</option>';
?>
</select>

prohor.zotikov 02.01.2013 13:21

ошибок в браузере нет...

prohor.zotikov 02.01.2013 14:13

Вложений: 2
веб-инспектор показывает что ajax запрос срабатывает, но на странице не отображается... вот скриншот

http://javascript.ru/forum/attachmen...d=135712139 6

вот скриншот консоли ошибок... ни каких ошибок не отображается

http://javascript.ru/forum/attachmen...d=135712139 6

Hoshinokoe 02.01.2013 14:21

Цитата:

Сообщение от prohor.zotikov (Сообщение 224742)
хоть какую страну выбирай, а в списке городов ничего не меняется

Все правильно. После получения данных вы изменяете разметку в оригинальном селекте, а не в плагине. Чтобы плагин обновил свое состояние, необходимо сгенерировать событие refresh.

Добавьте строку в файл ajax.js:
jQuery('#region_id').html(options);
jQuery('#region_id').attr('disabled', false);

jQuery('#region_id').trigger('refresh'); // обновит состояние плагина


Часовой пояс GMT +3, время: 13:01.