Members Online
Total Online: 36 Web Spiders: 15
Guests Online: 33
Members Online: 3
Registered Members: 70180 Newest Member: RAWRFEARME744798
|
View Thread
| Author |
Firefox innerHTML resets itself (for lack of a better way to put it) |
ranma
Member
Posts: 269
Location: Behind a sphere
Joined: 27.08.05
Rank: HBH Guru |
|
I am creating a part of a website that requires people being able to create their own variables. But I ran into a snag.
Here is the portion of my code in question (explanation below):
<scblockedript>
var nextOpenVarNumber = 0;
var varFocusNumber = new Array();
function addVar()
{
if(nextOpenVarNumber==0)
{
document.getElementById("newVars").innerHTML+="<br />New custom variables:<br /><br />";
}
document.getElementById("newVars").innerHTML += "<div id=\"newVar"+nextOpenVarNumber+"Id\"><input type=\"text\" name=\"newVar"+nextOpenVarNumber+"Name\" value=\"Variable Name\" onfocus=\"javascblockedript:clearIfNewFocus("+nextOpenVarNumber+",0);\"> = <input type=\"text\" name=\"newVar"+nextOpenVarNumber+"Value\" value=\"Variable Value\" onfocus=\"javascblockedript:clearIfNewFocus("+nextOpenVarNumber+",1);\"> <a href=\"javascblockedript:removeVar("+nextOpenVarNumber+");\">[-] Remove this variable</a><br /></div>";
varFocusNumber[nextOpenVarNumber] = new Array(0,0);
nextOpenVarNumber++;
}
function removeVar(varNumber)
{
document.getElementById("newVar"+varNumber+"Id").style.display = "none";
}
function clearIfNewFocus(varNumber, varPart)
{
if(varPart==0)
{
if(varFocusNumber[varNumber][0] == 0)
{
document.getElementsByName("newVar"+varNumber+"Name")[0].value = "";
}
}
if(varPart==1)
{
if(varFocusNumber[varNumber][1]==0)
{
document.getElementsByName("newVar"+varNumber+"Value")[0].value = "";
}
}
varFocusNumber[varNumber][varPart] = 1;
}
</scblockedript>
<div id="newVars"></div><a href="javascblockedript:addVar();">[+] Add Custom variable</a>
You can copy and paste it into a webpage to check it out. The problem is as follows:
Create a few new variables and give them names and values. But after you add the values, if you click on make new variable, it resets the already-named variables to the defaults. This happens only in Firefox. In IE it works fine. I read somewhere that someone else had similar problems, but no solution was offered. Any help or suggestions?
I think the problem is in the innerHTML, because if I alert its value before I change the var name and after I do it, it remains the same, with the default values.
Wisdom spared is wisdom squared.
Edited by ranma on 16-02-10 20:33 |
|
| Author |
RE: Firefox innerHTML resets itself (for lack of a better way to put it) |
define
Member
Posts: 201
Location:
Joined: 13.12.08
Rank: Moderate
Warn Level: 1
|
|
You might want to try just directly setting (instead of appending) the initial innerHTML on var == 0 (in your add function). Also, instead of doing .innerHTML +=, try doing:
.innerHTML = .innerHTML + 'whatever'
I've had issues before with Javascblockedript and both += and ++/--. I've also had issues before with Javascblockedript not placing the variable at its current value when setting an event; that is, when it triggers an event on an element, sometimes that variable pulls its current value at the time of triggering, not at the time of assigning.
Anyways, those are initial things you can try to get it to work with the innerHTML modification approach.
The ideal approach, though, is to use DOM functions to insert the new elements. Instead of this:
.innerHTML = '<div id=\"newVar"+nextOpenVarNumber+"Id\"><input type=\"text\" name=\"newVar"+nextOpenVarNumber+"Name\" value=\"Variable Name\" onfocus=\"javasc blockedript:clearIfNewFocus("+nextOpenVarNumber+",0);\"> = <input type=\"text\" name=\"newVar"+nextOpenVarNumber+"Value\" value=\"Variable Value\" onfocus=\"javasc blockedript:clearIfNewFocus("+nextOpenVarNumber+",1);\"> <a href=\"javasc blockedript:removeVar("+nextOpenVarNumber+");\">[-] Remove this variable</a><br /></div>';
... you'd have something like this:
var newVarDiv = document.createElement('div');
var newVarName = document.createElement('input');
var newVarValue = document.createElement('input');
var newVarRemove = document.createElement('a');
newVarDiv.setAttribute('id', 'newVar'+nextOpenVarNumber+'Id');
newVarName.setAttribute('name', 'newVar'+nextOpenVarNumber+'Name');
newVarName.onfocus = function(){
clearIfNewFocus(nextOpenVarNumber,0);
};
// ... and so on, down to appending the elements with:
document.getElementById('newVars').appendChild(newVarDiv);
newVarDiv.appendChild(newVarName);
newVarDiv.appendChild(newVarValue);
newVarDiv.appendChild(newVarRemove);
It's been a while since I've used Javascblockedript DOM functions, so you'll probably need to work with that a bit.
ranma wrote:
function removeVar(varNumber) {
document.getElementById("newVar"+varNumber+"Id").style.display = "none";
}
DOM functions here, too. Instead of hiding it, remove it completely:
function removeVar(varNumber) {
var removing = document.getElementById("newVar"+varNumber+"Id");
document.getElementById('newVars').removeChild(removing);
}
Finally, your clearIfNewFocus function can be simplified a bit (I think) to read:
function clearIfNewFocus(varNumber, varPart)
{
if(varFocusNumber[varNumber][varPart] == 0) {
document.getElementsByName("newVar"+varNumber+ (varPart ? "Value" : "Name") )[0].value = "";
}
varFocusNumber[varNumber][varPart] = 1;
}
Edit: Disabled smilies.
If you need to contact me, send me a PM. I will read and/or respond in time.
Edited by define on 17-02-10 01:17 |
|
|
| Author |
RE: Firefox innerHTML resets itself (for lack of a better way to put it) |
ranma
Member
Posts: 269
Location: Behind a sphere
Joined: 27.08.05
Rank: HBH Guru |
|
Thanks for the first reply. I had already tried the first suggestion about the += as you said, but it didnt work. Not wanting to use Javascblockedript DOM too much, I was hoping for some other fix.
My temporary workaround includes storing all new variables in an array when creating a new variable, then use the innerHTML, and fixing the values later based on my array. I know it's not elegant, but it will do for now.
Meanwhile, please keep suggestions coming.
Thanks for the great and well-thought-out post! I will definitely look into Javascblockedript DOM in the future to clean up my code.
Wisdom spared is wisdom squared. |
|
|
| Author |
RE: Firefox innerHTML resets itself (for lack of a better way to put it) |
define
Member
Posts: 201
Location:
Joined: 13.12.08
Rank: Moderate
Warn Level: 1
|
|
|
ranma wrote:
Not wanting to use Javascblockedript DOM too much, I was hoping for some other fix. I will definitely look into Javascblockedript DOM in the future to clean up my code.
Absolutely. For now, it's not a pressing concern but, as you start to develop more and more complex Javascblockedript solutions, you'll often find that the quirks of manipulating the HTML directly will cause headaches cross-browser. One good example of this is the infamous innerHTML/outerHTML choice... which, now that I think about it, may be another way to attack your problem: outerHTML just includes the surrounding tag as well (<div id="newVars"></div>), so try that and just rewrite the element AND its contents.
Oh, and a good cheap way to check for IE vs. other browsers is to do this:
var ie = ( document.all ? true : false );
Only downside is that it classifies Opera as IE, but no one cares about Opera.
ranma wrote:
Thanks for the great and well-thought-out post!
No problem. :) I've dealt with stupid cross-browser Javascblockedript issues a lot, and I know how frustrating it can be searching for that answer.
ranma wrote:
My temporary workaround includes storing all new variables in an array when creating a new variable, then use the innerHTML, and fixing the values later based on my array. I know it's not elegant, but it will do for now.
Well, if you ever get the values to persist on the inputs, then this next series of comments is relevant... otherwise, it's just another bit of info:
---
Technically, since the elements exist on the page, you don't really need a variable array. Your variable array is represented in the newVars div with a series of child divs. So, you could probably access the names and values by doing this:
function getValue(num) {
var container = document.getElementById('newVars');
var thisVar = container.getElementsByTagName('div')[(num-1)];
return thisVar.getElementsByName('valueInputName').value;
}
... or, you could construct the id as in your code and getElementById() on container. Either way, you should be able to nest the scope of your getElement*() functions to go deeper into the divs.
Edit: Smilies again.
If you need to contact me, send me a PM. I will read and/or respond in time.
Edited by define on 17-02-10 01:45 |
|
|
| Author |
RE: Firefox innerHTML resets itself (for lack of a better way to put it) |
michelfalke
Member
Posts: 9
Location: Longitude l = new Longitude();
Joined: 08.01.10
Rank: HBH Guru |
|
If i were u i would start searching for some AJAX.
If i remember correct JQuery handles such things kinda nice in a few lines of code 
Check out the following link
http://api.jquery.com/bind/
Don't know if i'm 100% correct here but it seems that that can tackle ur problem
School sux hbh teaches me way more =) |
|
| Author |
RE: Firefox innerHTML resets itself (for lack of a better way to put it) |
ranma
Member
Posts: 269
Location: Behind a sphere
Joined: 27.08.05
Rank: HBH Guru |
|
|
MoshBat wrote:
Doesn't the error console report problems with Javascblockedript? Maybe see if it has anything to say.
Checked. It doesn't. It's the first place I looked. Code is clean. Apparently this was pointed to Bugzilla but Mozilla said it's not a bug. Ah well....
Thanks for the pointers!
As to jQuery, is that supported in all browsers? Sorry if it's a stupid question.
Wisdom spared is wisdom squared. |
|
|
| Author |
RE: Firefox innerHTML resets itself (for lack of a better way to put it) |
define
Member
Posts: 201
Location:
Joined: 13.12.08
Rank: Moderate
Warn Level: 1
|
|
michelfalke wrote:
1. If i were u i would start searching for some AJAX.
2. If i remember correct JQuery handles such things kinda nice in a few lines of code
3. Check out the following link
http://api.jquery.com/bind/
Don't know if i'm 100% correct here but it seems that that can tackle ur problem
1. ... No. AJAX has nothing to do with this unless he wants to store the variables outside of a single-use load of the page. AJAX is just an asynchronous way (using Javascblockedript or any Javascblockedript libraries) to make requests to a file without reloading the page.
2. Not always a few lines of code, but it certainly shortens regular Javascblockedript code and can work easier cross-browser.
3. Nah, that's the function to bind an event to an element; that's relevant to what he's doing, but not really a solution. The functions he'd probably be most interested in would either be .html() or .append().
ranma wrote:
Checked. It doesn't. It's the first place I looked. Code is clean. Apparently this was pointed to Bugzilla but Mozilla said it's not a bug. Ah well....
You should reopen the bug with your test case, then, unless they gave a suitable explanation for why this is not unexpected behavior. If they did, could you provide a link?
ranma wrote:
As to jQuery, is that supported in all browsers? Sorry if it's a stupid question.
Not a stupid question. jQuery is a library of functions written in Javascblockedript using prototype functionality. Javascblockedript is cross-browser, so jQuery is as well. You just need to include the library in a scblockedript tag.
jQuery does make writing cross-browser Javascblockedript easier. I use it almost exclusively now, whereas I used to deal with these cross-browser quirks and such. I still have to deal with a few (from the IE family, of course), but not nearly as many as with Javascblockedript.
That being said, I still use regular Javascblockedript for some things. With jQuery, you're going to see a slight overhead when selecting elements and, sometimes, it's just more efficient to write more Javascblockedript to do what jQuery is doing with more Javascblockedript than you wrote (if that makes sense). This is mainly a factor in heavier applications or with a large number of elements being selected/worked with.
So, my advice? Stick with Javascblockedript until you understand it well enough to appreciate what jQuery is doing behind the scenes to make your life easier (in most cases).
If you need to contact me, send me a PM. I will read and/or respond in time. |
|
|
|
|
|
Main:
