Add buttons inside specific div in jquery ui dialog

Question

Is there a way to add the buttons to a specific part of the jquery dialog modal? For example, I have styling that is currently conditional on buttons being inside a div with a specific classname, is there a way for me to target the buttons to go inside that div?

HTML:

<div id="dialog-confirm" title="Header">
 <div class="modal-inner2">
  <div class="modal-header2">
  <h1>Header</h1>
 </div>
 <div class="modal-content">

    <p>I'm text</p>

   <div class="BtnGoHere"></div>

 </div>

JS:

$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: [
  {
    text: "Cancel",
    "class": "btn btn-cancel",
    click: function() {
      $( this ).dialog( "close" );
    }
  },
  {
    text: "Save",
    "class": "btn",
    click: function() {
      $( this ).dialog( "close" );
    }
  }
]
});
});

stackoverflow.com/questions/6021107/… . This should help

xxCodexx
– xxCodexx

2016-12-28 15:10:55 +00:00
Commented Dec 28, 2016 at 15:10 — xxCodexx
– xxCodexx, Commented Dec 28, 2016 at 15:10

avilac · Accepted Answer · 2016-12-28 15:09:25Z

i've been playing around your code and I think I found the solution:

HTML:

<div id="dialog-confirm" title="Header">
 <div class="modal-inner2">
  <div class="modal-header2">
  <h1>Header</h1>
 </div>
 <div class="modal-content">

    <p>I'm text</p>

   <div class="BtnGoHere"></div>

 </div>

Javascript:

    $(function() {
        $( "#dialog-confirm" ).dialog({
        resizable: false,
        height: "auto",
        width: 400,
        modal: true,
        buttons: [
          {
            text: "Cancel",
            "class": "btn btn-cancel",
            click: function() {
              $( this ).dialog( "close" );
            }
          },
          {
            text: "Save",
            "class": "btn",
            click: function() {
              $( this ).dialog( "close" );
            }
          }
        ]
        });
    });

    $( ".BtnGoHere" ).append( "<input type='button' value='NewButton' />" );

As you can see, you have only to use the append method from the element you want to insert the new one. Also here you have the link of a jsfiddle to check the code working: https://jsfiddle.net/1yfu4w8o/

Hope it helps!

Roy Bogado · Accepted Answer · 2016-12-28 15:10:07Z

0

Just put the buttons inside the modal in HTML.
<div class="BtnGoHere"> <button class="btn" type="button">Close</button> <button class="btn" type="submit">Save</button> </div>

answered Dec 28, 2016 at 15:10

Roy Bogado

4,4721 gold badge18 silver badges36 bronze badges

Collectives™ on Stack Overflow

Add buttons inside specific div in jquery ui dialog

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related