jqModal not draggable when dialog box content is from ajax

Hi,

I am using jqModal on my project. I need my dialog box to be showed from ajax and the dialog box should be draggable. Here is my snippet of my code:

js code:

  **$('#ex2').jqm({
   //trigger: '#ex3aTrigger',
    overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
    overlayClass: 'whiteOverlay',
    ajax: '/dialog/MenuUpdateSuccess.html'
}).jqmShow(); /* make dialog draggable, assign handle to title */
  $('#ex2').jqDrag('.jqDrag');
  // Close Button Highlighting. IE doesn't support :hover. Surprise?**
  $('input.jqmdX')
  .hover(
    function(){ $(this).addClass('jqmdXFocus'); },
    function(){ $(this).removeClass('jqmdXFocus'); })
  .focus(
    function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
  .blur(
    function(){ $(this).removeClass('jqmdXFocus'); });

html code :

<div class="jqmWindow" id="ex2">

</div>

css code:

div.whiteOverlay { /*
background: url(/images/jqmBG.gif) white;
*/}
div.jqDrag {cursor: move;}

/* jqmModal dialog CSS courtesy of;
  Brice Burgess <[email protected]> */

div.jqmDialog,div.jqmWindow {
  display: none;
   position: fixed;
    top: 17%;
    left: 50%;

    margin-left: -200px;
  width: 400px;

  overflow: hidden;
  font-family:verdana,tahoma,helvetica;
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html div.jqmDialog {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
* html div.jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

/* [[[ Title / Top Classes ]]] */
div.jqmdTC {
  background: #d5ff84 url(/images/sprite.gif) repeat-x 0px -82px;
  color: #528c00;
  padding: 7px 22px 5px 5px;
  font-family:"sans serif",verdana,tahoma,helvetica;
  font-weight: bold;
  * zoom: 1;
}
div.jqmdTL { background:  url(/images/sprite.gif) no-repeat 0px -41px; padding-left: 3px;}
div.jqmdTR { background: url(/images/sprite.gif) no-repeat right 0px; padding-right: 3px; * zoom: 1;}


/* [[[ Body / Message Classes ]]] */
div.jqmdBC {
  background: url(/images/bc.gif) repeat-x center bottom;
  padding: 7px 7px 7px;
  height: 180px;
  overflow: auto;
}
div.jqmdBL { background: url(/images/bl.gif) no-repeat left bottom; padding-left: 7px; }
div.jqmdBR { background: url(/images/br.gif) no-repeat right bottom; padding-right: 7px; * zoom: 1 }

div.jqmdMSG { color: #317895; }


/* [[[ Button classes ]]] */
input.jqmdX {
  position: absolute;
  right: 7px;
  top: 4px;
  padding: 0 0 0 19px;
  height: 19px;
  width: 0;
  background: url(/images/close.gif) no-repeat top left;
  overflow: hidden;
}
input.jqmdXFocus {background-position: bottom left; outline: none;}

div.jqmdBC button, div.jqmdBC input[type="submit"] {
  margin: 8px 10px 4px 10px;
  color: #777;
  background-color: #fff;
  cursor: pointer;
}

div.jqmDialog input:focus, div.jqmDialog input.iefocus { background-color: #eaffc3; }

MenuUpdateSuccess.html 's code

<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">test</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">

<div class="jqmdMSG">
test
</div>

</div></div></div>
<input type="image" src="/images/close.gif" class="jqmdX jqmClose" />

The box is displayed but it's not draggable. Can you figure out the reason?

Thanks a lot and sorry for the poor English.

ansaurus

tags:

views:

answers:

jqModal not draggable when dialog box content is from ajax

related questions