Problem showing and hiding button. Load the page

Question

Problem showing and hiding button. Load the page

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have made a functionality to hide a menu by jquery.

The first part of the code, that is to hide, works perfectly, but the second part, although it works, loads the page, when my intention is to do it without loading the page.

How could I improve the code so that it does not load the page?

JQUERY

<script type="text/javascript" >
$(document).ready(function(){


    $('#ocultaropciones').click(function(e){

        var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                            $('#contenidoDerecha').attr('class','col-md-12');
                            $('#menuizquierdo').hide();
                            $('#opcionesListado').html(urlaocultar);
                            e.preventDefault(); 
                        //  $('#ocultaropciones').parents().text(urlaocultar); 


    });
    $('#mostraropciones').click(function(b){
        b.preventDefault(); 
        var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                            $('#menuizquierdo').show();
                            $('#opcionesListado').html(urlamostrar);

    });
})

</script>

The code HTML is too long so I put what I think can help you identify the problem

<div class="col-md-12">
                        <div class="panel panel-default ">
                            <!-- <div class="panel-heading">
                                <h3 class="panel-title">Panel title</h3>
                            </div> -->
                            <div class="panel-body">


                            <div class="row">
                                <div class="col-md-2" id="menuizquierdo">
                                      <div class="panel panel-default">

                                        <div class="panel-heading">Opciones</div>
                                          <div class="panel-body text-center">
                                           <ul>
                                               <li><a href="">opcion_1</a></li>
                                               <li><a href="">opcion_2</a></li>
                                               <li><a href="">opcion_3</a></li>
                                               <li><a href="">opcion_4</a></li>
                                               <li><a href="">opcion_5</a></li>
                                               <li><a href="">opcion_6</a></li>
                                               <li><a href="">opcion_7</a></li>
                                               <li><a href="">opcion_8</a></li>
                                               <li><a href="">opcion_9</a></li>
                                               <li><a href="">opcion_10</a></li>
                                               <li><a href="">opcion_11</a></li>
                                               <li><a href="">opcion_12</a></li>
                                               <li><a href="">opcion_13</a></li>
                                               <li><a href="">opcion_14</a></li>
                                               <li><a href="">opcion_15</a></li>
                                               <li><a href="">opcion_16</a></li>
                                               <li><a href="">opcion_17</a></li>
                                               <li><a href="">opcion_18</a></li>
                                               <li><a href="">opcion_19</a></li>
                                               <li><a href="">opcion_20</a></li>
                                         </ul>
                                        </div>


                                    </div>

                                </div>


                                <div class="col-md-10" id="contenidoDerecha">

  <div id="espacio100"></div>

<div class="col-md-2" id="opcionesListado">
                        <a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>

                    </div>

jquery

asked by KurodoAkabane 14.10.2016 в 12:42

source

3 answers

1

Try changing your JQUERY to this other

<script type="text/javascript" > 
$(document).ready(function(){


     $('#ocultaropciones').click(function(e){

         var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                             $('#contenidoDerecha').attr('class','col-md-12');
                             $('#menuizquierdo').hide();
                             $('#opcionesListado').html(urlaocultar);
                             return false;
                         //  $('#ocultaropciones').parents().text(urlaocultar); 


     });
     $('#mostraropciones').click(function(b){

         var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                             $('#menuizquierdo').show();
                             $('#opcionesListado').html(urlamostrar);
           return false;

     }); })

 </script>

Although the preventDefault() also serves to avoid that the jump can be made, to me there are many times that it has given me problems and with the return I solved it

answered by 14.10.2016 в 12:54

0

Finally solve it.

First I added this line by hand under the hide options

<a href="" class="btn btn-info hidden" id="mostraropciones" >Mostrar opciones</a>

And then change the javascript a bit ... for this

<script type="text/javascript" >
$(document).ready(function(){


    $('#ocultaropciones').click(function(e){

    //  var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
                            $('#contenidoDerecha').attr('class','col-md-12');
                            $('#menuizquierdo').hide();
                            $('#mostraropciones').removeClass('hidden');
                            $('#ocultaropciones').addClass('hidden');

                        //  $('#opcionesListado').html(urlaocultar);
                            e.preventDefault(); 
                        //  $('#ocultaropciones').parents().text(urlaocultar); 


    });
    $('#mostraropciones').click(function(b){
        b.preventDefault(); 
    //  var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
                        $('#contenidoDerecha').attr('class','col-md-10');
                            $('#menuizquierdo').show();
                            $('#mostraropciones').addClass('hidden');
                            $('#ocultaropciones').removeClass('hidden');
                        //  $('#opcionesListado').html(urlamostrar);

    });
})

</script>

When you try to interact with a javascript result it gives problems so you have to have all the elements that you are going to use already loaded. Thank you very much everyone

answered by 14.10.2016 в 12:58

automatically reload a page by clicking on back in the browser [closed] Failed to query javaFx through sql statements

score 1 · Accepted Answer

There is something that happens in jQuery, and that is that the button with id "dispropciones" is not loaded in the document, which causes that the code is not executed.

Change the code to the following:

$(document).ready(function() {
  $('body').on("click", "#ocultaropciones", function(e) {
    var urlaocultar = '<a href="" class="btn btn-info" id="mostraropciones" >Mostrar opciones</a>';
    $('#contenidoDerecha').attr('class', 'col-md-12');
    $('#menuizquierdo').hide();
    $('#opcionesListado').html(urlaocultar);
    e.preventDefault();
  });
  $('body').on("click", "#mostraropciones", function(b) {
    b.preventDefault();
    var urlamostrar = '<a href="" class="btn btn-info" id="ocultaropciones" >Ocultar opciones</a>';
    $('#menuizquierdo').show();
    $('#opcionesListado').html(urlamostrar);
  });
});

When you enter new HTML, and you want jQuery to take effect when you trigger on that element, use $("body").on("click", "#elemento", function() {}); (the function you'll have to choose the one you need of course).

I add the jsFiddle of your code working: link

I would add both buttons in the HTML and I would just do .hide() and .show() depending on which one you clicked, so you would save some jQuery code.