How to put buttons in a html page in a jQuery dialog

Question

eHello everyone,the following is my code to display a jquery dialog window with a closing button "OK":

<script type="text/javascript">  
$(function(){
    $("#dialog").dialog({
        autoOpen:false,
        bgiframe:true,
        buttons: { "OK": function() { $(this).dialog("close"); } }, 
        width:500, 
        height: 350, 
        modal: true,   
        show: 'slide', 
        hide:'slide', 
        title:"Similar Trends Detected in 2nd DataSet"
    });

    $("#userid").focus();
});

function showForm(matches){
    $("#dialog").html(matches).dialog("open");
}

Currently it runs by supplying a string variable "matches",then the content of the variable gets displayed on the dialog frame. Now me and my teammate want to extend this dialog a little,we want to attach a button to every line inside the html content("matches" variable),please note that we don't want buttons in the dialog(like another "OK" button),but we want buttons "inside" the frame (the actual html content).

So I would like some help here,how could I modify my "matches" variable,to have buttons also shown inside the dialog. Thanks.

Answer 1

what do you mean by every line? can you post a sample value for the matches variable? why not just include the buttons in the matches string value?

anyway, you can also provide a callback function to the dialog widget's 'open' event.

$("#dialog").dialog({
    autoOpen:false,
    bgiframe:true,
    buttons: { 
        "OK": function() { 
            $(this).dialog("close"); 
        }
    }, 
    width:500, 
    height: 350, 
    modal: true,   
    show: 'slide',
    hide:'slide',
    title:"Similar Trends Detected in 2nd DataSet",
    open: function() {
        var targetElements = 'br';
        $(this).find(targetElements).after('<button>click me</button>');
    }
});

after every br tag in the content, a button will be appended after it... every time the dialog is shown, the open callback will be triggered.

Answer 2

EDIT: Updated based on comments from OP

function showForm(matches){
      // Of course, you'll need to modify with your own button.
      // I also added a valid <br>, assuming you want it there.
    matches = matches.replace( /<\/br>/g, '<button>my button</button><br>' );

    $("#dialog").html( matches ).dialog("open"); // Insert new HTML content
}

---

Does the matches variable contain HTML?

You could just make a jQuery object out of it, and traverse it like any other HTML:

function showForm(matches){
      // Of course, you'll need to modify with your own button.
      // I also added a valid <br>, assuming you want it there.
    matches = matches.replace( /<\/br>/g, '<button>my button</button><br>' );

    $("#dialog").html( matches ).dialog("open"); // Insert new HTML content
}

---

Relevant jQuery docs:

• .after() - http://api.jquery.com/after/

• .find() - http://api.jquery.com/find/

• Traversing: http://api.jquery.com/category/traversing/

Answer 3

So the matches content is some static set of HTML. Once it has been added to the DOM you can use the same selectors and controls you use for everything else. So let us assume for the moment that the matches field contains a list of elements.

function showForm(matches){
  $("#dialog").html(matches).dialog("open");
  var b = $("<input type='button' value='clickme'/>");
  $("#dialog ul li").append(b);
}

Of course this is only really going to work if you have some conception of what match contains. If you know for example that it is a set of divs with a certain class that will help in making the selector.