tags:

views:

337

answers:

1
Q: 

Using javascript instant.js library for images doesn't work with ajax

I have an asp.net-mvc site and I use the below javascript library for a photos page to put borders around all of my photos

http://www.netzgesta.de/instant/

i just changed my site to load my photos via ajax instead of reloading the whole page and although when i debug it the correct html is built up, i dont see any of the images:

<div id="status">
    <% Html.RenderPartial("AlbumGrid",Model); %>
</div>

the change i made was to take all of the links like this:

<a href='Album?Page=" + i + "&AlbumName=" + albumName_ + "'>" + i + "</a>");

and change it to this and using ajaxhelper class:

 Ajax.ActionLink(i.ToString(), "Album?Page=" + i + "&AlbumName=" + albumName_, new AjaxOptions { UpdateTargetId = "status", LoadingElementId = "updating"}));

I know it has something to do with this instant.js library because it breaks when i have this:

<img class=\"instant ishadow50\"  src=\"...">

but if i remove the class above, and just load images regularly, everything works fine (but i dont get the border effect of course). So this below works fine.

<img   src=\"...">

Has anyone tried using this library with ajax successfully?

EDIT: I have added full source below (stripping down to the minimum):

<head>
    <script type='text/javascript' src='../../Scripts/jquery-1.3.2.js'></script>
    <script type="text/javascript" src="../../Scripts/instant.js"></script>
<script type="text/javascript" src="../../Scripts/cvi_instant_lib.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>

<script type="text/javascript">
    function done() {
        alert('done');
    }
</script>

<script type="text/javascript">
<!--
        var canvascheck = document.createElement('canvas');
        if (canvascheck.getContext || (document.all && document.namespaces && !window.opera)) {
            document.writeln('<style type="text/css">');
            document.writeln('img.instant { visibility: hidden; }');
            document.writeln('<\/style>');
            }
-->
</script>
</head>

<body >
<center>

<div id="status">
    <table width="750" cellspacing="0" cellpadding="10" rules="all" border="1"      style="background-color:#EEEEEE;width:750px;border-collapse:collapse;">
<tr align="center">
<td width="187.5" valign="top">
<a id="picLinks_0" class="picLinks" href=''><img class="instant ishadow50" id='001'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-  pic001.jpg"></img></a>
<br/>

</td>
<td width="187.5" valign="top">
<a id="picLinks_1" class="picLinks" href=''><img class="instant ishadow50" id='002'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic002.jpg"&gt;&lt;/img&gt;&lt;/a&gt;
<br/>
</td>
<td width="187.5" valign="top">
<a id="picLinks_2" class="picLinks" href=''><img class="instant ishadow50" id='003'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic003.jpg"&gt;&lt;/img&gt;&lt;/a&gt;
<br/>
</td>
<td width="187.5" valign="top">
<a id="picLinks_3" class="picLinks" href=''><img class="instant ishadow50" id='004'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic004.jpg"&gt;&lt;/img&gt;&lt;/a&gt;
<br/>
</td>
</tr>
<tr align="center">
<td width="187.5" valign="top">
<a id="picLinks_4" class="picLinks" href=''><img class="instant ishadow50" id='005'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic005.jpg"&gt;&lt;/img&gt;&lt;/a&gt;

<br/>
</td>
<td width="187.5" valign="top">
<a id="picLinks_5" class="picLinks" href=''><img class="instant ishadow50" id='006'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic006.jpg"&gt;&lt;/img&gt;&lt;/a&gt;
<br/>
</td>
</tr>
</table>
</div>

<img id="updating" src="../../images/ajax-loader.gif" style="display: none;" alt="Updating ..." />

<br />
      <div id="paging">
       Page: 1 of 9&nbsp;&nbsp;&nbsp;  1 
<a href="/Photos/Album?Page=2&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">2</a>
<a href="/Photos/Album?Page=3&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">3</a>

<a href="/Photos/Album?Page=4&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">4</a>
<a href="/Photos/Album?Page=5&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">5</a>
 <a href="/Photos/Album?Page=6&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">6</a>
 <a href="/Photos/Album?Page=7&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">7</a>
 <a href="/Photos/Album?Page=8&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">8</a>
 <a href="/Photos/Album?Page=9&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">9</a>

  Next >>

    </div>
