ie and jquery $.get not working

Question

I am trying to update the content of a div with a $.get call but it is failing in ie(9).

the js is this

function UpdateElementOfParent(box_id, page_ref, template_ref)
{
 $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
  .done(function(data) {                  
         $('#'+box_id).html(data);              
      });  
}

and the get_content.php is this

  <?php   
include("connect.php"); 
$page_ref = $_GET['page_ref'];  
$template_ref = $_GET['template_ref'];
$box_id = $_GET['box_id'];  
$sql = mysql_query("SELECT * FROM site_content WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'");
while($row=mysql_fetch_array($sql))  
    {  
      echo stripslashes($row['content']);  
    }  
   ?> 

it works fine in firefox/chrome/safari and opera.

the php updates the db but the div ("#"+box_id) doesnt update in ie (only have ie9 at hand so dont know if its just 9 or other versions also)

any clues?

QUICK UPDATE

it seems that ie is holding some data from a previous $.get call in the cache. Basically I have a div on the screen and when the user clicks a button, a layer opens with a textarea that is editable with nicedit. The textarea is populated with a $.get, then the user clicks save, the layer is hidden and the original div on the parent page is updated with the same $.get call.

In ie, if I change the content, the db is updated but the div is not and when I open the layer, it still shows the old data.

the first $.get call is this

$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
  .done(function(data) {         
      document.getElementById("edit_content").value=data; 
      area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});              
      });  

the alerted data doesnt show the updated text in IE so its definately something to do with the $.get call

Answer 1

This isn't an answer, as the question is incomplete, but I need to post a code comment to assist OP.

As you mentioned that the PHP works just fine, the problem might be that IE doesn't like dynamic selectors in jQuery. Do try these few options:

1) Change $('#'+box_id).html(data); to:

var id = '#'+box_id;
$(id).html(data);

2) Try logging or alert-ing the element out, to see if IE actually got the element right:

var elem = $('#'+box_id);
alert(elem);
elem.html(data);

This would display as [HTMLDivElement] or something similar if the element is there.

3) If all else fails, see if this vanilla JS works in IE, to verify that it isn't a jQuery selector problem.

var elem = document.getElementById(box_id);
alert(elem);
elem.innerHTML = data;

Answer 2

I figured out the problem. Nothing to do with the selector, but with the scope of the parameter variable box_id .

Change your function to:

function UpdateElementOfParent(box_id, page_ref, template_ref) {

    myBox = box_id;
    $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
        .done(function(data) {                  
             $('#'+myBox).html(data);              
        });  
}

Explanation:

The AJAX callback function does not have access to the local variable in UpdateElementOfParent

Answer 3

ok problem solved and I knew it was something very obvious.

inside the original $.get function call I have to set the document.ready state

function get_edit_content(box_id,page_ref,template_ref)
  {
    $(document).ready(function() { <<<<<HERE   
        if(area1) {     
           area1.removeInstance('edit_content');
           area1 = null;
           document.getElementById("edit_content").value="";         
         }
        $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
        .done(function(data) {       
           document.getElementById("edit_content").value=data;         
           document.getElementById("page_ref").value=page_ref;
           document.getElementById("template_ref").value=template_ref;          
           document.getElementById("box_id").value = box_id;                     
           area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});             
         });  
    });

}

thanks for all the input