Ajax returns HTML child template - insert in DIV fails

Question

The following script gets HTML from AJAX call - HTML displays fine by itself in browser - I use InnerHtml to put it within DIV, I get javascript error :

Uncaught TypeError: Cannot call method 'setData' of undefined

I have put the same exact HTML by hard-coding inside the template, it works fine - it just doesn't work when I insert it in DIV dynamically! any ideas?

<script> 
  $(document).ready(function() 
  { $('ul.art-vmenu li').click(function(e) 
     { 
       //Ajax call to get content:
       $.ajax(
       {
             type: "GET",
             url: "/create",
             data: "",
             success: function(msg)
             {
               //alert(msg);   
               document.getElementById("art-post-inner art-article").innerHtml = msg; 
               //$("#art-post-inner art-article").html(msg);  // jQuery call             
               window.clipboardData.setData("Text", msg);  // for debug in IE               
             }
       });

     });
  });    
</script>

That error message is unrelated to `innerHTML`. The message expressly says it's about your `setData` call. Your quoted code won't produce that error, because it errors out earlier in the code (on the `document.getElementById("art-post-inner art-article").innerHtml = msg;` call). — T.J. Crowder, Jun 16 '11 at 02:41

score 3 · Accepted Answer · edited May 23 '17 at 11:55

3

first of all: it's innerHTML, not innerHtml

second: which browser are you using? clipboardData is only available in IE

check also: How do I copy to the clipboard in JavaScript?

edited May 23 '17 at 11:55

Community

1
1

answered Jun 16 '11 at 02:24

roberkules

6,557
2
44
52

Got it Working - Feel stupid it was innerHTML - somehow my brain saw it but it didn't register. Thanks – afshin Jun 16 '11 at 03:03

score 2 · Answer 2 · edited May 23 '17 at 12:20

You're trying to reference innerHTML on an undefined value, because document.getElementById is returning undefined, because this code is asking for an invalid ID:

document.getElementById("art-post-inner art-article").innerHtml = msg; 
//            Spaces not allowed ------^     and      ^----- Should be innerHTML

(+1 to roberkules for pointing out the innerHTML thing, I read right past it.)

Rules for IDs vary depending on whether you're using HTML4 and below, HTML5 (which is much more permissive), or CSS (restrictive), but one thing they all have in common is that you cannot have a space in an ID:

My guess is that that isn't an ID, that you intend it to be a selector of some kind, but as you haven't shown any markup I can't help with indicating how you might fix it other than to say that if it's a selector, you don't want document.getElementById, you want to use jQuery's $ as you have elsewhere in your code.

score 1 · Answer 3 · answered Jun 16 '11 at 02:37

You are getting "Uncaught TypeError: Cannot call method 'setData' of undefined" error because window.clipboardData is undefined. innerHtml is also wrong.

You should always use jquery html method to set the html to any dom element because jquery takes care of executing any script tags withing the markup which you are setting.

Ajax returns HTML child template - insert in DIV fails

3 Answers3