0

I'm using jquery-ui version 1.11.0 to create dialogs. I can create a dialog as expected:

onClick: function(e){
  $('#result').dialog({height:400, width:315, position:{at:"center", of:"#"+e.key}})
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
      response = xmlhttp.responseText;
      $('#result').dialog().html(response);
    }
  };
  xmlhttp.open("GET", "floorplan.php?cube=" + encodeURIComponent(cubes[e.key]), true);
  xmlhttp.send();
}

The dialog opens and is assigned the response as expected. However, the dialog's position defaults to the center of the window even though I've passed a selector to the position option.

I've used console.log() and alert() to verify that e.key is the id of the area element that I've clicked on to fire this event.

Any suggestions? The documention says I should be able to pass a Selector to the position(of:) option. Has anyone else been able to get this to work as expected?

palmbardier
  • 103
  • 1
  • 7
  • Works exactly as expected [here](http://jsfiddle.net/18t5e825/), could you reproduce it in a fiddle? offtopic: also, `response` is unclojured, `heigh` is possibly misspelled, and that `.html()` looks xss-prone – blgt Sep 17 '14 at 21:55
  • How would you recommend that I escape the response to prevent XSS? Can you explain what you mean by "unclojured"? – palmbardier Sep 18 '14 at 14:05
  • It does work as expected in [jsfiddle](http://jsfiddle.net/palmbardier/Lx0ydck5/1/) . Guess I'll have to continue troubleshooting my code. I do look forward to your suggestions on clojure and escaping HTML to prevent XSS. – palmbardier Sep 18 '14 at 14:42
  • That was mostly nitpicking on my part. For `response`: it's [accessible outside its function's closure*](http://stackoverflow.com/q/111102/2685386). There *may be* cases where it's intentional, but in your case it looks like you forgot a `var` in front of it. As for `.html()`, it depends entirely on your data model; if you do proper server validation you're probably fine. Regardless, the common convention is to [use `.text()`](http://stackoverflow.com/q/9735045/2685386) for displaying ajax data – blgt Sep 18 '14 at 15:06
  • Awesome. Thankyou very much for your concise and polite advise. Still haven't been able to get proper position of my dialog though, even though it works as expected in JSfiddle. I can't imagine the behaviour would've changed too much from the version I'm sourcing in JSfiddle versus the version I'm sourcing in my code. – palmbardier Sep 18 '14 at 15:09

1 Answers1

0

Works as expected in jsfiddle.

I did end up using the click Event to determine the position of the dialog, but it was doubly wrapped for whatever reason:

$('#result').dialog({height:100, width:315, position:{my: "left top", at:"right bottom", of:e.e}});
palmbardier
  • 103
  • 1
  • 7