[SOLVED] use jquery to hide/show table

[exhaler]

hi,

i'm a new to jquery and was wondering if someone can help me.

i have this code in javascript to show/hide a table, it depends which radio button is choosen

function showyes(what)
{
	if(what.value == "yes")
	{
		document.getElementById('Table6').style.display = "inline";
		document.getElementById('Table7').style.display = "none";
	}

	else if(what.value == "no")
	{
		document.getElementById('Table6').style.display = "inline";
		document.getElementById('Table7').style.display = "inline";
	}
}

function showno(what)
{
	if(what.id = "no" && what.checked)
	{
		document.getElementById('info2').style.display = "inline";
	}

	else if(!what.checked)
	{
		document.getElementById('info2').style.display = "none";
	}
}

how can i do this using jquery??the above code works fine but not on all browsers for istance on IE7 it doesn't change directly after i selected a radio button. that's why i want to use jquery since it supports cross browser.

thx

[corbin]

In jQuery, you can just use the show() and hide() methods.

 

 

For example, to hide a div with an id of "HideThis", you could do:

$("#HideThis").hide();

 

(Selectors in jQuery are much like CSS selectors.)

 

 

To get the value of something, you can do:

 

$("#something").value()

[RichardRotterdam]

here is a simple tutorial from jquery site

http://docs.jquery.com/Tutorials:Basic_Show_and_Hide

 

one of jquery's advantages is you dont have to use "document.getElementById" etc

the $() function works like a css selector like corbin said

[exhaler]

ok, i came up with this

$(document).ready(function() {
   $('#yes').click(function(){
     $('Table7').hide();
   });
   $('#no').click(function(){
     $('Table6').show();
   });
 });
<input type="radio" value="no" name="exists" id="no" checked="checked">
<input type="radio" value="yes" name="exists" id="yes"> 

but the table isn't hiding

 

[RichardRotterdam]

if your div or table has an id named Table7

<div id="Table7">test</div>

your javascript should be like $("#Table7").hide()

then you have forgotten the # character

[exhaler]

thx, i should pay a bit more attention. also is there an advantage in using jquery to do form validation instead of javascript?

[darkfreaks]

check out the validation plugin for jquery

[exhaler]

another issue appeared...i'm using this code to show some sliding animation and it is working fine

$("a.showresults").click(function(){
   	$("#pollresults").slideToggle("normal"); return false;
   });

but in IE7 after the table slideups it reappears for a split second. this doesn't occur on opera or firefox

any ideas

thx

[darkfreaks]

<!-- jquery for this page -->
<script type="text/javascript">
// initialize the jquery code
$(document).ready(function(){
//close all the content divs on page load
$('.mover').hide();

// toggle slide
$('#slideToggle').click(function(){
// by calling sibling, we can use same div for all demos
$(this).siblings('.mover').slideToggle();
});

// regular toggle with speed of 'slow'
$('#toggleSlow').click(function(){
$(this).siblings('.mover').toggle('slow');
});

// fade in and out
$('#fadeInOut').toggle(function() {
$(this).siblings('.mover').fadeIn('slow');
}, function() {
$(this).siblings('.mover').fadeOut('slow');
});

//animate
$('#animate').click(function() {
$(this).siblings('.mover')
.slideDown(5500).fadeOut(7300);
});

});
</script>

[exhaler]

sorry darkfreaks, but i don't understand what u mean??

here's my full code

function callback() {
	  $("#emailinfo").slideUp("normal");
}

$(document).ready(function() {
   $("a.showresults").click(function(){
   	$("#pollresults").slideToggle("normal"); return false;
   });
   
   $("a.thanks").click(function(){
   	$("#emailinfo").slideToggle("normal"); return false;
   });
   
   $("a.tell").click(function(){
   	$("#tellinfo").slideToggle("normal", callback()); return false;
   });
 });

to see my problem go to this website http://goingpublic.me/newbr/ in IE7 and click on "tell a friend" or "view results" on the right to see what happens when it slidesup

 

[darkfreaks]

http://www.learningjquery.com/2006/09/slicker-show-and-hide

[exhaler]

thanks darkfreaks, that website was helpful, also found a great validation plugin

[exhaler]

i know i'm a pain , here's my problem:

i'm currently using the validation plugin to

validate my forms.

<script src="includes/jquery/jquery.validate.js" type="text/
javascript"></script>
<script src="includes/jquery/cmxforms.js" type="text/javascript"></
script>

<script type="text/javascript">
      $.validator.setDefaults({
              submitHandler: function() { alert("submitted!"); }
      });

      $().ready(function() {
              $("#addrest").validate({
                      rules: {
                              restname: "required"
                      },
                      messages: {
                              restname: "<br><font face=\"Arial\" style=\"font-size: 9pt\" color=
\"#96A26F\">Please enter your Restaurant Name</font>"
                      }
              });
      });

      $(document).ready(function() {
         $('#yes').click(function(){
           $('#tr').hide();
         });
         $('#no').click(function(){
           $('#tr').show();
         });
       });
</script>
<form method="post" action="add.php" id="addrest" class="cmxform">
<table border="0" width="100%" cellpadding="3" cellspacing="0"
id="Table6">
                      <tr>
                              <td valign="top" align="left" style="width: 98px">
                                      <font color="#B9A49B" face="Arial" style="font-size: 8pt">
                                              <label for="restname">Restaurant Name</label>
                                      </font>
                              </td>

                              <td valign="top" align="left" style="width: 204px">
                                      <input type="text" class="required" name="restname" id="restname"
size="35" style="font-size: 8pt; font-family: Arial; color: #56443D;
background-color:#E1D9D5">
                              </td>
                      </tr>
</table>
</form>

 

the above code is working and shows the "required field" but when i

press the submit button agian it adds another message under the old

one. also when i type in something the "required field" doesn't go it

stays.

this happens on opera and FF but not in IE7.

any ideas??

 

u can see this if u follow the link in my previous post then go to "add you restaurant" on the left, i also tried asking in the jquery dicussion thread but for some reason my post is not showing up

 

[darkfreaks]

have you download jquery debug plugin from glyphix ???

 

 

http://jquery.glyphix.com/

[exhaler]

no, i'll have a look at it, in the mean time i'm trying to get used to firebug

[darkfreaks]

Try:

$(document).ready(function(){
             $("#togglediv").click(function(){
                if($("#commentdiv").is(":visible")){
                $("#commentdiv").hide("slow"); $("#togglediv").text("show");
                }
                else{
                $("#commentdiv").show("slow"); $("#togglediv").text("hide");
                }
            }
        });

 

Edit: Works in IE7 and FF

[exhaler]

my problem is not with this

$(document).ready(function() {
         $('#yes').click(function(){
           $('#tr').hide();
         });
         $('#no').click(function(){
           $('#tr').show();
         });
       });

this is to show/hide a tr, and not for the validation. i get this if the user didn't write in something in the input field (taken from firebug)

<label class="error" for="restname" generated="true">Please enter Restaurant Name</label>

and keeps adding this code if the user presses submit and doesn't disappear if the input field is not empty

 

[exhaler]

after day and a half of banging my head to the wall, i finally fixed the issue, for the validation. it turns out that if you put a form tag in a table is screws the validation, put the table inside a form and not vice versa.

thanks for the help guys