Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2018
    Location
    Asheville
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making an Ajax request to change state of a toggled button

    Good Morning Everyone and Thank you for looking!

    I'm working with AJAX for the first time and have ran into a snag with my code. I want to toggle the button state depending on if the DB value for the query is true or false. It works somewhat... But I have to refresh the page to see the actual change in the button. Here is what i have so far. This is a mix of ColdFusion with AJAX and JSON.

    BUTTONS:
    Code:
    <cfoutput>
    <cfif isTotalRewards eq '1'>
      <button type="button" class="btn btn-danger  btn-sm" name="doWhat" id="doRewards" value="on" data-id="ON#username#" onClick="doReward('#username#',0);">Turn Off Total Rewards</button>
    <cfelseif  isTotalRewards eq '0'>
      <button type="button" class="btn btn-success btn-sm" name="doWhat" id="doRewards" value="off" data-id="OFF#username#" onClick="doReward('#username#',1);">Turn On Total Rewards</button>
    </cfif>
    </cfoutput>
    AJAX:
    Code:
    <script type="application/javascript" language="javascript">
    function doReward(username, setting)
    {
    
    var myUser = username;
    var mySetting = setting;
    
     $.ajax({
                url: '../do.cfm',
                cache: false,
                type: 'POST',
                data: {
                    doWhat: 'setTotalRewardsUser',
                    username: username,
    				setting: setting
                }
    
            }).done(function(data){
              
    		   if(mySetting == 1)
    		   {
    			   $(".btn[data-id='OFF"+myUser+"']").hide();
    			   $(".btn[data-id='ON"+myUser+"']").show();
    		   }else{
    			  $(".btn[data-id='OFF"+myUser+"']").show();
    			   $(".btn[data-id='ON"+myUser+"']").hide();
    		   }
                    
                })
    	
    }
    </script>

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,998
    Thanks
    36
    Thanked 1,072 Times in 1,068 Posts
    Both buttons have the same ID. Can one have one thing with an ID.

    $(".btn[data-id='OFF"+myUser+"']").hide();
    $(#THE ID GOES HERE).hide();

    Would toggle help even more????
    Last edited by sunfighter; Nov 8th, 2018 at 01:45 AM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •