6 Replies - 3488 Views - Last Post: 07 May 2010 - 03:29 PM

#1 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Javascript and control visibility

Posted 05 May 2010 - 02:10 AM

Hi.

I'm using PHP and adding Javascript to snazz up how my data gets displayed. This isn't for a class ;-p, I'm just expanding my skills. I try to stay away from Javascript as much as possible for compatibility reasons, but there are some instances where I can't get away with it.

In my web apps class a few years ago, we used ASP.NET, C# and Javascript. The instructor really had no idea what she was talking about... But we were making labels visible/invisible for input validation. As I recall, this was server-side, but I don't remember the page reloading.

Anyway, now that I'm nice and confused, I need a method of making an html control element visible or invisible without a page refresh based on whatever criteria I have at the moment. I don't see any reason why Javascript couldn't do this. Could someone point me in the right direction?

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript and control visibility

#2 Fratyr  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 139
  • Joined: 10-April 08

Re: Javascript and control visibility

Posted 05 May 2010 - 05:05 AM

<table id="id_of_html_element">
<tr>
   <td>Bla bla bla
   </td>
</tr>
</table>

<a href="javascript: void(0)" onclick="toggleShow('id_of_html_element')">Show/Hide</a>

<script type="text/javascript">
function toggleShow(element) {
   if ( document.getElementById(element).style.display == 'none' )
   {
      document.getElementById(element).style.display = 'block';
   }
   else
   {
      document.getElementById(element).style.display = 'none';
   }
}
</script>


Like this?

which of course can be improved. this is just an example.

This post has been edited by Fratyr: 05 May 2010 - 05:07 AM

Was This Post Helpful? 0
  • +
  • -

#3 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Javascript and control visibility

Posted 05 May 2010 - 11:23 AM

How about AJAX techniques. http://www.w3schools...jax/default.asp
Was This Post Helpful? 0
  • +
  • -

#4 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Re: Javascript and control visibility

Posted 05 May 2010 - 08:15 PM

@JRM - Tell me what your definition of AJAX is.



@Fratyr - Thanks, yes that looks right. I can call it whenever I like and it toggles the visibility of whatever control I want. All I have to do is grab the ID and call the function.

I had seen other examples like this, but they seemed to be one-way.
Was This Post Helpful? 0
  • +
  • -

#5 Guest_Guest*


Reputation:

Re: Javascript and control visibility

Posted 06 May 2010 - 01:32 PM

Do you want to have a function that toggles the element on and off? Try this:

function toggle (eid) { // eid is the id of the element
	var e = document.getElementById(eid);
	if (e.style.display) { // check if inline style is set.
		if (e.style.display == "none") { // element is off. turn on
			e.style.display == "inline"; // "inline" or "block" or any other valid value will work
		}
		else { // element is on. turn off
			e.style.display = "none";
		}
	}
	else { // no inline styles set yet - turn off
		e.style.display = "none";
	}
}

Was This Post Helpful? 0

#6 Galaxy_Stranger  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 100
  • Joined: 07-February 06

Re: Javascript and control visibility

Posted 06 May 2010 - 04:31 PM

Oh yeah, I see the difference.

But yeah, I could use either of them.

Thanks guys.
Was This Post Helpful? 0
  • +
  • -

#7 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Javascript and control visibility

Posted 07 May 2010 - 03:29 PM

If your needing to grab something from a database you would use AJAX. Asynchronous Javascrip And Xml (AJAX) isn't a language but more of an extension of Javascript. It allows you to make http requests to the server without having to reload the page. So if you needed to populate something based off of the users input and it needed to be queried from a db, you could use AJAX to return the query results in whatever format you specify.

If you just want to change elements on/off, I would stick to strait Javascript like before.

A good example of AJAX is when you go to google and start typing in the search. The auto-complete feature of Google is using AJAX. Another good one is gmail. It uses AJAX to refresh your inbox without having to refresh the entire page.

I would definitely check out AJAX it's some really cool stuff (but not always necessary). :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1