Click here to Skip to main content
14,495,698 members
Rate this:
Please Sign up or sign in to vote.
I want to improve my code, by changing the status or current value if its been changed from 0 to 1. E.g I have two button if the first one is clicked, the status should change its value and show message similar when turning a bulb on and off. I want to do something similar to my ajax call request, as i have two function call and both using GET method. Is there any guru who can show me a walk around examples in Jquery when using GET method?

What I have tried:

<div class="col-md-2 text-center"> 
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Subscribe</button> <br>
 </div>
  <!------
  ---->
  <br/>
<div class = "col-md-2 text-center">
  <button id = "singlebtn" name="singlebtn" class="btn btn-primary">Unsubscribe</button> <br>
</div>
</body>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=0',
      type:'GET',
      data:{
        format:'text'
      },
      success:function(response){
        alert(response);
      },
      error:function() {
        $('#error').text("There was an error processing your request.Please try again");
        $('#singlebutton').append(data);
      }
      
    });
    
    // second button for unsubscribe.
    $(document).ready(function(){
       $.ajax({
      url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=1',
      type:'GET',
      data:{
        format:'text'
      },
      success:function(response){
        alert(response);
      },
      error:function(){
       $('#error').text("There was an error processing your request.Please try again");
        $('#singlebtn').append(data); 
      }
    
    });
    });
    });

</script>  
Posted
Updated 6-Nov-19 5:43am
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Your javascript is firing both AJAX calls on page load, as that is what $(document).ready(function() does. There is nothing that ties either of these AJAX routines to the buttons themselves
$(document).ready(function(){
	$.ajax({
		url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=0',
		-- skipped for brevity
	}
});

// second button for unsubscribe.
$(document).ready(function(){
	$.ajax({
		url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=1',
		-- skipped for brevity
	}
});
Solutions
As these are fairly simple routines; what I would do is to redefine the functions with there own names, and explicitly call them from the two button elements (with different IDs) using the onclick event attribute.
<script type="text/javascript">
function Subscribe() {
  // copy your first ajax here
}
function UnSubscribe() {
  // copy second here
}
</script>
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="Subscribe();">Subscribe</button>
<!-- -->
<button id="singlebtn" name="singlebtn" class="btn btn-primary" onclick="UnSubscribe();">>Unsubscribe</button>

Reference:
https://www.w3schools.com/jsref/event_onclick.asp

Note:
The naming of the ID attributes for the 2 buttons is not really distinguishing; I actually thought you had an HTML error because I was reading them to be the same name.
   
Comments
gcogco10 7-Nov-19 2:30am
   
Hi Team, the challenge now i am facing is the iteration as it does not stop. Here is adjustment of the code.




function Subscribe() {
$.ajax({
url:'https://api.thingspeak.com/update?api_key=D**&field8=0',
type:'GET',
data:{
type:'text'
},
success:function(response){
alert(response);
$('#singlebutton').append(data);
}

});
setTimeout("Subscribe()", 100);

}
// second button to unsubscribe.
function UnSubscribe() {
$.ajax({
url:'https://api.thingspeak.com/update?api_key=D***&field8=1',
type:'GET',
data:{
type:'text'
},
success:function(response){
alert(response);
$('#singlebtn').append(data);
}

});
//setTimeout("UnSubscribe()", 100);
}


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100