JavaScript, как запустить одну и ту же функцию onLoad и onChange - PullRequest
Новая
       23

JavaScript, как запустить одну и ту же функцию onLoad и onChange

3 голосов
/ 28 марта 2012

У меня есть форма, в которой есть много выбранных меню, большинство из которых - Да / Нет, и в зависимости от выбранной опции я отображаю / скрываю некоторые расширенные опции.Одним из меню выбора является следующее: 

<td><%= f.select :CBIAvailable, ['Yes' , 'No'],{}, {:id=>"cbi_available_id", :class=>"cbi_available_class", :onChange=>"showHideOptions('cbi_available_id','cbi_options_id')", :onLoad=>"showHideOptions('cbi_available_id','cbi_options_id')"} %></td>

Когда я изменяю с 'Да' на 'Нет' или наоборот, JavaScript-функции showHideOptions вызываются правильно, но у меня не может быть этой функциивызывается, когда я перезагружаю форму.

Кто-нибудь может сказать мне, в чем я не прав?

Спасибо

ОБНОВЛЕНИЕ 

<script language="javascript" type="text/javascript">
function showHideOptions(selectorId,optionsId) {
  if (document.getElementById) {
    var selector = document.getElementById(selectorId);
    var options = document.getElementById(optionsId);
    if (selector.value == 'Yes') {
        options.style.display = 'block';
        return false;
    } else {
      options.style.display = 'none';
        return false;
    }
}

window.onLoad = showHideOptions('cbi_available_id','cbi_options_id');

Ответы [ 2 ]

1 голос
/ 28 марта 2012 
function yourFunction(){

    //get that select element and evaluate value
    //do you change stuff here
}

window.onload = yourFunction;   //this gets fired on load

//"select" is your element, 
//fetched by methods like document.getElementById();

select.onchange = yourFunction; //this gets fired on change

//you can also use attachEvent (IE) or addEventListener (Others)

вот рабочая демоверсия : 

<select id="testSelect">
    <option value="yes">YES</option>
    <option value="no">NO</option>
</select>​​​​​

function getOption() {
    alert('foo');
}

var select = document.getElementById('testSelect');
select.onchange = getOption;
window.onload = getOption;

0 голосов
/ 28 марта 2012

Это может произойти, когда вы получаете обратную передачу с удаленного сервера, а в вашем ответе нет <script type="javascript">... yourfunction()...</script>.

Каждый раз, когда вы получаете новый ответ, вы должны отправлять сценарий и выполнять его или добавлять в свой обработчик событий html-элемента.

Другим решением является использование jQuery и использование события .live () . Это событие придает динамическое поведение вашему HTML. Я настоятельно рекомендую вам использовать jQuery с live, поскольку эта библиотека является одной из наиболее часто используемых библиотек в производственной среде.

Редактировать 

<script type="text/javascript" src="path_to_jquery.js"></script>
<script type="text/javascript">
function showHideOptions(id1,id2){
    //Your code
}
$(document).ready(function() {
   //This function waits for DOM load
   //execute your function for first time
   showHideOptions('cbi_available_id','cbi_options_id');
   //This selector you have to modify or show us generated html to
   // choose the best selector for this purpose
   $('.cbi_available_class').live('change',function(){
        //This will fire change event of html class="cbi_available_class"
        showHideOptions('cbi_available_id','cbi_options_id');
   });
 });
</script>
...