Показать сообщение отдельно
  #1 (permalink)  
Старый 02.01.2013, 01:28
Новичок на форуме
Отправить личное сообщение для prohor.zotikov Посмотреть профиль Найти все сообщения от prohor.zotikov
 
Регистрация: 11.12.2012
Сообщений: 8

конфликтуют плагин стилизации с 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>


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