Question

I am trying to implement the javascript .cycle function through some dynamic (runtime) images. Here is the java script I have:

<style type="text/css">
    .slideshow
    {
        margin: auto;
    }
    .slideshow img
    {
        padding-left: 20px;
        padding-top: 2px;
        background-color: #fff;
        display: block;
    }
</style>

<script type="text/javascript">

$(document).ready(function () {
    // trigger an ajax request to the controller action every 5s
    // and inject the returned HTML fragment into a div with id="result"

    window.setInterval(function () {
        $("#GridDatabaseMng").load("/DataBaseMng/Status");
    }, 5000);
});

    j$ = jQuery.noConflict();
    j$(function ($) {
        $('.slideshow').cycle({
            fx: 'fade',
            speed: 300,
            timeout: 100,
            pause: 1,
        });
    });

</script>

and here is the razor code I will use to populate my .slideshow div tag with a variable number of images…

<td>
    <div class="slideshow" ondblclick="window.location.href='/Frame/index?id=@signData.SignDataId'" 
    style="height:160px;padding:2px;border:2px solid red; ">
    <!--
        <img alt="" src="@Url.Content("~/Content/img/image1.bmp")" />
        <img alt="" src="@Url.Content("~/Content/img/image2.bmp")" />
        <img alt="" src="@Url.Content("~/Content/img/image3.bmp")" />
       -->
        @if (signData.Images != null)
        {
            foreach (Object image in signData.Images)
            {
                if (i == 0)
                {                    
                    <img  alt=""   src="@Url.Content(image.ToString())" height="50px" width="50px"
                }
                else
                {                      
                    <img  alt="" src="@Url.Content(image.ToString())" height="50px" width="50px" />                           
                }
                i = i + 1;
            }                   
        }
    </div>
</td>

This is some legacy code which “was” working apparently, but I’m not sure what the purpose of the if statement above is as it seems to do exactly the same – I am by no means (clearly) an expert on java or html etc…

What happens is that when I view the page (let’s say I have 3 images in signData.Images) I get three images all showing at once which to me makes sense. I have debugged the javascrip and it is being called. If I uncomment the hardcoded image tags above (and remove my razor code), the cycle works fine until my setInterval() kicks in, in which case it the cycle stops and the three images are shown all together (like how my razor code shows).

This .cshtml page is a partial view which is returned by the controller via the setInterval() function. So I’m not sure if it’s the setInterval() command which is causing it to stop or the fact that page is (I think( being refreshed/reloaded).

So I guess my two main questions are:
1 – How can I keep my cycle going with the setInterval() function?
2 – How can I make my razor code work to show a dynamic or variable list?

Hopefully I have provided enough information here. I am using the “cylce-js/jquery.cycle.lite.min.js” script file.

Just to follow up on firebug suggestion, here is a view of what’s being generated:

<td>
<div class="slideshow" style="height:160px;padding:2px;border:2px solid red; " ondblclick="window.location.href='/Frame/index?id=2'">
<img width="50px" height="50px" src="/Content/Frames/2_1_11_11.bmp" alt="">
<img width="50px" height="50px" src="/Content/Frames/2_2_12_12.bmp" alt="">
<img width="50px" height="50px" src="/Content/Frames/2_3_13_13.bmp" alt="">
</div>
</td>

However, I’ve just realised that this block will be repeated n times (it is contained in a table). So each row will have the equivalent of this (even though the src values will be different). Maybe the class name being repeated is causing an issue? However, not sure if the j$ = jQuery.noConflict(); might have something to do with that???

I will see if i can delve a bit deeper into why the cycle doesn’t appear to be working at all, but the above html to me looks correct?

EDIT 2

Ok. After some more experimentation, if I change my setInterval() function to:

$(document).ready(function () {
    // trigger an ajax request to the controller action every 5s
    // and inject the returned HTML fragment into a div with id="result"

    window.setInterval(function () {
        $.post('@Url.Content("~/DataBaseMng/Status")', function (data) { $("#GridDatabaseMng").html(data); });
    }, 5000);
});

it does exactly the same thing. That is, stop cycling through and displays all tags as appropriate in one go in the slideshow element. Not sure if that means anything, but it seems as soon as I replace the HTML of the owning div tag, it stops the cycle. The main view containing the partial view is:

    <div class="t-widget t-grid" id="GridDatabaseMng" style="width:100%;">
        @Html.Partial("SignDetails", Model) 
</div>

so maybe there’s something I can do in the “success” of the Post function above to restart the cycle function?

EDIT 2

Ok. Kinda have it going. I changed my script to be:

$("#GridDatabaseMng").load('@Url.Content("~/DatabaseMng/Status")', function () { DoCycle(); });

function DoCycle() {
    j$(function ($) {
        $('#slideShowId').cycle({
                timeout: 100,
                speed: 500
            });
        });
    });
}

and this works perfectly well when I have only a single row in my table (which the slideShowId is a column in). This makes sense I guess because I end up with multiple Ids of slideShowId.

Can anyone tell me how I can create unique Ids (or classnames I guess) in this instance?

The tag in question is what is above. (div id=”slideShowId” class=”slideshow”…)

Thanks

Answer 1

OK. I have got it going – I think….

This is what I have ended up…

<script type="text/javascript">

    $(document).ready(function () {
        // trigger an ajax request to the controller action every 5s
        // and inject the returned HTML fragment into a div with id="result"

        RefreshStatus();

        window.setInterval(function () {
            RefreshStatus();
        }, 5000);
    });

    function RefreshStatus() {
        $("#GridDatabaseMng").load('@Url.Content("~/DatabaseMng/Status")', function () { DoCycle(); });
    }

    function DoCycle() {
        j$(function ($) {
            $('.slideshow').each(function () {
                $(this).cycle({
                    timeout: 100,
                    speed: 500
                });
            });
        });
    }

</script>

and seems to work ok – so far…. Thanks webtrifusion for your assistance. You at least gave me areas to investigate for.

Cheers