Jquery Dialog Box and Pulling content from a Database

Question

Good Afternoon All,

I am working on part of a site that will read data from a table in a database and display the data sequentially with a click of the previous and next buttons, in a JQuery Dialog box. I am really not that good with Javascript or Jquery for that matter and need a little guidance here.

I can get the the content on the first page of the dialog, but it pulls each id body column for the specific value. I want it to pull one instance with the given id, click next and get the next and so on.

The code is below.

Here is the script

<script type="text/javascript">
    $(function () {
        var tutorialDialog = $("#dialog").dialog({
            autoOpen: false,
            height: 400,
            width: 550,
            modal: true,
            buttons: {
                "<< Prev": function () {

                },
                "Next >>": function () {

                }
            },
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "blind",
                duration: 500
            }
        });
        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
    });    
</script>

Here is the code on my View Page

<% IQueryable<#######.#####.######.######> tutorials =  gr.GetEntriesByStream(13); %>
<div id="dialog" title="Exerclock Site Tutorials">
    <p>This is dialog box for the tutorial data.</p>
        <%foreach (var item in tutorials)
          { %>
          <%if (item.seOrder == 0)
            {%>
              <%: item.seBody %>
          <%} %>
        <%} %>
</div>
<a id="opener">Go To Tutorial</a>

Answer 1

If i understood correctly, you want to traverse the tutorials based on your Previous and Next buttons. Instead what's happening is that the entire content get displayed in the jQuery dialog in one go.

There's more than one way to do this, and I think a simple method would be to have view page generate each tutorial inside a div element with an Id that is suffixed with an index, for instance, here's what it would look like

<div id="dialog" title="Exerclock Site Tutorials">
    <p>This is dialog box for the tutorial data.</p>
        <%foreach (var item in tutorials)
          { %>
          <%if (item.seOrder == 0)
            {%>
              <div id='tutorial<%:tutorials.indexOf(item) + 1 %>'>
              <%: item.seBody %>
              </div>
          <%} %>
        <%} %>
</div>

This would generate an HTML like so

<div id='tutorial1'>tutorial1Content1</div>
<div id='tutorial2'>tutorial1Content2</div>
<div id='tutorial3'>tutorial1Content3</div>

You could then modify your prev and next functions as below

"<< Prev": function () {
    $("#tutorial" + currentTutorialIndex).hide();
    currentTutorialIndex --;
    $("#tutorial" + currentTutorialIndex).show();

 },
 "Next >>": function () {
     $("#tutorial" + currentTutorialIndex).hide();
    currentTutorialIndex ++;
    $("#tutorial" + currentTutorialIndex).show();
 }

where currentTutorialIndex is a globally/appropriately scoped variable that is accessible from within prev and next functions.

*please excuse syntax errors since this is an untested code