</div>        
</body>
</html>
+2  A: 

Your problem happens because instant.js works automatically when the page loads. When you load images with AJAX, the images load after the page has fully loaded and after instant have finished working.

Instead of instant.js, use cvi_instant_lib.js and after each image you load with AJAX call cvi_instant to "fix" your images. You can find instructions on instant's web site for how to do this.

Guss  2009-09-12 11:45:53
thanks . . i see this page http://visualize.theforbiddenlibido.com/odd_ftp/examples/instant-js/code-samples.htmlbut how would i add it when the ajax is complete
ooo  2009-09-12 15:44:02
You'd need to write Javascript that runs after the AJAX command complete. I'm not familiar with your AJAX framework so I can't suggest something more specific.
Guss  2009-09-12 18:00:17
ok, i am using ajaxhelper so i added an oncomplete in the ajaxoptions tags and can get a javascript callback.. in the callback i put cvi_instant.modify(document.getElementById("001"), { tilt: "left" }); but i still dont see any of the images
ooo  2009-09-13 11:08:17
Does the IMG tag has an ID "001" ? Please make sure that the ID you assign to the image is unique, otherwise getElementById() will not behave well. Can you show me an the app you are working on (or a minimal example) - I can help more if I can refer to specific code.
Guss  2009-09-13 19:01:54
i have added full source code above to review if that helps. right now i just put an alert in the "done" method to prove that its being called (which it is) but when i put in the cvi_instant . . line nothing seems to happen
ooo  2009-09-16 11:02:17
Sorry, but I don't see the code you are referring to. Except for the lots of javascript at the end with "mvc" all over the place (which I don't understand what it does), I also do not see any dynamic code there - instant should work fine on the images you have in the code.
Guss  2009-09-16 15:41:57
page 1 works fine but as i click on the paging links at the bottom it refreshes the whole table with the new set of pictures . . this is the issue where nothing comes up
ooo  2009-09-17 12:32:35
Yes, I got that - I just don't understand how its done. I don't understand how the paging links work and I don't see any function that gets called after the new page is loaded. You should have some function that the Ajax code will call after the new page has been loaded, and that function should go over all the images and attach the instant classes to them using cvi.
Guss  2009-09-17 14:45:59
ooo  2009-09-17 18:12:58
this (comment above) is the Ajax link (using ms ajaxhelper). as you can see the method "done" is called after the ajax is loaded
ooo  2009-09-17 18:13:40
I see - and I see that `done()` issues as `alert`. Is the alert being shown?
Guss  2009-09-18 12:54:41
yes . . when i just put in an alert it shows . .
ooo  2009-09-21 22:28:14
Cool, then just add a code that does `getElementsByTagName('img')` and for each image check if its id starts with `picLinks` and if it does run `cvi_instant.add(img, { <options> } );` on it. Should work nicely.
Guss  2009-09-21 23:05:11
thanks . .its working now . .
ooo  2009-09-22 04:44:10
Great! Good luck, and thanks :-)
Guss  2009-09-22 11:53:14

related questions

iPhone App Crashing - Error Question
invisible watermarks in images
C++ libraries to manipulate images
CSS: Getting image to stretch a div
Is there a way to get ms-access to display images from external files
How can I render a PNG image (as a memory stream) onto a .NET ReportViewer report surface
How can I take a byte array of a TIFF image and turn it into a System.Drawing.Image object?
Java Swing: Displaying images from within a Jar
Resize transparent images using C#
What is the "best" way to create a thumbnail using ASP.NET?
How can I measure the similarity between two images?
Images in PHP
Use QItemDelegate to show image thumbnails
What algorithm to compare two images
How do I convert images between CMYK and RGB in ColdFusion (java)?
How do i resize and convert an uploaded image to a PNG using GD
Preventing a visitor from saving an image from my site.
Click an image, get coordinates
IE6 - can't load a normal JPG
How do I convert a file path to a URL in ASP.NET
Increasing camera capture resolution in OpenCV
Efficient JPEG Image Resizing in PHP
Storing Images in DB - Yea or Nay?
Locating Text within image
Get a preview jpeg of a pdf on windows?