jQuery UI Dialogs won't reopen

Question

I have two jQuery UI dialogs (unrelated to each other but both are exhibiting this behavior) that behave perfectly the first time they're opened and closed. Once they're closed for the first time though they won't reopen. Below is the code for one of them, the other has an identical structure. I'm not calling 'destroy()' or 'remove()' anywhere so I'm not sure why these won't work properly. Here's my code:

$(".qr_link").click(function(){
  openQr(this);
});

function openQr(that){
  var title = $(that).parent().parent().children("p.resume-name").text();
  var qr = $(that).parent().parent().children(".qr_image");

  $(qr).dialog({
    title: title,
    width: 'auto',
    height: 'auto',
    modal: true
  });
}

My markup:

<div class="resume">
  <p class="resume-name"><%= link_to(offer.name, public_url(offer.public_id, :host => ApplicationSetting.short_domain, :params => {:rid => @recruiter_id})) %></p>
  <p id="resume_links">- 
    <%= link_to("QR", "#", :class => "qr_link") %>
    <%= link_to("X", "#", :class => "remove_link") %>
    <%= link_to("Preview", "#", :class => "preview_link") %>
  </p>
  <%= qr_image(public_url(offer.public_id, :host => ApplicationSetting.short_domain, :params => {:rid => @recruiter_id}), "200x200", "hide qr_image")%>
  <p class="resume-tags"><span class="resume-tags-label">Tags: </span><span class="resume-tags-value">
    <%= offer.tags.join(", ") %>
  </p>
  <p class="resume-description"><%= offer.description %></p>
</div>

Thanks in advance.

---

Update

---

So initially, I have the qr image loaded when the page loads but I have it hidden. It displays fine in the dialog, but when the dialog appears, the qr image gets removed from the HTML! So I guess the reformatted question is, "Why is my QR Code being deleted?"

Answer 1

$(qr).dialog({...}) initializes and opens the dialog just once. If you want to open it again you need to call .dialog('open') on the element.

As to the updated question: dialog moves its content from where ever you had it, wraps it in a container with styling and then appends it to the end of the document. However the way you are getting the dialog element won't work now as its been moved.

I would recommend using IDs to reference the dialog content instead of traversing through the DOM. You could store that ID as a data attribute on the element that is being clicked.

Answer 2

I can't replicate your error. Can you JSFiddle the complete code?

Try calling destroy on the modal prior to launching it.

$(":ui-dialog").dialog("destroy");