[РЕШЕНО] Не работает js скрипт стилизации на select после возращенной формы через ajax

Аватар пользователя ASomeoneD

Набросал форму вывода данных с зависимыми списками, реализованными в виде селектов, обновляемые через 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)

скрипт стилизации приложен в архиве

ВложениеРазмер
Иконка пакета jquery.selectbox.js_.zip1.72 КБ
Ключевые слова:
Тип материала:
Версия Drupal:
0 Thanks

Комментарии

Аватар пользователя Advin
Advin 3 года назад

попробуйте вызывать
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();

После выполнения ajax запроса, можно в $( document ).ajaxStop(function() {...

Аватар пользователя ASomeoneD
ASomeoneD 3 года назад

Advin, спасибо за отклик, но не сосем понимаю как и где вызвать это после "После выполнения ajax запроса"
с js я на вы, потому подтупливаю куда это$( document ).ajaxStop(function() {...
попробовал добавить тэг script в новый элемент формы и аякс отпал оттого элемента к которому прописал

<?php
function 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'];
}
?>
Аватар пользователя ASomeoneD
ASomeoneD 3 года назад

Добавлю, что если метод ajax сменить c replace на prepend, убрать добавление js в функции создания формы и добавить в колбеке, то стилизации изначально нет, а при нажатии на селект с аяксом добавляется новый блок без стилизации, а старый чудесным образом стилизуется

<?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' => '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'];
?>
Аватар пользователя ASomeoneD
ASomeoneD 3 года назад

бывает пишешь всякую ерунду главное чтобы робило, не задумываясь извращение это или нет....
главное что не сработало, если бы сработало то написал в файле js
отладчик google chrome пишет
Uncaught TypeError: Property '$' of object [object Object] is not a function

Аватар пользователя ASomeoneD
ASomeoneD 3 года назад

Правильно ли я понимаю что нужно переписать скрипт, каким то образом Drupal.behaviors ? или можно и в

(function($) {  
$(function() {  
$('select[name=agri_list]').selectbox();
$('select[name=mainselect]').selectbox();
})  
})(jQuery)

как-то прописать?

Аватар пользователя ASomeoneD
ASomeoneD 3 года назад

с вариантом предложенным Advin разобрался, спасибо.
Только отрабатывает стилизация не сразу...
пойду разбираться с Drupal.behaviors

Аватар пользователя ASomeoneD
ASomeoneD 3 года назад

Добавил Drupal.behaviors в start.js
Спасибо и тебе ХулиGUN за пинки в нужном направлении