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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts

    how to dynamicaly reset page elements?

    Hi,
    I’m new to jquery.
    http://fozz.dyndns-ip.com/questions/passFail.html
    The link shows a simple table for recording pass / fail with reset.
    It works 1st time but not after using the reset button. Please can anyone advise how to make this work after a reset?
    I don’t want to do a page refresh as the finished page will hold other info which I would not wish to loose.
    Any advice would be greatly appreciated. My code is given below:-

    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>pass fail question???</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script>
    
    $(document).ready(function() {	
    	$("#btnP").click(function(){	
    		$(this).parent('td').addClass('green');
    		$(this).parent('td').text('PASS');
    	});	
    	$("#btnF").click(function(){	
    		$(this).parent('td').addClass('red');
    		$(this).parent('td').text('FAIL');
    	});	
    	$("#btnR").click(function(){	
    		$(this).parents('tr').html('<td><span id = btnP><button>Pass</button></span></td>\
    		<td><span id = btnF><button>Fail</button></span></td>\
    		<td><span id = btnR><button>Reset</button></span></td>');
    	});	
    });
    
    </script>
    
    <style>	
    	.red { background-color:red; }
    	.green {background-color:lightgreen; }
    </style>
    
    </head>
    <body>
    <table width="auto"  border="1" cellpadding="5">
      <tr>
        <td><span id = btnP><button>Pass</button></span></td>
        <td><span id = btnF><button>Fail</button></span></td>
        <td><span id = btnR><button>Reset</button></span></td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by chrisfozz; 07-23-2013 at 10:09 AM.

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts

    fixed

    it works with an ajax call and some form tags.

    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>pass fail question???</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script>
    
    $(document).ready(function() {	
    	$("#btnP").click(function(){	
    		$(this).parent('td').addClass('green');
    		$(this).parent('td').text('PASS');
    	});	
    	$("#btnF").click(function(){	
    		$(this).parent('td').addClass('red');
    		$(this).parent('td').text('FAIL');
    	});	
    	$("#btnR").click(function(){	
    	
    		var xmlhttp;
    		if (window.XMLHttpRequest)
    		  {// code for IE7+, Firefox, Chrome, Opera, Safari
    		  xmlhttp=new XMLHttpRequest();
    		  }
    		else
    		  {// code for IE6, IE5
    		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    		  }
    		xmlhttp.onreadystatechange=function()
    		  {
    		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    			{
    			document.getElementById("row").innerHTML=xmlhttp.responseText;
    			}
    		  }
    		xmlhttp.open("GET","passFail10.php",true);
    		xmlhttp.send();
    	});	
    });
    
    </script>
    
    <style>	
    	.red { background-color:red; }
    	.green {background-color:lightgreen; }
    </style>
    
    </head>
    <body>
    
    <form>
    <table width="auto"  border="1" cellpadding="5">
      <tr id = 'row'>
        <td><span id = btnP><button>Pass</button></span></td>
        <td><span id = btnF><button>Fail</button></span></td>
        <td><span id = btnR><button>Reset</button></span></td>
      </tr>
    </table>
    </form>
    
    </body>
    </html>

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,045
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by chrisfozz View Post
    Code:
    	$("#btnR").click(function(){	
    	
    		var xmlhttp;
    		if (window.XMLHttpRequest)
    		  {// code for IE7+, Firefox, Chrome, Opera, Safari
    		  xmlhttp=new XMLHttpRequest();
    		  }
    		else
    		  {// code for IE6, IE5
    		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    		  }
    		xmlhttp.onreadystatechange=function()
    		  {
    		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    			{
    			document.getElementById("row").innerHTML=xmlhttp.responseText;
    			}
    		  }
    		xmlhttp.open("GET","passFail10.php",true);
    		xmlhttp.send();
    	});
    Since you are using jQuery, why not use $.ajax() or $.get()?

  • Users who have thanked glenngv for this post:

    chrisfozz (07-24-2013)

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,198
    Thanks
    23
    Thanked 605 Times in 604 Posts
    When you did this:
    Code:
    $("#btnP").click(function(){	
       $(this).parent('td').addClass('green');
       $(this).parent('td').text('PASS');
    });
    You removed the entire span element and I have found no way to get it back, so lets remove the .parent('td') and place the text inside the span. Now we can do this:
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    	$("#btnP").click(function(){
    		$(this).parent('td').addClass('green');
    		$(this).text('Pass');
    	});
    	$("#btnF").click(function(){
    		$(this).parent('td').addClass('red');
    		$(this).text('FAIL');
    	});
    	$("#btnR").click(function(){
    		$("#btnP, #btnF").parent('td').removeClass('green red');
    		$("#btnP, #btnF").text('');
    		$("#btnP").html('<button id="btnP">Pass</button>');
    		$("#btnF").html('<button id="btnF">Pass</button>');
    	});
    });
    </script>
    $("#btnP, #btnF").text(''); really not needed.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    chrisfozz (07-24-2013)

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you Sunfighter for your solution, it works very well and has helped me on my way.
    I’ve decided not to use the ajax call but this is something I need to develop a greater understanding of if I’m to make progress.
    Many thanks
    Chris


  •  

    Posting Permissions

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