Popup widget and ajax duplicate -screen and -popup divs

Popup widget and ajax duplicate -screen and -popup divs

Hello,

I am trying to use the popup widget for my form validation which uses ajax.

I have three variables $id $header $message  and here is the html I use to generate the popup

<div data-role="popup" id="$id" data-dismissible="false">
    <div data-role="footer" data-theme="b">
      <h1>$header</h1>
    </div>
    <div data-role="content" data-theme="a">
      <h3 class="wrap ui-title">$message</h3>
      <a href="#$id" class="ui-btn ui-btn-inline ui-corner-all" data-rel="back" data-transition="fade">OK</a>
    </div>
  </div>

I get the corrrect divs after the page is created:  $id here is questionDialog1

..questionDialog1-screen..
 ..questionDialog1-popup ..

and the popup works great, until I update the form by ajax, essentially recreates the same divs with different $message and $header and then call the create to refresh the data on the div (there is some javascript).

$('#mydiv').trigger('create');

I seem to get another set of divs for the dialog after the first set (and every time I call the ajax)

..questionDialog1-screen..
 ..questionDialog1-popup..

 ..questionDialog1-screen ..
..questionDialog1-popup..

And also the popup shows the first message.

I can remove the previous divs first and then call

$('# questionDialog1').popup();

which recreates the latest divs, but is there a correct way to refresh the data on the original divs and not to create more divs on each ajax call.

Cheers Greg