CODEWITHSUNDEEP
javascriptdomjquerywidget
Mechlar
Mechlar

Reputation: 4974

Insert a script into the DOM that calls AJAX

We have a tool that allows people to add code to a dynamic page.

A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...

I need to solve this.

Here is an example. Create a page with the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript">
    $(function(){

       $('#doInsertW').click(function(){
          var wCode = $('#inputWidget').val();
          $('#putWidget').html(wCode);
       });

    });
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>

Then paste this into the input and you'll see what I mean:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('twitter').start();
</script>

Upvotes: 0

Views: 780

Answers (1)

Mark Eirich
Mark Eirich

Reputation: 10114

The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.

Here is a quick and dirty hack that will force it to work (tested in FireFox):

$(function(){
    document.write = function(c) { $('#putWidget').append(c) };

   $('#doInsertW').click(function(){
      var wCode = $('#inputWidget').val();
      $('#putWidget').html(wCode);
   });

});

Notice, I'm simply overriding the document.write function after the page is done loading.

Upvotes: 1

Related Questions