14 августа 2014 в 11:32
Набросал форму вывода данных с зависимыми списками, реализованными в виде селектов, обновляемые через ajax. Захотелось превратить селекты в стилизованные списки.С помощью гугла, нашел jQuery-плагин для стилизации селектов. Не много подредактировав его под свои нужды (убрал возможность раскрывания и скрытия, для статичного списка на подобии меню) включил его в свою форму. И что-то пошло не так, после того как блок с селектом заменяется через ajax, скрипт не отрабатывает.
Нуждаюсь в помощи. Возможно ли как вызвать скрипт для документа, который формируется с помощью ajax.
Или есть ли решение данной проблемы.
код модуля
<?php
function main_block_form($form,&$form_state){
drupal_add_js('jquery.selectbox.js');
drupal_add_js('start.js');
$form['entree'] = array(
'#type' => 'select',
'#title' => 'Выберите участок',
'#options' =>$entree_list,
'#prefix' =>"<div>",
'#suffix'=>'</div>',
'#ajax' => array(
'callback' => 'main_block_refresh_around',
'wrapper' => 'around-main-block',
'method' => 'replace',
'effect' => 'fade',
),
);
$form['around']=array(
'#prefix' => '<div id = "around-main-block" class="main-block">',
'#suffix'=>'</div>',);
$form['around']['mainselect'] = array(
'#type' => 'select',
'#options' =>$select_main_option,
'#prefix' =>"<div class=\"tab-block\">",
'#suffix' => "</div>",
'#ajax' => array(
'callback' => 'main_block_refresh_tab',
'wrapper' => 'tab-main-block',
'method' => 'replace',
'effect' => 'fade',
),
);
/*еще селекты*/
/*элементы формы для вывода с условиями данных */
return $form;
}
function main_block_refresh_around($form,&$form_state){
return $form['around'];
}
?>код скрипта start.js
(function($) {
$(function() {
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();
})
})(jQuery)
$(function() {
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();
})
})(jQuery)
скрипт стилизации приложен в архиве
| Вложение | Размер |
|---|---|
 jquery.selectbox.js_.zip | 1.72 КБ |
Комментарии
попробуйте вызывать
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();
После выполнения ajax запроса, можно в $( document ).ajaxStop(function() {...
Advin, спасибо за отклик, но не сосем понимаю как и где вызвать это после "После выполнения ajax запроса"
с js я на вы, потому подтупливаю куда это$( document ).ajaxStop(function() {...
попробовал добавить тэг script в новый элемент формы и аякс отпал оттого элемента к которому прописал
<?phpfunction main_block_refresh_around($form,&$form_state){
$form['around']['muri']=array(
'#markup' => "<script>
$( document ).ajaxStop(function() {(function($) {
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();
})
})(jQuery)
</script>",);
return $form['around'];
}
?>
Добавлю, что если метод ajax сменить c replace на prepend, убрать добавление js в функции создания формы и добавить в колбеке, то стилизации изначально нет, а при нажатии на селект с аяксом добавляется новый блок без стилизации, а старый чудесным образом стилизуется
<?phpfunction main_block_form($form,&$form_state){
drupal_add_js('jquery.selectbox.js');
//drupal_add_js('start.js');убрал
$form['entree'] = array(
'#type' => 'select',
'#title' => 'Выберите участок',
'#options' =>$entree_list,
'#prefix' =>"<div>",
'#suffix'=>'</div>',
'#ajax' => array(
'callback' => 'main_block_refresh_around',
'wrapper' => 'around-main-block',
'method' => 'prepend',//заменил
'effect' => 'fade',
),
);
$form['around']=array(
'#prefix' => '<div id = "around-main-block" class="main-block">',
'#suffix'=>'</div>',);
$form['around']['mainselect'] = array(
'#type' => 'select',
'#options' =>$select_main_option,
'#prefix' =>"<div class=\"tab-block\">",
'#suffix' => "</div>",
'#ajax' => array(
'callback' => 'main_block_refresh_tab',
'wrapper' => 'tab-main-block',
'method' => 'replace',
'effect' => 'fade',
),
);
/*еще селекты*/
/*элементы формы для вывода с условиями данных */
return $form;
}
function main_block_refresh_around($form,&$form_state){
drupal_add_js('start.js'); //добавил
return $form['around'];
?>
бывает пишешь всякую ерунду главное чтобы робило, не задумываясь извращение это или нет....
главное что не сработало, если бы сработало то написал в файле js
отладчик google chrome пишет
Uncaught TypeError: Property '$' of object [object Object] is not a function
Правильно ли я понимаю что нужно переписать скрипт, каким то образом Drupal.behaviors ? или можно и в
$(function() {
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();
})
})(jQuery)
как-то прописать?
с вариантом предложенным Advin разобрался, спасибо.
Только отрабатывает стилизация не сразу...
пойду разбираться с Drupal.behaviors
Добавил Drupal.behaviors в start.js
Спасибо и тебе ХулиGUN за пинки в нужном направлении