Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Click Event Handling with OWC... 1

Status
Not open for further replies.
rheilman

rheilman

Programmer
Dec 6, 2002
51
US
I have a web page published from Excel that contains a PivotChart and a PivotTable in the form of Office Web Components. I would like to capture the coordinates of a mouse click and utilize those coordinates in a method of the Chart component.

I have been successful in trapping a click on the chart using the following code...

Code: 
<head>
<script language='javascript'>
function EAC_History_19179_Chart_Click()
	{
	alert(event.clientX);
	alert(event.clientY);
	}
</script>
</head>

...and...

Code: 
<body>
<script language='javascript' for='EAC_History_19179_Chart' event=Click()>
	EAC_History_19179_Chart_Click();
</script>
</body>

...except that the references to event.clientX and event.clientY produce...

Error: Object required.

I have also had success in producing coordinates using the following code...

Code: 
<head>
<script language = 'javascript'>
function Yeehah()
	{ 
	alert ("You clicked at screen coordinates ("
		+ event.clientX + ","
		+ event.clientY + ")");
	}
</script>
</head>

...and...

Code: 
<body>
<script language='javascript'>
document.onclick = Yeehah;
</script>

...from a tutorial on events. The problem with this is that it only traps clicks on the page itself, but not on the PivotChart component.

I have been studying bubble and capture event models, but am, as of yet, unable to make this work.

Any help?

Thanks!
Ray <><

"I was going to change my shirt, but I changed my mind instead." - Winnie the Pooh
 
Sort by date Sort by votes
Perhaps if you could show us the code for putting the OWC on the page, it would be easier for us to help debug it for you?

Personally, I've no idea about OWCs... so would find it useful to learn from, as well as to help you.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan!

The code for the OWC is monstrous and ugly, but I'll try to synopsize it for you. The following code is generated automatically as a result of publishing an Excel sheet (in this case containing a PivotTable and PivotChart) as a web page...

Code: 
<!--[if !excel]>&nbsp;&nbsp;<![endif]-->
<!--The following information was generated by Microsoft Office Excel's Publish
as Web Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
<!----------------------------->

<div id="EAC_History_19179" align=center x:publishsource="Excel">

<h1 style='color:black;font-family:Arial;font-size:14.0pt;font-weight:800;
font-style:normal'>EAC vs Budget</h1>

<object id="EAC_History_19179_Chart"
 classid="CLSID:0002E556-0000-0000-C000-000000000046" width="80%" height="80%">

This part is followed by the monstrous and ugly part. In order to study that part, I copied it out to MSWord and did some replace commands to take care of escaped codes and indentions. Most of that code corresponds with the settings you choose interactively in the Excel work book. The ugly code is then followed by this...

Code: 
</object></div>

<!----------------------------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->

I am working from the owcvba11.chm file that I downloaded from MicroSoft. It give the object model and PEM documentation, such as it is.

From that I have found that there is a Click() method that applies to ChartSpace, PivotTable, and Spreadsheet objects. The name of the function for that handler is derived from the name of the object concatenated with "_Click". The OCW model also has a method named RangeFromPoint that, when given X and Y coordinates, returns the most granular object in the main object (Chart, in this case) that lies at those coordinates.

I wish to be able to examine that object and determine its datalabel to choose the appropriate related page to jump to. Upon scouring the owcvba11.chm file, I've been unable to find any PEM that will return the location of the click in the same way that the .onclick event handler does in the HTML DOM.

The handler for the Chart object appears to supercede the overall document.onclick handler. In reading about the bubble and capture models, the documentation talked about how the trapped event information could be passed from the outermost object (I assume this is the html document) down to the innermost object (the chart, in my case.) It also referred to passing from the inner object back to a default handler in the outer object.

If my understanding of this is correct, I should be able to have a "click" event handler catch the clicking on the chart, and have it "bubble up" to the document level handler.

Alternatively, I could have the document.onclick capture the clientX and clientY coordinates and pass them down to the OCW specific "_Click" handler. The trouble is that when I click on the chart object, the document.onclick handler does not trap the click.

I hope that helps explain the problem better. Aside from the learning curve problems such as this one, I'm really enjoying working with the OWC and having the ability to programatically tweak charts and pivot tables that were created in Excel.

Thanks for anything you have to offer!
Ray <><

