[Oisín]

I'm doing a very small page for my father's auction buying/selling hobby, and the page has to be in both Swedish and English. The page is so small that I figured I could make a fancy little language switcher (that wouldn't require a reload of the page) by typing in all the text in both Swedish and English, giving the divs containging the Swedish text a class of 'svenska' and the ones containing the English text a class of 'english'; and then make a switch button (well, text actually), which would simply call a JavaScript function that hid all the divs with 'svenska' class and showed all the divs with 'english' class, or vice versa. The switch text would then also have two instances, an English and a Swedish one, and it too would change when clicked.

However, I can't get the JavaScript to work here! I'm not exactly a JavaScript wizard (more like low-level amateur), so most of what I've been trying to do is probably wrong or incorrect.

I've found a way to do the switch once, but it has two very big disadvantages:

1. When it switches, it also for some reason cancels part of my CSS (only part of it, and only for parts of the document), which makes no sense whatsoever, as far as I can see
2. It will only switch once, so even if I click the 'opposite' link on the CSS-challenged page that comes out of it, it does nothing.


In the HTML, I have the following (basic) structure:

Code:
<div class="menu svenska">blablabla</div>

<div class="menu english">blablabla</div>

(And so on for the rest of the text)

In the script, I then have the following:

Code:
function svenska() {
	var x = document.getElementsByTagName('div');
	for (i=0;i<x.length;i++)
	  if (x[i].className="english") var engdiv = x[i];
	  else if (x[i].className="svenska") var svediv = x[i];
	  else return;

	engdiv.style.display = 'none';
	svediv.style.display = 'block';
}

function english() {
	var x = document.getElementsByTagName('div');
	for (i=0;i<x.length;i++)
	  if (x[i].className="english") var engdiv = x[i];
	  else if (x[i].className="svenska") var svediv = x[i];
	  else return;

	svediv.style.display = 'none';
	engdiv.style.display = 'block';
}

So... some of all you wizards that I have come to rely on so heavily for anything JavaScript-related that I do - am I doing something very obviously wrong, or does it just not work the way I wanted it to?

Edit: Wow, that was longer than I thought it would be... anyway, forgot a link for what I've got so far (which is most of what will be there in the end): Link (I know the logo's not there, it's not done yet).

Double-edit: Yeah, I know - I completely stole effgee's design! Sorry, effgee, I couldn't help it, it just looked so good. I'm a total plagiarizer

[Chris O'Brien]

Whilst you could run down all the divs like that (although not how you've done it, I'll get on to that in a bit), you'd be just as well including different style sheets and switching them...

Code:
//in yer HTML
<link rel="StyleSheet" href="english.css" type="text/css" />

//JS style switcher:
function switchStyle(which) {
    document.getElementsByTagName("link")[0].setAttribute("href", which+".css");
}

Then just use switchStyle('english') or switchStyle('svenska') or roll out a function which just toggles between the two...

The only differences in the two style sheets would be the display properties for the divs. You may want to include a main style sheet and then just have these rules in the two stylesheets you'll toggle between.

Now, another way is just to actually manipulate the style sheet with JavaScript, if the above seems like a rather inelegant solution.

Oh yeah, and about your JavaScript. if(x[i].className="svenska") is assigning the class to the div rather than being a condition (use == for that) so you'll be losing the menu class applied to it aswell. To match what you have use something like

Code:
if (/\bsvenska\b/.exec(x[i].className))

as that'll match the string 'svenska' in the className rather than looking for a whole className of svenska (which wouldn't match in your case).

[Oisín]

Okay... some of that was quite over my head, but I managed to get at least something out of it

I hadn't thought about switching the style sheets at all, but it's a good idea, so I wanted to do it. I just didn't know how. Hurray for ALA, who give me a ready-to-use package (from this article), a .js file that I can just use as my own script file and bada-bing, the style switching works.

Now I just have one little problem left.

For some reason, the 'svenska' style sheet won't work properly (I put the declarations for 'english' and 'svenska' in two style sheets of their own, but kept everything else in the main style sheet). The 'english' one works fine, it hides the Swedish text and displays the English, but the 'svenska' one doesn't. It shows both the Swedish and the English text, and I can't figure out why! They're exactly the same, apart from the names 'english' and 'svenska' being switched, but it doesn't work!!!

If anyone has a keener eye than me, and can figure out where I've typed in something wrong or whatever I've done for it to act like it's acting, I would love to know! Site, main CSS, English CSS, Swedish CSS, and JavaScript file (I didn't touch this one, it's exactly as it was from ALA).

And thanks (as usual) for pointing me in the right direction, BB

Edit: Okay, it seems the only way I can get it to hide the English text is by putting a display: none; for .english in the main style sheet, and declaring the English style sheet as the alternate one, instead of the Swedish one. Doing it the other way around won't hide the English text...

[Chris O'Brien]

Edit:
OK, just seen the links in your post. Did you edit that as I was typing?

Edit again:

In your HTML you're linking both stylesheets. Don't. Only link the one you want to start off with (in your case, English, it seems). As it is, you still always have styles-english.css linked, hence it's overriding the display: none in styles-svenska.css.

To clarify: just change what style sheet is being used each time, by switching the href of the <link>. So the browser only sees one stylesheet or the other, not both as is the case here. Simple mistake, mate

p.s. stop typing/editing so fast

[Oisín]

Originally posted by Black Book:
You're declaring both in both stylesheets yeah? Like:

Yup. That and nothing else. (I added links to the .css files in my previous post).

[Oisín]

Originally posted by Black Book:
In your HTML you're linking both stylesheets. Don't. Only link the one you want to start off with (in your case, English, it seems). As it is, you still always have styles-english.css linked, hence it's overriding the display: none in styles-svenska.css.

To clarify: just change what style sheet is being used each time, by switching the href of the <link>. So the browser only sees one stylesheet or the other, not both as is the case here. Simple mistake, mate

Okay, then I just misunderstood the article - I thought I was supposed to name all the style sheets, just declare the ones I didn't want to use initially as 'alternate'.

Actually, I got it to work. Kind of. It's sort of strange, but also kind of funny:

If I declare 'svenska' as the preferred sheet and 'english' as the alternate, and declare in the main style sheet that .english should be set to display: none;, then it works perfectly in Opera, apart from the fact that the page will be in Swedish the first time you visit it, and you have to choose English to get it in English.

However, while it also works perfectly in IE, for some completely odd and illogical reason, it's the other way around! In other words, if I declare English as alternate and display: none; all instances of .english in the main style sheet, IE actually shows only the English and hides the Swedish. But it still works perfectly; when you click on 'Bytta til svenska', it changes to Swedish just as it's supposed to.

So basically, now it works in both browsers, just completely opposite of each other.

p.s. stop typing/editing so fast

I'll try to type slower, but I always end up writing so much, so I'd be super-slow then

Edit (again): And only declaring one style sheet doesn't make a difference. Even if I only load the Swedish style sheet (and the main of course) without ever mentioning the English one, it still shows both the English and Swedish text. Only way I can get rid of it is by display: none;'ing the English text in the main style sheet.

[Chris O'Brien]

Originally posted by Ois�n:
Okay, then I just misunderstood the article - I thought I was supposed to name all the style sheets, just declare the ones I didn't want to use initially as 'alternate'.

Actually, you understood the article fine, it's just that I never bothered to read it, and didn't notice the 'alternate'. My mistake.

Originally posted by Ois�n:
Edit (again): And only declaring one style sheet doesn't make a difference. Even if I only load the Swedish style sheet (and the main of course) without ever mentioning the English one, it still shows both the English and Swedish text. Only way I can get rid of it is by display: none;'ing the English text in the main style sheet.

OK. Looking at the script, it seems that you've set everything up correctly. The only thing I can think of is stepping though it to make sure it's doing the right things with a bunch of alerts() - although, from a quick glance it appears to be all in order. Maybe it's something to do with the disabled attribute not actually working as intended? I dunno.

[Oisín]

Now the plot is seriously thickening!

Apparently, changing the background colour of the header in the table (which is actually a TD, not a TH) to black, and then changing the text colour to white did the trick.

That is to say, now Opera and IE do it exactly the same way - but technically speaking, it's the wrong way, since they now both start with English (which is what I wanted all along).

But what on earth does the background colour of a table have to do with that?!?

[Chris O'Brien]

I don't know. However, ripping the stuff from you're site and testing it locally worked just fine. Works on ym server too: http://www.vanillasoap.com/ohbe/oisin/kelly.html

[Oisín]

Okay, now the initial stuff is all working, I am of course stuck on the next point!

For the same site, I need to make an 'admin' section too, where my dad can add new auctions via an HTML form and then click on a 'submit' button that will add a new row with the values he typed in, to the MySQL database (and thus be displayed in the table on the front page, which pulls the data from the database and outputs it in rows).

So, I come up with this, and I got it to work so that it adds extra rows to my database. However, there are two slight problems:

1. It adds a new, empty, row to the database every time the page is loaded, even without any clicking on the link that's supposed to execute the code.

2. Even if I fill in all the fields and then click the submit link, it still only adds an empty row to the database instead of exporting the values I typed in.

Here's the relevant code (simplified and snipped a little for simplicity):

[php]<form method="GET">
<table><tr><td>Referencenummer</td><td><input type="text" length="9" name="refnr"></td><td></td></tr>

<tr><td>Betalt?</td><td><input type="radio" value="Ja" name="betalt"> Ja <input type="radio" value="Nej" name="betalt"> Nej <input type="radio" value="Afventer auktioner" name="betalt"> Afventer auktioner</td><td></td></tr>

<tr><td>Kolli ID</td><td><input type="text" length="13" name="kolli"></td><td><div id="submit"><a href="<?php

mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
$add = "INSERT INTO $table values('', '$_GET['refnr']', '$_GET['betalt']', '$_GET['pakket']', '$_GET['sendt']', '$_GET['via']', '$_GET['kolli']')";
mysql_query($add) or die(mysql_error());

?>">Tilf�j til databasen</a></div></td></tr></table>[/php]

(The variables are specified earlier on, of course)

Another little thing - I don't know what to do with the action attribute for the form tag. Technically speaking, since I'm using a simple link to add the rows t the database, there isn't really an action associated with the form, but it's a required attribute, so leaving it out with prevent the page from validating. Any ideas?

[Chris O'Brien]

Well it would do

The PHP you have there would be parsed and executed straight away. You'd only use PHP inline like that if you were echoing something out to be the href of the link.

Basically, at the moment as the PHP engine gets to that point, it does exactly what you're telling it to do - insert stuff into your MySQL table. It's putting blank values in because the $_GET variables aren't set (i.e. they're blank).

What you should do is take the PHP out of there and chuck it at the top of the page (it actually doesn't matter where it goes, but for legibility...) and make sure things are only inserted when there's values by using isset($_GET['var']).

You're also using the form wrong. If you want to use a link and GET then I'd suggest making a javascript function to get the values of the bits you want and populate the url to go to. It's either that or setting the action attribute of the form to be the current page, and using a proper submit (<input type="submit" />).

Hope that helps a bit. I'm incredibly hungover, so apologies if I've just spouted out a load of drivel.

[Oisín]

Not at all, I gotcha loud and clear. And I got it to work too. Sort of.

But it's still not doing any actual value-adding to the database. It doesn't add a new empty row every time you enter the page now, but when you fill in all the fields and click submit, the row that it adds in the database is still an empty one. How on earth do I get it to actually take the data I've typed in and use it?

As it is now, the values that it gets from all the various $_GET['something']s are all empty strings. If I purposely add some kind of error in the script right there, it says that there's a syntax error in my script "near ... INSERT INTO $table values('', '', '', '', '', '', '')", so it's got nothing to insert into the database... why?!?

However, after I click submit, when it reloads the page, it reloads it as a query string page (or whatever they're called), ie. as index.php?refnr=7346237&betalt=Ja[etc.], which means that if I reload the page again after having submitted once, it adds another empty row to my poor database. Is there some simple way of avoiding this?

[Chris O'Brien]

The simple way of avoiding it is to not use GET but POST instead. The clue's in the name - you're POSTing data to the server rather than retrieving (or GETting it). Have an intermediary PHP page that the form posts to and then relocates back to the page after it's handled the submission.

If you want a hand knocking it up, I'm happy to help - I've finally got some spare time over the next couple of days

Edit:
Oooh. My 666th post. Freaky.

[Oisín]

Originally posted by Black Book:
The simple way of avoiding it is to not use GET but POST instead. The clue's in the name - you're POSTing data to the server rather than retrieving (or GETting it). Have an intermediary PHP page that the form posts to and then relocates back to the page after it's handled the submission.

If you want a hand knocking it up, I'm happy to help - I've finally got some spare time over the next couple of days

You're simply too good to me!

I tried funnying around a little with it, but still can't make it work... Changing GET to POST, both in the form and in the PHP that uses the values made no difference, still getting empty rows.

What would have to be in the intermediary PHP page? Would it just be the script itself (the one that does the actual uploading) and a relocating link (or whatever you call one of those things that relocate automatically)? Or should there be something else?

I humbly accept any helping hand you've got

Edit:
Oooh. My 666th post. Freaky.

You devil you