click Event cause 'refresh' with RB (Solved)

new BookmarkLockedFalling
Core
Junior Member
**

Core Avatar

Posts: 54

Post by Core on Jul 12, 2009 14:44:54 GMT -5

Well I've been working on a new demo for TableSkirt but at the moment I'm stalled on an interesting issue.

For reasons unbeknown to me, Dynamic changes with javascript 'onclick' cause a 'screen refresh' with RunBasic. Apply the same code to a basic HTML page and things work fine. ???

This came about because I was building a 'miniEditor' via the Yahoo YUI library 'Panel' control for the demo.

Below are two version of the test code I am using.

Code box 1 is typical HTML this can be copy/pasted into you fav. editor, mine is Aptana studio. Save the file with a .html extension and open it in your browser. It works fine.

Code box 2 is the same code modified to run with RB. Copy/paste into RB editor and view it 'Full Screen'. Publish makes no difference.

The RB version causes a 'screen refresh' with the JS 'onclick' event.



CODE BOX 1

<html>
	<head>
		
		<title>Untitled Document</title>
 
	</head>

	<body>

<script type = 'text/javascript'>
 function clicker()
 {
 document.getElementById('panel').innerHTML = 'Show Panel was clicked';
 }
 function clicker2()
 {
 	document.getElementById('panel').innerHTML = 'Hide Panel was clicked';
 }
</script>

<div id = 'container'>
 <button id = 'show1'>Show Panel</button>
 <button id = 'hide1'>Hide Panel</button>
</div>
<div id = 'panel'>
 <p>This text SHOULD change when a button is clicked if you see this line again after pressing the buttons the screen was refreshed</p>
</div>

<script type = 'text/javascript'>
	var target = document.getElementById('show1');
 		target.onclick = clicker;
	var target2 = document.getElementById('hide1');
 		target2.onclick = clicker2;
</script>
	</body>
</html>



CODE BOX 2

html "</div>

<script type = 'text/javascript'>
 function clicker()
 {
 document.getElementById('panel').innerHTML = 'Show Panel was clicked';
 }
 function clicker2()
 {
 	document.getElementById('panel').innerHTML = 'Hide Panel was clicked';
 }
</script>

<div id = 'container'>
 <button id = 'show1'>Show Panel</button>
 <button id = 'hide1'>Hide Panel</button>
</div>
<div id = 'panel'>
 <p>This text SHOULD change when a button is clicked if you see this line again after pressing the buttons the screen was refreshed</p>
</div>

<script type = 'text/javascript'>
	var target = document.getElementById('show1');
 		target.onclick = clicker;
	var target2 = document.getElementById('hide1');
 		target2.onclick = clicker2;
</script>"



Any ideas????

Last Edit: Jul 19, 2009 13:05:22 GMT -5 by Core
Core
Junior Member
**

Core Avatar

Posts: 54

Post by Core on Jul 14, 2009 22:45:38 GMT -5

Well after some investigating this is what I uncovered.
The 'onClick' or 'click' event appears to Fail in the following browsers when I run the above script.
  • FireFox
  • Google Chrome
  • Opera

The one browser that passes is .....IE ??? The above RB code runs fine in IE browser but fails in others for awhile I wondered if it was just my system but after checking other browsers I believe this script fails on all non-IE browsers.


Ironically all 3 Failed browsers follow the W3C Event model which passes the event to the Event Handler function as an argument.

Example:
function clicker(e) {

// 'e' accesses the event

}

IE on the other hand has its own way of handling events.

Example:
function clicker() {

// window.event accesses the event

}



Here is the above code, in my last post, modified with an alert that shows the Type of event passed by the browser. Try it with IE and a !IE browser.

RB code:

html "</div>

<script type = 'text/javascript'>
 function clicker(e)
 {
 if (!e)
 {
 var e = window.event;
 alert('Event type is IE Event model.... ' + e.type)
 }
 else
 {
 alert('Event type is W3C Event model.... ' + e.type)
 }
 document.getElementById('panel').innerHTML = 'Show Panel was clicked';
 }
</script>

<div id = 'container'>
 <button id = 'show1'>Show Panel</button>
</div>
<div id = 'panel'>
 <p>This text SHOULD change when a button is clicked if you see this line again after pressing the buttons the screen was refreshed</p>
</div>

<script type = 'text/javascript'>
	var target = document.getElementById('show1');
 		target.onclick = clicker;
</script>"