"I was going to change my shirt, but I changed my mind instead." - Winnie the Pooh
 
Upvote 0 Downvote
Hi Dan (and anyone else)!

Further input here. The object is created from an xml string as follows...

Code: 
 <param name=XMLData
 value="&lt;!--[if gte mso 9]&gt;&lt;xml xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;&#13;&#10; xmlns:o=&quot;urn:schemas-microsoft-com:office:office&quot;&#13;&#10; xmlns:x=&quot;urn:schemas-microsoft-com:office:excel&quot;&#13;&#10; xmlns:html=&quot;[URL unfurl="true"]http://www.w3.org/TR/REC-html40&quot;&gt;&#13;&#10;[/URL] &lt;ChartSpace xmlns=&quot;urn:schemas-microsoft-com:office:excel&quot;&gt;&#13;&#10;  &lt;Palette&gt;&#13;&#10;   &lt;Entry&gt;#000000&lt;/Entry&gt;&#13;&#10;   &lt;Entry&gt;#FFFFFF&lt;/Entry&gt;&#13;&#10;...

It does produce an object that can be both read from for current information and written to for altering its current state, both from code as well as from interaction with the user of the page. Would it's dynamic XML origins explain why click on it blocks the capture of the document.onclick event?

I'm still new (a month or two) to javascript and trying to understand the nature of the beast.

Thanks!
Ray <><

"I was going to change my shirt, but I changed my mind instead." - Winnie the Pooh
 
Upvote 0 Downvote
Hi Dan!

The code is definitely cutting off. I posted only a portion of the XML string to illustrate what is generated by Excel when you publish to a web page.

When I said that the "wizarded" code was monstrous and ugly, I wasn't kidding. I pasted just the <param... statement into an MSWord document with half inch margins, and it is in excess of eight pages of unformatted and unindented, contiguous code.

Since the code between the wizard comments that I posted above is regenerated every time the page is republished, I don't think that the specific XML string is going to solve the nature of my currrent problem. It may be that I'm trying to blend two things that just don't blend.

I don't know if you really want me to post that much code in this forum. If you're interested in Office Web Components, I'd still be happy to email you the code as an attachment, along with all the resources that I've been using to get up to speed on this tool myself.

If you want to generate your own string and have access to Excel, you just build a pivot table and/or chart in Excel and save the sheet as a web page. Your resulting page will contain something that looks similar to what I partially posted, but will contain references to things that you can see in your original spreadsheet.

Here's an Office Web Components newsgroup...


...and here is that newsgroup searched for "javascript"...


As far as my current challenge goes, I was seeing if your answer in thread216-1015176 applies. So far I haven't made the connection. Also, I've looked at the Click event that is native to the Office Web Component model and have been experimenting to see if it returns any parameters like the event object from HTML.

Thanks for your responses!
Ray <><

"I was going to change my shirt, but I changed my mind instead." - Winnie the Pooh
 
Upvote 0 Downvote
Dan,

As for the newgroups mentioned above, there seem to be lots of questions posted, but less activity in the answer category than here.

I find most of my help there in searching the archives.

Hope this helps!
Ray <><

"I was going to change my shirt, but I changed my mind instead." - Winnie the Pooh
 
Upvote 0 Downvote
Reporting back after much searching. I've found the functionality to do what I need to do from within the OWC object. I'm using JavaScript, so I'll post my own answer, anyway...

Code: 
  // code to trap the SelectionChange event
 // SelectionChange occurs when the user 
// clicks on a different part of the object
<script language='javascript'
        for=MyOWCObjectHere
        event=SelectionChange()>
     pt=document.getElementById('MyOWCObjectHere');

  // I can use the Selection and SelectionType
 // properties to investigate the areas 
// being selected
     alert(pt.SelectionType);

  // I can make decisions based on
 // the properties of the object
// the user selected.
     if (pt.Selection.Name == 'NameICareAbout')
          {
          // stuff I want to do
          }
</script>

Thanks!
Ray <><

"I was going to change my shirt, but I changed my mind instead." - Winnie the Pooh
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
269
coldbohemia
coldbohemia
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
158
Daniel K
Daniel K
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
107
xwb
xwb
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
105
feherke
feherke
zydjohn
  • Locked
  • Question
How to load JavaScript files to enable DOM element click
Replies
1
Views
108
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top