Question

Hey guys so in JQuery ui it produces a close link that once clicked it closes the dialog. My question is how to I close it out without using that button?

I have a terms of service that pops up and I need the decline terms link to be used instead of the close button generated from the ui.

So let me know how I go about doing this, thanks 🙂

EDIT:

I used the following code and no cigar – tells me Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method ‘close’

function decline(){

     $( '#decline' ).dialog( 'close' );

    }

Once the selector is clicked it has a onclick=”” which sends it here. The selector is a id=”decline”

Here is the entire code on my page which grabs the dialog –

$(function() {
        $( "dialog:ui-dialog" ).dialog( "destroy" );
    });
    function showUrlInDialog(url){
      var tag = $("<div></div>");
      $.ajax({
        url: url,
        success: function(data) {
          tag.html(data).dialog
          ({
              width: '100%',
                modal: true
          }).dialog('open');
        }
      });
    }
    function agree(){
        alert("Handler for .click() called.");
    }
    function decline(){

     $( '#decline' ).dialog( 'close' );

    }

Here is the selector that will initialize it –

<a href="#" onclick="showUrlInDialog('termsofservice.php'); return false;">link to page B</a>

Here is the selector that I WANT to close the dialog box –

<a href="#" onclick="decline();" id="decline"><span >I decline these terms</span></a>

Edit –

Here is new code I am using with no sucess:

function decline(){

     $( '#terms-container' ).dialog( 'close' );

    }

terms-container is the main div from the other file where the initilizer gets the data

Answer 1

Since you need to close the dialog from somewhere else, I’d suggest creating a div which is there to take your html from the ajax call rather than creating it on the fly.
Html:

<a href="#" onclick="showUrlInDialog('termsofservice.php'); return false;">link to page B</a>
<a href="#" onclick="decline();" id="decline"><span >I decline these terms</span></a>
<div id="dialog-container"></div>

Javascript:

$(function() {
    $("#dialog-container").dialog( "destroy" );
});
function showUrlInDialog(url){
  var tag = $("#dialog-container");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog
      ({
          width: '100%',
            modal: true
      }).dialog('open');
    }
  });
}
function agree(){
    alert("Handler for .click() called.");
}
function decline(){

 $("#dialog-container").dialog( 'close' );

}