RunBasic adds JavaScript to your pages. Sections of this code can be seen with FireBug.
Exactly what all this JS code does I am not all completely sure as it is fairly complex.

I've tracked down a Function in this code that appears to be what is causing the issue. Here is a snippet of the JS code.


function liveEventTrackerUri(uri)
{
var event = window.event;
var target = (event.target) ? event.target : event.srcElement;
uri = addParameter(uri, "timestamp", (new Date()).getTime().toString());
uri = addParameter(uri, "eventType", event.type);
uri = addParameter(uri, "targetValue", target.value);
uri = addParameter(uri, "targetType", target.type);
uri = addParameter(uri, "tagName", target.tagName);
uri = addParameter(uri, "id", target.id);
// Cursor position ?
var request = newHttpRequest();
if (!request) return false;
request.onreadystatechange = processEventTracker;
// Resolve xml entity before issuing the request
var regex = new RegExp("&", "g");
uri = uri.replace(regex,"&");
request.open("GET", uri);
request.send(null);
return false;


Note the first line in the function:
var event = window.event; **Strict IE event handling all others should fail.

If you load the RB code with IE 'Var event' is given access to the Event.
If the script is run with non IE 'Var event' variable is 'undefined' or null.
I wonder if this line should have been written as:
var event = (e) || window.event;

I don't know ??? I'm still picking apart the RB JS code.
Anyone else getting this failure?

Respectfully,

Core
Core
Junior Member
**

Core Avatar

Posts: 54

Post by Core on Jul 14, 2009 23:44:19 GMT -5

One more note:

You can capture both W3C and IE events with a variable. In the original (Non RB code box 1) paste this new function for 'clicker'


 function clicker(e)
 {
 	var click = (e) || window.event
 	if (click) {
		document.getElementById('panel').innerHTML = 'Show Panel was clicked';
		alert('You will see this in IE or W3C compliant browsers \n Event type = ' + click.type)
	}
	
 }


The above modified JavaScript function will capture both W3C and IE events.

var click = (e) || window.event // this captures the event.

I believe the RunBasic added JavaScript is flawed.

Respectfully,

Core
StefanPendl
Global Moderator
*****

StefanPendl Avatar

Run for BASIC ...
Posts: 945

Post by StefanPendl on Jul 15, 2009 2:21:28 GMT -5

Core Avatar

I believe the RunBasic added JavaScript is flawed.

The problem is that IE is flawed, it does not follow the standards, introduces unexpected behavior and includes his own standards.

It is hard to create an active page, which supports any browser, because of IE acting differently than all the other browsers.

Sure the JS added by RB needs to be enhanced to support the standards.
[b]Stefan[/b] - [a href=http://stefanpendl.runbasichosting.com/]Homepage[/a][br][br][b]Please give credit if you use code I post, no need to ask for permission.[/b][br][br]Run BASIC 1.01, Fire-/Waterfox (IE11, Edge), Windows 10 Professional x64, Intel Core i7-4710MQ 2.5GHz, 16GB RAM
Core
Junior Member
**

Core Avatar

Posts: 54

Post by Core on Jul 19, 2009 13:04:47 GMT -5

IE is flawed .......and so am I. :-/

The solution, after many hours/days, was simple.
The 'tag' needs the type='button' Attribute.

So it should be written as:

<button id = 'show1' type='button'>Show Panel</button>

Apparently it defaults to a 'Submit' method if 'button' is not implied.

Well thats solved.
The final RB code:


html "</div>

<script type = 'text/javascript'>
 function clicker()
 {
 document.getElementById('panel').innerHTML = 'Show Panel was clicked';
 }
 function clicker2()
 {
 	document.getElementById('panel').innerHTML = 'Hide Panel was clicked';
 }
</script>

<div id = 'container'>
 <button id = 'show1' type='button'>Show Panel</button>
 <button id = 'hide1' type='button'>Hide Panel</button>
</div>
<div id = 'panel'>
 <p>This text SHOULD change when a button is clicked if you see this line again after pressing the buttons the screen was refreshed</p>
</div>

<script type = 'text/javascript'>
	var target = document.getElementById('show1');
 		target.onclick = clicker;
	var target2 = document.getElementById('hide1');
 		target2.onclick = clicker2;
</script>"


Respectfully,

Core
Last Edit: Jul 19, 2009 13:08:04 GMT -5 by Core
jerry
Junior Member
**

jerry Avatar

Posts: 86Male

An old guy that cant wait to retire!