DOCTYPE Messing Up JavaScript

Miles LLC · July 11, 2011

Ok, I need a doctype for my template to display right, and every doctype messes up my JavaScript code. Whenever I remove the doctype, the JavaScript works, but the template looks messed up. (I'm using Joomla CMS) I've seen other people with the same issue, and they fix there script and it works, but my script seem's to be fine.

var gamercardGenerator = function()

{

window.onload = function() { public.update(); }

var public = { };

public.update = function()

{

var gamertag = document.getElementById('card_gamertag').value;

var styleTheme = document.getElementById('card_style').selectedIndex;

var cardTemplate = document.getElementById('cardTemplate').value;

var hexColor = document.getElementById('card_font_color').value;

var sizeTitle = document.getElementById('card_size_title').value;

var sizeMain = document.getElementById('card_size_main').value;

var fontType = document.getElementById('card_font_type').value;

if(gamertag == "Gamertag") {

gamertag = "example";

}

if(gamertag == "") {

gamertag = "example";

}

if(styleTheme == "") {

styleTheme = "0";

}

if(cardTemplate == "tech" && styleTheme == "0") {

styleTheme = "1";

}

if(cardTemplate == ""){

cardTemplate = "noble";

}

if(fontType == "0" || fontType == "") {

fontType == "utsaah";

}

if(cardTemplate == "noble" || cardTemplate == "unsc" || cardTemplate == "space" || cardTemplate == "bungie" || cardTemplate == "servicebar" || cardTemplate == "glass"){

document.getElementById('card_font_color').value = 'FFFFFF';

}

var cardURL = "http://card.gamercards.co/reach/int/" + styleTheme + "/" + cardTemplate + "/" + hexColor + "/" + sizeTitle + "-" + sizeMain + "/" + fontType + "/" + gamertag + ".png";

document.getElementById('card').src = cardURL;

document.getElementById('card_field').value = cardURL;

}

return public;

}();

function getSource() {

var src = document.getElementById('card_field');

src.style.background = '#808080';

src.style.border = '3px solid #3B3B3B';

src.focus();

src.select();

}

function clickclear(thisfield, defaulttext) {

if (thisfield.value == defaulttext) {

thisfield.value = "";

thisfield.style.color = '#000'

}

}

function clickrecall(thisfield, defaulttext) {

if (thisfield.value == "") {

thisfield.value = defaulttext;

thisfield.style.color = '#ccc'

}

}

.josh · July 11, 2011

what doctype are you using and how are you trying to use it?

Miles LLC · July 11, 2011

Well, I tried all six but, right now i'm using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The template i'm using automatically came with that, but when it's removed it messes up my navigation.

teynon · July 11, 2011

You need to check the actual source code of your page when you add it. Joomla could be modifying it somehow to cause an error. What is the javascript error you get?

Miles LLC · July 11, 2011

I check the source code, saved it as a webpage and troubleshooted all the code. The only way to fix the problem was to remove the DOCTYPE line.

Also, i'm not getting an actual error. It's just not excuting the update function in the Javascript code.

.josh · July 11, 2011

Well my guess is somewhere along the line joomla is altering id attribs or something, but only being executed based on doctype..if its not there, it doesnt do nothin' sort of thing. And you'd probably have to look at live dom not just viewsource or saved source.

By itself, i don't really see anything wrong with it. I'm not sure there's anything we can do more to help without seeing it in action, interacting with the rest of the stuff on the page

.josh · July 11, 2011

Also, i see a list of functions...where are you actually calling it? Like gamercardGenerator...where are you acftually calling that?

teynon · July 11, 2011

Whem I debug javascript, I toss little alert('test'); in functions. Try that and see if you get a message. If not, please paste source code

Miles LLC · July 11, 2011

@Crayon Violent

First off, i've encountered an error similar to this. It was (like you've said) IDs, but I tested all the id's they're all original. Also, i'm executing these function for every field for example:

<select id="card_style" name="card_style" class="card_style" onchange="gamercardGenerator.update()">

<option selected="selected">--Select Theme--</option>

**** SNIP ****

</select>

Here is a url to it (off of Joomla): http://www.gamercards.co/select/index.php

@teynon

This is very intresting, it seems that function isn't even getting executed..... But the other two functions are getting executed.

Miles LLC · July 11, 2011

Joomla Source: http://www.gamercards.co/form/source.txt

teynon · July 11, 2011

Don't quote me, but I think doctypes disable javascript functions not listed in the header. Like I said, don't quote me, but that might be part of your issue.

