Changing visible of a CSS class...

[RIRedinPA]

Here's my problem. I am working on a site that is being built in .NET. I've been told that because it is being built in .NET the sections I am working on cannot use id's in divs or other objects. Everything has to have a class. I've also been told I can't use HTML comments for the same reason. I don't know enough about .NET to know if that is true or not and since I am being loaned out to help them get a project from behind deadline launched really don't care.

 

What I care about is my problem. This section I am working on has two views, a form to add addresses and a form to edit addresses. I need to find a way to identify which view the user is working in and display it. The first part of that problem was simple since we're using query strings in the urls to identify where we are on the site I just used a javascript document.location.search and some split() functions to get which view I should be loading.

 

What I've done is this. In the HTML I have a div called like this:

 

<div class="addaddress groupShipForms"> or <div class="editaddress groupShipForms">

 

The CSS for the "address" classes looks like this:

 

.addaddress 
{ 
display: none; 
}

.editaddress 
{ 
display: none; 
}

 

groupShipForms is the parent class for a bunch of sub classes which define how the form should appear.

 

So my question is, how do I change the display to block (subquestion - should I be using visible:hidden/visible instead?) to show the proper view? They are using jquery and I plugged this code in but it failed.

 

function init() { 

	var formlist = new Array('addaddress', 'editaddress');
	var urlsearchstring = window.location.search

	var searchstringarray = urlsearchstring.split("&");
	for(var i=0; i<searchstringarray.length; i++) { 
		if (searchstringarray[i].indexOf("subsection") != -1) { 
			var subsectionarray = searchstringarray[i].split("=");
			for(var f=0; f<formlist.length; f++) { 
				if (formlist[f] == subsectionarray[1]) { 

					alert("ok!");
					$(document).ready(function() {
        					$(subsectionarray[1]).hide();
      					});

				}//end form/subsection check 
			}//end loop through forms
		}//end search through subsection
	}//end loop through searchstring 
}

window.onload=init;

[trq]

This piece of code....

 

$(document).ready(function() {

 

looks like you might be using jQuery. Are you? Because if you are there are likely MUCH better ways of going about this.

[RIRedinPA]

This piece of code....

 

$(document).ready(function() {

 

looks like you might be using jQuery. Are you? Because if you are there are likely MUCH better ways of going about this.

 

They are using jquery but I have no experience with it. If you've got time to post what you're thinking I'd appreciate it.

[KevinM1]

To be honest, all of this can be done directly in .NET, without any JavaScript.  You can obtain the query string value, then have the code-behind render the proper server controls based on that value - regular controls like normal text fields for someone adding a record, and an editable DetailsView for someone looking to edit an existing record.

 

If you still want to do it through JavaScript, do a google search for getElementByClass().

 

EDIT: also, I'm not sure of the ".NET stops you from using HTML element ids" thing.  I've heard it myself, but a quick, dirty test of a small ASP.NET app shows me that the elements are being rendered with the ids I gave their corresponding controls.  I have the feeling that if it's true, it's based on which version of ASP.NET you're using.  Running your project through the debugger and looking at its rendered source should give you the answer.

[RIRedinPA]

Thanks for the reply. I'm just building the front end of this project so I need to put the Javascript in there for presentation purposes. I'm not sure if the people working on the back end will replace my javascript with .NET code or just leave well enough alone. I suspect it'll all depend on how they are building things.

 

I would do exactly what you outlined if I was building this in PHP. As it stands, I'm not involved in the dynamic aspect of it, just taking the PS pages and building out the front end with straight up html and css.

 

Didn't know about the getEementByClass(). That's nifty. I got it to work with a 10 second google for jquery hide class.