Problems hiding/displaying div with Javascript

Question

I have a relatively simple problem, but I cannot find a quick solution: I have a dropdownlist which determines which div will be displayed, and the moment the page is loaded for the first time, it works perfectly. Soon after saving the data (ie give refresh on the page), the option that was hidden before that refresh is no longer displayed when selected in dropdownlist .

The function below is called when selecting the dropdownlist . Just below, the dropdownlist where I call the function.

NOTE: I tried using jQuery, I tried calling the event on Postback page (and outside of it too), but the impression is that my div gets lost at some point.

I’ve also tried putting the display:none/block right in the div, without success. Both Divs are fixed in the .aspx, and are not made dynamically.

OBS. 2: Inside the divParcelaVariavel, there are two UpdatePanel, used on two buttons.

function MudarEstado() {

     var fixas = document.getElementById('ContentPlaceHolder2_divParcelaFixas');
     var variaveis = document.getElementById('ContentPlaceHolder2_divParcelaVariavel');


     if (document.getElementById('ContentPlaceHolder2_dropTipoParcelas').value == 'V') {
         variaveis.style.display = 'block'
         fixas.style.display = 'none'
        }
     else {
         variaveis.style.display = 'none'
         fixas.style.display = 'block'
        }
    }

Answer 1

UpdatePanel is an update of a piece of the screen. If only a piece of the screen is updated you end up losing your Javascript/Jquery, losing the function that your Dropdown performs, take a read here to better understand. Use the code below for a new loading of the Javascript function after a block update.

 var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_endRequest(function () {
       $("#dpw").click(function () {     
        mudarEstado();
      });
    });

And matenha Here.

$(function () {
 mudarEstado();
});

Your Function Javascript should look like this. I decided to put the select and option because in the end Dropdown and Listitem do not become the same for the browser.

Here is an example of how it should be done..

 <form id="form1" runat="server">
        <div>
            <select id="dpw" onclick="mudarEstado()">
                <option selected="selected" value="S">Ocultar</option>
                <option value="N">Mostrar</option>
            </select>
            <br />
            <div id="oculta" style="display:none;background-color: #000; width: 30px; height: 40px"></div>
        </div>
    </form>
    <script type="text/javascript">
        function mudarEstado() {
            var value = document.getElementById("dpw").value;
            if (value === "S")
                document.getElementById("oculta").style.display = "none";
            else
                document.getElementById("oculta").style.display = "block";
        }

    </script>