CODEWITHSUNDEEP
jquery
Joff
Joff

Reputation: 12187

jQuery .click function requiring two clicks?

I have this jQuery function that doesn't execute all of the code until the second click. It goes to the outside of the $.get and executes the first 'console.log('hit')' but it never makes it through the rest of the code until the second click. Any ideas?

$(document).ready(function() {
            $('#startbutton').click(function() {

                $.get('getquestion',
                      function(data, status) {
                        var qAndA = data
                        window.jsonQA = jQuery.parseJSON( qAndA );
                        console.log(jsonQA)
                });

                console.log('hit')

                var questionArray = []
                for (var i in jsonQA) {
                    questionArray.push(i)
                }

                var index = Math.floor(Math.random() * questionArray.length)

                var theQuestion = questionArray[index]

                $('#question').html(theQuestion)

                console.log('hit2')
            });
        });

Upvotes: 0

Views: 71

Answers (4)

Doug
Doug

Reputation: 7107

Its a timing issue. Your .get is asynchronous, but the rest of your code depends on it.

The second time you click, the GET has completed, but not the first time you run it.

You need to put the rest of that code within:

function(data, status) {
   var qAndA = data
   window.jsonQA = jQuery.parseJSON( qAndA );
   console.log(jsonQA)
   //put the rest of the code here...
}

Upvotes: 2

user1428716
user1428716

Reputation: 2136

The reason your code is not working is by the time AJAX Response comes back your code has already move forward. You can use the flag "async: true" and move the processing logic on Response on Success tag. There is one more way to do this is by using PROMISE Interface as suggested below

$.get(
  url: url,
  data: data,
  dataType: dataType
).*done*(function(data){

   //Move all your processing logic here
// Transform Response ..bla blas
var questionArray = []
                for (var i in jsonQA) {
                    questionArray.push(i)
                }

                var index = Math.floor(Math.random() * questionArray.length)

                var theQuestion = questionArray[index]

                $('#question').html(theQuestion)



    });

Upvotes: 1

SeeTheC
SeeTheC

Reputation: 1631

You are using jsonQA which is init. after get . Here in this case get is response is take time. So either you but remaining code in get success function as below(case 1 ) or use setTimeout (case 2) or you can also use "done" method of $.get.

Case 1 : (Putting code in get success)

 $(document).ready(function() {
                $('#startbutton').click(function() {

           $.get('getquestion',
                function(data, status) {
                  var qAndA = data
                   window.jsonQA = jQuery.parseJSON( qAndA );
                    console.log(jsonQA)
                    console.log('hit')

                    var questionArray = []
                    for (var i in jsonQA) {
                        questionArray.push(i)
                    }

                    var index = Math.floor(Math.random() * questionArray.length)

                    var theQuestion = questionArray[index]

                    $('#question').html(theQuestion)

                    console.log('hit2')
                    });


                });
            });

Case 2 : using setTimeout (giving time to execute $.get )

$(document).ready(function() {
       $('#startbutton').click(function() {    
       $.get('getquestion',
            function(data, status) {
              var qAndA = data
               window.jsonQA = jQuery.parseJSON( qAndA );
                console.log(jsonQA)
                });                       
            });

        setTimeout(function(){

                console.log('hit')    
                var questionArray = []
                for (var i in jsonQA) {
                    questionArray.push(i)
                }

                var index = Math.floor(Math.random() * questionArray.length)

                var theQuestion = questionArray[index]

                $('#question').html(theQuestion)

                console.log('hit2')


         },2000);//giving 2 sec time

        });

Upvotes: 1

Super Hornet
Super Hornet

Reputation: 2907

I guess it doesn't run rest of the codes because of undefined window.jsonQA. you have to define it before using that.

Upvotes: 0

Related Questions