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?