Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

HTML DOM structure gets "messed" up after JS function call?

Posted on 2016-09-16
9
35 Views
Last Modified: 2016-09-21
I have back-end engine creating html, resulting in a webpage with frames. So far everything works fine.

A recent addition (javascript function) that changes the background cell of a table in the same frame (called "output", which is the big part of the screen where everything is sent to), works fine, ie does the job BUT after the function call, any click on links from the 'top' frame opens a new tab, instead of loading the link content to the 'output' frame, as it does normally when the new function is not called.

The function that breaks things is: colorTableStat, called with click on an image, like this:
<img src="/images/colorize.png" alt="colorize table" onclick="colorTableStat(''tab11'');colorTableStat(''tab22'');colorTableStat(''tab33'');flip=!flip;" ALIGN=right width=46 height=26/>'              

tab11, tab22, tab33 are ID's on a TD where the actual table with the rows/data is and is being colored correctly. so the coloring function works fine besides it messes up things after it has been called so the links no longer open in the 'output' frame.

the video upload does not work so here is a link to a video version showing what the problem is:
https://www.dropbox.com/s/1izle622xoz3kuz/lost_focus.mov?dl=0

Any idea what might be wrong?
color.js
color.js.pdf
0---normal.png
1---colorized.png
0
Comment
Question by:Berhan Karagoez
  • 6
  • 3
9 Comments
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41801732
My first guess would be event propagation.  To test the theory, you could adjust your JS function so that it accepts the event, and then do a stopPropagation();

Here is more on the topic: https://davidwalsh.name/javascript-events
0
 

Author Comment

by:Berhan Karagoez
ID: 41802103
I dunno, I mean I have a similar function that does the same thing with another set of tables and that one does not break the logic, why should another similar function break it?!

I will have to check and test things, will have to get back on this, but I am not happy to invent stuff to make a "bug" stop being a bug. I don't see the logic of manipulating the dom breaking the links in another frame, or making the whole site "forget" this being the 'output' frame.

Read some on the link provided, not sure how to test that one.
I am sending just the id's of the <TD>'s, those are being set on and off with colors. The code is very basic.

I don't get the things said in the link you provide zephyr_hex.
0
 

Author Comment

by:Berhan Karagoez
ID: 41802123
Again the main 'output' frame works fine before and after the call to the JS function, it is the top frame links that behave differently after calling to the colorTableStat(id) function. Which is very similar to another function colorTable(id), actually a copy of it and adjusted to the columns of this set of tables being manipulated. Those two functions are pretty similar in logic, and I don't understand why one does nothing to the link behaviour (of the top frame) while the other breaks it and forces links now opening to a new tab. it's like the main 'output' frame is somehow forgotten that it exists?!

I don't get that.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Accepted Solution

by:
Berhan Karagoez earned 0 total points
ID: 41802198
AH ok, I found out WHY it happens, so I have fixed it, and this is crazy as F**K.

ok I had :
var stars=0;name=1;pos=2;side=3;games=4;goals=5;assist=6;motm=7;dp=8;avg=9;ngames=11;ngoals=12;nassist=13;nexp=14;cgames=15;cgoals=16;cavg=17;cexp=18;

all in one single line, assuming I was declaring all those variables instead of declaring them individually.

changing it to:
                  var stars=0;
                  var name=1;
                  var pos=2;
                  var side=3;
                  var games=4;
                  var goals=5;
                  var assist=6;
                  var motm=7;
                  var dp=8;
                  var avg=9;
                  var ngames=11;
                  var ngoals=12;
                  var nassist=13;
                  var nexp=14;
                  var cgames=15;
                  var cgoals=16;
                  var cavg=17;
                  var cexp=18;

Fixes it!!!

Looks ugly but I can live with that.
Thanks.

And what I meant to do there actually was:
var stars=0,name=1,pos=2,side=3,games=4,goals=5,assist=6,motm=7,dp=8,avg=9,ngames=11,ngoals=12,nassist=13,nexp=14,cgames=15,cgoals=16,cavg=17,cexp=18;
0
 

Author Comment

by:Berhan Karagoez
ID: 41802204
Sorry but the selection of "assisted solution" and "best solution" does not work, probably buggy javascript of some kind, I can not close this question...
0
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41802252
You can flag the question for moderation attention and let them know you can't close it.  Also, since my answer was completely down the wrong path, you should just mark (or tell the Mod to mark) your solution as the answer.
1
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41802256
As a side note, I tend to suspect event propagation when odd things happen.  Event propagation can cause iterations of an event to fire, leading to crazy results.  If you're often working in JavaScript, it's important to understand the concept of events "bubbling" up the DOM.  stopPropagation prevents the event from "bubbling" up any further.
1
 

Author Comment

by:Berhan Karagoez
ID: 41802681
Thanks for your time zephyr_hex!!
0
 

Author Closing Comment

by:Berhan Karagoez
ID: 41808404
This fixes the original issue.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question