здравствуйте. такая проблема распространена и я много где нашел разных советов. Чаще всего предлагают поменять переменную $ на 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>
просто плагин как то перекрывает запрос... помогите советом
.
