Define javascript variable

Question

I want to define some variables inside ajax function eg var last_heart but they doesnt seem to register inside the ajax function

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script> 
    $(document).ready(function(){
           
		var last_heart;
			
		     $("#watchbtn").click(function(){

		     //var w1 = $(this).val('#watchit');
			     
                              if(last_heart == 1){ //remove watch
			      var arg = "?nav=2";
			      var w2= '<i class="fa fa-heart-o"></i>';
			      var heart = 2;
			      }else{
			      var arg = '';
			      var w2 = '<i class="fa fa-heart"></i>';
			      var heart = 1;
			      }
	        $.ajax({ url: "/ajax.php"+arg, success: function(result){

	document.getElementById('watchit').innerHTML = w2;
		            
		            var val1 = document.getElementById('watchcnt').innerHTML.value;

		            if(val1 == null || val1 == "undefined"){
		               var val = 1;
		            }else{
		            var val = Number(val1) + 1
		            }

		            document.getElementById('watchcnt').innerHTML = val;
		            

	                    last_heart = heart;
                     }});//end ajax
		    });
        });
</script>


<button id="watchbtn" class="btn btn-success btn-small"><span id="watchit"><i class="fa fa-heart-o"></i></span> Watch</button>
<a href="#">Watch <span id="watchcnt" class="badge">0</span></a>

Did you try console logging the 'heart' that you are asigning to last_heart to see what it is? — Taplar
– Taplar, Commented Nov 9, 2015 at 13:05
what are you trying to achieve? why do you want to assign the value to that variable inside ajax? — Anoop Joshi P
– Anoop Joshi P, Commented Nov 9, 2015 at 13:05
I guess you have to declare w2 before if. You are declaring it inside if but using it outside it. — Rajesh Dixit
– Rajesh Dixit, Commented Nov 9, 2015 at 13:07
if i take $.ajax({ function away it works. But need ajax function to post data — westnblue
– westnblue, Commented Nov 9, 2015 at 13:10

online Thomas · Accepted Answer · 2015-11-09 14:18:15Z

I've fixed it for you:

$(document).ready(function () {

    var last_heart = 1;

    $("#watchbtn").click(function () {
     var arg = '';
     var w2 = '';
     if (last_heart == 1) { //remove watch
         arg = "?nav=2";
         w2 = '<i class="fa fa-heart-o"></i>';
         var heart = 2;
     } else {
         arg = '';
         w2 = '<i class="fa fa-heart"></i>';
         var heart = 1;
     }
     $.ajax({
         url: "/ajax.php" + arg,
         success: function (result) {

             document.getElementById('watchit').innerHTML = w2;

             var val1 = document.getElementById('watchcnt').innerHTML.value;

             if (val1 == null || val1 == "undefined") {
                 var val = 1;
             } else {
                 var val = Number(val1) + 1
             }

             document.getElementById('watchcnt').innerHTML = val;


             last_heart = heart;
            }
        }); //end ajax
    });
});

Try it yourself @http://jsfiddle.net/8n5aj55j/1/

Easiest way to test your Ajax is by using Chrome, open Network tab and select "XHR" now you see your Ajax request headers, body etc. also you see changing last_heart will make a different request as you expect.

madalinivascu · Accepted Answer · 2015-11-09 13:13:31Z

Try:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script> 
    $(document).ready(function(){
           
		var last_heart = 0;
			
		     $("#watchbtn").click(function(){

		     //var w1 = $(this).val('#watchit');
			     var heart = '';
                  var arg = '';
                   var w2= '';
                              if(last_heart == 1){ //remove watch
			      arg = "?nav=2";
			      w2= '<i class="fa fa-heart-o"></i>';
			      heart = 2;
			      }else{
			      arg = '';
			      w2 = '<i class="fa fa-heart"></i>';
			      heart = 1;
			      }
	        $.ajax({ url: "/ajax.php"+arg, success: function(result){

	        $('#watchit').html(w2);
		            
		            var val1 = $('#watchcnt').text();

		            if(val1 == null || val1 == "undefined"){
		               var val = 1;
		            }else{
		            var val = parseInt(val1) + 1
		            }

		            document.getElementById('watchcnt').innerHTML = val;
		            

	                    last_heart = heart;
                     }});//end ajax
		    });
        });
</script>


<button id="watchbtn" class="btn btn-success btn-small"><span id="watchit"><i class="fa fa-heart-o"></i></span> Watch</button>
<a href="#">Watch <span id="watchcnt" class="badge">0</span></a>

Collectives™ on Stack Overflow

Define javascript variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related