CODEWITHSUNDEEP
jqueryhyperlinkdialogpopupjquery-ui-dialog
Datacrawler
Datacrawler

Reputation: 2876

How to make jQuery dialog working with hyperlink text instead of button?

I made it work but the problem is that it works only once. Once the popup appears , the link doesn't work and the popup doesnt show up again. I have to refresh to see that is happening. I got this http://jsfiddle.net/pjVcR/2/ and it works inside the jsfiddle , but in my site it doesn't work. My site link is here : MY SITE

Here is the code:

  <div class="content">
  <h4><a href="#" >AAAA</a></h4><img src="AAAA.jpg" />
    <div class="dialog" title="AAAA" >text AAAA
    </div>
  </div>

  <div class="content">
  <h4><a href="#" >BBBB</a><br></h4><br><img src="BBBB.jpg" />
    <div class="dialog" title="BBBB" >text
    </div>
  </div>

and the script given in the html as well :

<script>
$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( event, ui ) {
      $('.dialog').dialog('destroy');
    }
  });
});
</script>

Upvotes: 4

Views: 2427

Answers (3)

user762330
user762330

Reputation:

$('.dialog').dialog('destroy'); trys to destroy all you dialogs, not only the visible. thats why you get a error.

try $('.dialog:visible').dialog('destroy'); to destroy all visible dialogs. Or you can prefix the id for the dialogs and then select and destroy them.

Upvotes: 0

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

You have many elements with the dialog class, so when you call

$('.dialog').dialog('destroy');

you are destroying dialogs that do not yet exist, thus the exception:

cannot call methods on dialog prior to initialization; attempted to call method 'destroy'

Use the local instance of $(this) inside the close handler (which is that specific .dialog element) so that jQuery knows which one to destroy.

$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( event, ui ) {
      $(this).dialog('destroy');
    }
  });
});

http://jsfiddle.net/pjVcR/3/

Notice if you change the code to use .dialog instead of $(this) you will still get the same error you are getting in your page, and that's why you don't get the error in the jsFiddle, because you only have one div with class .dialog in there.

Upvotes: 2

user2474948
user2474948

Reputation:

The issue you are having is that when you call

$('.dialog').dialog('destroy');

You are destroying the object/it does no longer exist, You would need to recreate it instead of just calling it..

Try creating a class that you can put on your href tag that will give you what you are looking for

Try doing this:

<a href="PageName.php" class="iframe_popup" title="Title You want The Dialog Box to show">Your Text Link here</a>

$(function() {

$('.iframe_popup').click(function(e) {
    e.preventDefault();         
    var $this = $(this);
    var horizontalPadding = 30;
    var verticalPadding = 30;

    var iframe_popup = $('<iframe id="externalSite" class="externalSite" frameborder="0" allowtransparency="true" src="' + this.href + '" />');
    iframe_popup.dialog(
    {
        title: ($this.attr('title')) ? $this.attr('title') : '',
        autoOpen: true,
        width: 600,
        height: 450,
        modal: true,
        autoResize: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    }).width(600 - horizontalPadding).height(450 - verticalPadding);
});

}); // Close Function

Upvotes: 0

Related Questions