Creating dynamic previous next buttons in jquery UI dialog

Question

I have searched high and low for this on this site and the web

Is it possible to dynamically create previous and next buttons in a jquery dialog box?

I have a list of links, and I would like to click on a link and have a dialog box open. In that dialog box would have a previous and next button that when clicked on would close the current dialog box and open the previous or next item in the list in another dialog box and so on.

Somthing like this

HTML

<ul id="dialoglist">
  <li>
    <a href="list1.html">
  </li>
  <li>
    <a href="list2.html">
  </li>
  <li>
    <a href="list3.html">
  </li>
  <li>
    <a href="list4.html">
  </li>
</ul>

jQuery

$("ul#dialoglist a").click(function(){
    var link = $(this).attr('href') + " #content";
    var box = $('<div></div>').load(link).dialog({
        buttons: {
            "prev": function() {
                 $(this).dialog('close');
                 //open previous dialog
             },
             "next": function() {
                 $(this).dialog('close');
                 //open next dialog
             }
        }
    });
    $(box).dialog('open');
    return false;
});

Thanks

Answer 1

Something like this should work:

$("ul#dialoglist a").click(function(){
    var a = $(this);
    var link = a.attr('href') + " #content";

    // move button creation here so we can dynamically build 
    // the button hash:

    var aParent = a.parent();
    var buttons = {};
    var prevLi = aParent.prev();
    var nextLi = aParent.next();

    if(prev.length > 0){
      buttons.prev = function(){
        // not sure if this is in the corret scope here - you may need to select by id
        $(this).dialog('close');
        $('a', prevLi).click();
      };
    }

    if(next.length > 0){
      buttons.next = function(){
        / not sure if this is in the corret scope here - you may need to select by id
        $(this).dialog('close');
        $('a', nextLi).click();
      };
    }

    var box = $('<div></div>').load(link).dialog({
        'buttons': buttons
    });
    $(box).dialog('open');
    return false;
});

Since you just trigger the click event on the prev/next links you shouldnt have to worry about manually openeing the dialogs.

However... why open new dialogs instead of using the dialog widgets api to set the content directly?

Answer 2

I'm kind of new to Jquery, I have a bit of experience but not much, but the solution prodigitalson provided looks great, it just seems to me that since you are getting the click event, wouldn't you need to prevent the default link click? Otherwise, it will just try to follow the href provided in the anchor, right?

Sorry to post this as an answer, but my reputation isn't enough to post a comment...

Answer 3

JS

    $(function() {  
        /* construct prev/next button */
        $(".dialog div.dialogs").each(function (i) {
            var totalSize = $(".dialog div.dialogs").size() - 1;           
            if (i != 0) {
                prev = i - 1;
                $(this).append("<div class='prev_button'><a href='#tabs' class='prev-tab mover' rel='" + prev + "'>Previous</a></div>");
            }

             if (i != totalSize) {
                next = i + 1;
                $(this).append("<div class='next_button'><a href='#tabs' class='next-tab mover' rel='" + next + "'>Next</a></div>");
            }
        });

        /* next button click */
        $('.next-tab').click(function () {
              var nextDialog= $(this).parent().parent().data("id") + 1;  
              var currentDialog = $(this).parent().parent(); currentDialog.dialog("close");
              $("#dialog"+ nextDialog).dialog();
        });

        /* previous button click */
        $('.prev-tab').click(function () {
              var prevDialog = $(this).parent().parent().data("id") - 1;  
              var currentDialog = $(this).parent().parent(); currentDialog.dialog("close");
              $("#dialog"+ prevDialog).dialog();
        });

        /* intial dialog(first) */
        $( "#dialog1" ).dialog();   
  });

HTML

<div class="dialog" style="display:none">
    <div id="dialog1" class="dialogs" data-id="1" title="dialog1">
      <p>Dialog content1</p>
    </div>
    <div id="dialog2" class="dialogs" data-id="2" title="dialog2">
      <p>Dialog content2</p>
    </div>
    <div id="dialog3" class="dialogs" data-id="3" title="dialog3">
      <p>Dialog content3</p>
    </div>
    <div id="dialog4" class="dialogs" data-id="4" title="dialog4">
      <p>Dialog content4</p>
    </div> 
</div>

PLUGGINS

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>