Miles LLC · July 11, 2011

I don't think so, because my other functions in that script work, and i've never had this happen before.

I'm doing some testing right now, tell me f you have any other ideas.

teynon · July 11, 2011

I'm on my phone, so its a little hard to tell, but some things you could try... rename the function. Test calling the function from a different location.

.josh · July 11, 2011

Hello Miles,

The first link you provided does not have the joomla stuff. Nor did you explain how to interact with the page and what it's supposed to be doing. Also FYI I did see in the source of this link the following:

Warning: include(./form/db.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 43 

 

Warning: include() [<a href='function.include'>function.include</a>]: Failed opening './form/db.php' for inclusion (include_path='.:/usr/local/lib/php-5.2.17/lib/php') in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 43 

 

Warning: mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 44 

 

Warning: mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: A link to the server could not be established in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 44 

 

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 46

Not sure that's really relevant here, though it probably adversely affects being able to test the page... but regardless, page still isn't all that helpful to QA w/out the joomla stuff on it.

Also, you said it's not spitting out any js errors...what are you looking at to see if there are js errors? I see the following error:

Error: document.getElementById("card_template") is null

Source File: http://www.gamercards.co/form/scripts.js

Line: 10

You are attempting to look for an element with an id attribute of 'card_template' here:

var cardTemplate = document.getElementById('card_template').value;

However, when I look at the source of the page, I see nothing with that id. What I do see is the following:

<select name="card_template" class="card_template" onchange="gamercardGenerator.update()">

You need to either add an id attrib there or target it a different way.

I tried to upload the code from your 2nd link and test it, but there were too many errors to wade through to bother. Too much stuff on the page dependent on other stuff on your site that isn't being loaded for whatever reason. Maybe required stuff output server-side, relative links, etc... but I did happen to see the same error listed above.

I'm afraid that's about all I can really do unless you can provide a link to a live page on your site, with your code and the joomla stuff on it.

Miles LLC · July 12, 2011

Hello Miles,

The first link you provided does not have the joomla stuff. Nor did you explain how to interact with the page and what it's supposed to be doing. Also FYI I did see in the source of this link the following:

Warning: include(./form/db.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 43 

 

Warning: include() [<a href='function.include'>function.include</a>]: Failed opening './form/db.php' for inclusion (include_path='.:/usr/local/lib/php-5.2.17/lib/php') in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 43 

 

Warning: mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 44 

 

Warning: mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: A link to the server could not be established in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 44 

 

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /hermes/bosweb/web131/b1318/ipw.gamercardsco/public_html/select/index.php on line 46 

Not sure that's really relevant here, though it probably adversely affects being able to test the page... but regardless, page still isn't all that helpful to QA w/out the joomla stuff on it.

Also, you said it's not spitting out any js errors...what are you looking at to see if there are js errors? I see the following error:

Error: document.getElementById("card_template") is null

Source File: http://www.gamercards.co/form/scripts.js

Line: 10

You are attempting to look for an element with an id attribute of 'card_template' here:

var cardTemplate = document.getElementById('card_template').value;

However, when I look at the source of the page, I see nothing with that id. What I do see is the following:
<select name="card_template" class="card_template" onchange="gamercardGenerator.update()">
You need to either add an id attrib there or target it a different way.

I tried to upload the code from your 2nd link and test it, but there were too many errors to wade through to bother. Too much stuff on the page dependent on other stuff on your site that isn't being loaded for whatever reason. Maybe required stuff output server-side, relative links, etc... but I did happen to see the same error listed above.

I'm afraid that's about all I can really do unless you can provide a link to a live page on your site, with your code and the joomla stuff on it.

MAN! I LOVE YOU!!!!! You've fixed it. You got to love those basic errors that mess everything up.

I would love to donate to you, but I am 16, and i'm poor.

Also, if I may ask, how were you getting those errors being reported and I wasn't? Is there a something I have to enable for those errors?

KevinM1 · July 12, 2011

Also, if I may ask, how were you getting those errors being reported and I wasn't? Is there a something I have to enable for those errors?

He's likely using the Firebug extension for Firefox. It's invaluable when you're trying to figure out why your JS isn't working.

Miles LLC · July 12, 2011

Thanks, i'll have to get that.

.josh · July 12, 2011

Yes, the firebug and also Web Developer addons are your two best friends, especially with client-side web development.

Sign In

DOCTYPE Messing Up JavaScript

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information