конфликтуют плагин стилизации с 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> просто плагин как то перекрывает запрос... помогите советом |
prohor.zotikov,
Ссылка на Вашу тестовую Инет-страничку - имеется ? |
Вложений: 2
я в mamp'е сайт делаю, не выкладывал на хостинг еще... вот скриншоты
когда отключен плагин http://javascript.ru/forum/attachmen...d=135707721 5 когда включен плагин http://javascript.ru/forum/attachmen...d=135707721 5 хоть какую страну выбирай, а в списке городов ничего не меняется |
Ну починка авто по фотографии - тяжела, особливо после НГ
|
кстати пользуясь случаем поздравляю всех с новым годом )
|
prohor.zotikov,
Выложите фрагмент разметки, который отображен на скриншотах. Тут не форум экстрасенсов, по картинкам не гадаем :). Как я понимаю, там селекты country_id и region_id. P.S. Какие ошибки в консоли браузера ? |
вот фрагмент из основного файла
<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> |
ошибок в браузере нет...
|
Вложений: 2
веб-инспектор показывает что ajax запрос срабатывает, но на странице не отображается... вот скриншот
http://javascript.ru/forum/attachmen...d=135712139 6 вот скриншот консоли ошибок... ни каких ошибок не отображается http://javascript.ru/forum/attachmen...d=135712139 6 |
Цитата:
Добавьте строку в файл ajax.js: jQuery('#region_id').html(options); jQuery('#region_id').attr('disabled', false); jQuery('#region_id').trigger('refresh'); // обновит состояние плагина |
Часовой пояс GMT +3, время: 13:01. |