Problems hiding / displaying div with Javascript

Question

Problems hiding / displaying div with Javascript

Navigation

#1 by (2 votes)

5

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

The function below is called by selecting dropdownlist . Right below, the% of% where I call the function.

I have tried using jQuery, I have already tried calling the event in the PostBack of the page (and outside it too), but the impression is that my div is lost sometime.

I've also tried putting dropdownlist straight into div , without success. The two divs are set to display:none/block , and are not done dynamically.

OBS. 2: Within .aspx , there are two divParcelaVariavel , 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'
        }
    }

javascript c# asp.net

asked by anonymous 09.01.2015 / 13:38

1 answer

GIT: project with 2 versions in different clients and main branch Change HTTP User Agent

score 2 · Accepted Answer

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

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

And here Matenha.

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

Your JavaScript function should look like this. I decided to put the select and option because in the end Dropdown and ListItem if they do not make the same for the browser.

Here's 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>