Question

I’m building a webpage that opens a jquery-ui dialog with a form filled with some data coming from an AJAx call. One of those numbers is used for drawing a Raphael color-filled rectangle.
Operations order is

1. ajax call
2. fill form with DOM calls
3. draw Raphaeljs figure
4. show jquery-ui dialog

here’s the code:

function onSelect_manuale(feature) {
  if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp2=new XMLHttpRequest();
  }
  else{ // code for IE6, IE5
    xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp2.onreadystatechange=function(){
    if (xmlhttp2.readyState==4 && xmlhttp2.status==200){
      obj = jQuery.parseJSON(xmlhttp2.responseText);

      document.getElementById("valMed").value = obj.valMed;
      disegnaBarraCampo(obj.valMed, 'raphaelImageDiv');
      $( "#dialog-manuale" ).dialog('open');

    }
  }
  xmlhttp2.open("GET","jGetData_manuale.php?id="+feature.data.idMisura,true);
  xmlhttp2.send();
}

and

function disegnaBarraCampo(field_value, target_field) {
  document.getElementById(target_field).innerHTML = '';
  var paper = Raphael(target_field, 300, 100);

  var barrettaVerde = paper.rect(field_value, 10, 100, 100, 4);
  barrettaVerde.attr({
    fill:'#00ff00',
    'stroke-width':0
  });
}

With Firefox or Chrome everything works perfectly. IE8 doesn’t render the Raphael figure correctly: it shows the rectangle without color fill and with a 1px black border.

The same Raphael code renders the figure correctly in IE8 if I put the code outside the dialog, so I think it’s a kind of problem of Raphael+iquery-ui dialog.

Any hint?

thanks

alberto

Answer 1

here’s the solution!

execute Raphael drawing code after jquery-ui-dialog open.

1. ajax call
2. fill form with DOM calls
3. show jquery-ui-dialog
4. draw Raphael figure