CODEWITHSUNDEEP
javascriptjqueryonclick
db42
db42

Reputation: 4544

Jquery onclick event requires two clicks

On click, I want to hide/show some html code(which is obtained via a GET request to another page). It works but the problem is that it requires two clicks instead of one.

There is one other question that seems related but I am not able to understand that.

  <script>
     $(document).ready(function(){
        $(".quote-toggle").click( function(event) {
            var id = $(this).attr('id');
            $.get( $(this).attr('href'), function(msg) {
                if($("#toggler_" + id).html()=='show') {
                    $("#" + id).html(msg);
                    $("#toggler_" + id).html('hide'); 
                  }
                else {
                    $("#" + id).html('');
                    $("#toggler_" + id).html('show'); 
                 }
            });
            event.preventDefault();
        });
     });
   </script>

This is my first time with jquery/javascript. Any explanation or suggestions for the code would be much appreciated. [Edit]
jsfiddle: http://jsfiddle.net/KCLf5/1/

Upvotes: 4

Views: 4459

Answers (3)

Stevie B
Stevie B

Reputation: 1

For two days I wrestled with having the "2-clicks-required-to-load-first-external-html" problem.

After one would load, requiring 2 clicks, the rest would behave and load on 1 click.

I easily solved this by creating a blank html file, and placing its load command on the line following "(document).ready". Nothing else I tried from forums would work for me, but this did on the very first try.

I had noticed that the JS file wanted one html file loaded before it would load any of the others, so I gave it one to load automatically. Simple fix and works like a charm!

Upvotes: 0

Nikolay Fominyh
Nikolay Fominyh

Reputation: 9256

  1. First of all - you shouldn't do get request on hide element.
  2. Second - event.preventDefault should be at the start of event. It will save you from unexcepted behaviour on javascript errors.

Here is code, that uses these 2 recomendations: 

    $(document).ready(function(){
      $(".quote-toggle").click( function(event) {
        event.preventDefault();
        var id = $(this).attr('id');
        var url = $(this).attr('href');
        if($("#" + id).html()=='') {
            $.get(url, function(msg) {
                $("#" + id).html(msg);
                $("#toggler_" + id).html('hide'); 
            });
         } else {
            $("#" + id).html('');
            $("#toggler_" + id).html('show'); 
         }
      });
    });

Upvotes: 2

Lourens
Lourens

Reputation: 1518

If I had to guess, $("#toggler_" + id)'s html is not set to show. So the first click will set it to show and the second will load the data.

Make sure that the toggler has the correct html when the page loads

Upvotes: 3

Related Questions