Hi again,
A quick update. Actually I find when I look in the source in Google
Chrome, I can see this:
<section id="focal">
<h1>Use the mousewheel to zoom on a focal point</h1>
<div class="parent">
<div class="panzoom">
<img src="/util/filestreamresponse/DHjg5sVppy">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input class="zoom-range" type="range">
<button class="reset">Reset</button>
</div>
</section>
The whole <script> tag disappears! However, if I press ctrl and F5 (so
it refreshes the page but not by sending through a zone), the script
is showing:
<section id="focal">
<h1>Use the mousewheel to zoom on a focal point</h1>
<div class="parent" style="overflow: hidden; position: relative;">
<div class="panzoom" style="-webkit-transform: matrix(0.9, 0, 0, 0.9,
0, 0); -webkit-backface-visibility: hidden; -webkit-transform-origin:
50% 50%; cursor: move;">
<img src="/util/filestreamresponse/E1hOV7ggPM">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input class="zoom-range" type="range" step="0.05" min="0.1" max="1">
<button class="reset">Reset</button>
</div>
<script
src="/assets/1.0-SNAPSHOT-DEV/ctx/layout/js/jquery.mousewheel.run.js"></script></section>
So, for some reason it appears that using zones and updating the body
is causing the script to not be sent, and therefore (perhaps also
because eval isn't called, I don't know), it is missing from the page.
Any ideas why the script gets stripped out somewhere?
Thanks,
Steve
On 22 May 2014 10:14, Stephen Nutbrown <steves...@gmail.com> wrote:
> Hi,
>
> Sorry for asking two questions in as many days but I have become stuck
> again. I've done a fair bit of searching and I think I understand the
> problem, but I don't know how to fix it.
>
> I have a "DirectoryViewer" component and a "MediaViewer" component
> which I created. The directory viewer will show a list of file names.
> It has a MediaViewer component inside it which is responsible for
> displaying the last selected file. This works fine.
>
> The DirectoryViewer uses a zone for showing the MediaViewer like this:
> <t:zone t:id="MediaViewZone" id="MediaViewZone">
> <t:MediaViewer fileToShow="fileToShow"/>
> </t:zone>
>
> When a user clicks on a filename link, the fileToShow is updated and
> the zone is then also updated:
> It looks like this:
>
> Object onActionFromFileSelection(File file) {
> this.fileToShow = file;
> return MediaViewZone.getBody(); // AJAX request, return zone's own body
> }
>
> This is fine too. It is important that the whole page does not refresh
> between selecting different files as this would be rather irritating.
>
> The MediaViewer then has 3 blocks which are delegated to a method to
> check the type of media. At the moment, this can be a text, a pdf or
> an image (more later i'm sure). If it is text, it will be pretty
> printed (It will be source code of some sort). If it is a pdf, it will
> be displayed in an object tag and if it is an image, I would like to
> use a javascript library to give zoom functionality etc.
>
> Everything is good until this point, and it's going to get worse if I
> don't understand how to fix it.
> So when the block selected is a image, the block will be changed
> depending on the media type, for an image it looks like this:
>
> <t:block id="image">
>
> <section id="focal">
> <h1>Use the mousewheel to zoom on a focal point</h1>
> <div class="parent">
> <div class="panzoom">
> <image src="${FileLink}"/>
> </div>
> </div>
>
> <div class="buttons">
> <button class="zoom-in">Zoom In</button>
> <button class="zoom-out">Zoom Out</button>
> <input type="range" class="zoom-range"></input>
> <button class="reset">Reset</button>
> </div>
> <script src="${context:layout/js/jquery.mousewheel.run.js}"></script>
> </section>
>
> </t:block>
>
> That script which is inside the block is sent to the browser, but it
> never runs. From what I understand, this is because eval() needs to be
> called. If I hit ctrl F5, the script will be loaded and evaluated, and
> other than some bugs in my javascript, it works. Looking further I
> find links like this:
> http://technify.me/user-experience/javascript/executing-javascript-in-an-ajax-response/
> which suggest eval() needs to be called.
>
> I see in the prototype documentation something about setting
> evalScripts: true, but I have no idea where I would change this in my
> application (http://api.prototypejs.org/ajax/Ajax/Updater/).
>
> So I am a bit stuck. Perhaps it is my design (sending js via ajax)
> which is bad, or perhaps there is some simple way to do it.
>
> Any help is really appreciated, and, as I am still relatively new to
> Tapestry any comments on anything I have done which I shouldn't be
> doing or am doing well, (probably in terms of nesting components like
> that) would help massively.
>
> Thanks,
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
