CODEWITHSUNDEEP
javascriptjqueryajax
westnblue
westnblue

Reputation: 517

Define javascript variable

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>

Upvotes: 1

Views: 64

Answers (2)

online Thomas
online Thomas

Reputation: 9391

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.

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

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>

Upvotes: 0

Related Questions