Using Ajax.Updater to get a javascript file (prototypejs)

Question

Here is my ajax request:

new Ajax.Updater({ success: 'footer' }, '/dyn/actions/checkSystemMessage', {
   insertion: 'after',
   evalScripts: true
 });

Here is what's at /dyn/actions/checkSystemMessage:

<script type="text/javascript"><!--

document.observe('dom:loaded', function() {

 buildSystemMsg = function(SystemMsg) {
  //behind container
  behindContainer = new Element('div', {id: 'behind-system-message'});
  behindContainer.setStyle({display: 'none'});
  document.body.appendChild(behindContainer);

  //main container
  container = new Element('div', {id: 'system-message'}).update(SystemMsg);
  container.setStyle({display: 'none'});
  document.body.appendChild(container);

  //hide button
  hideBtn = new Element('a', {'class': 'close-button', 'title': 'Close System Message'}).update('Close');
  hideBtn.setStyle({ marginTop: '5px'});
  container.insert({bottom: hideBtn});

  offsetY = container.getHeight();

  //show
  if ($('mod-system-alert'))
  { new Effect.Move($('mod-system-alert'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 }); }
  new Effect.Move($('footer'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
  new Effect.Move($('page-container'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });  
  new Effect.Move($('nav'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
  new Effect.Move($('header-container'), { queue: 'front', x: 0, y: offsetY, mode: 'relative', duration: 0 });
  Effect.BlindDown(behindContainer, { queue: 'front', duration: 0 });
  Effect.BlindDown(container, { queue: 'end', duration: 0.5 });


  hideBtn.observe('click', function() {
   if ($('mod-system-alert'))
   { new Effect.Move($('mod-system-alert'), { queue: 'front', x: 0, y: -offsetY, mode: 'relative', duration: 0 }); }
   new Effect.Move($('footer'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
   new Effect.Move($('page-container'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });  
   new Effect.Move($('nav'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
   new Effect.Move($('header-container'), { queue: 'end', x: 0, y: -offsetY, mode: 'relative', duration: 0 });
   Effect.BlindUp(behindContainer, { queue: 'front', duration: 0 });
   Effect.BlindUp(container, { queue: 'front', duration: 0.5 });
   set_cookie("HideSystemMsg", true);   
  });
 }

 hideMsg = get_cookie("HideSystemMsg");
 systemMsg = '${SystemMsg}';
 if (systemMsg.length > 0 && !hideMsg)
  buildSystemMsg(systemMsg);

});

--></script>

This is neither inserting the javascript after the element with ID footer nor is it executing the script. It does rely on other javascript libraries that are included on the page where the update is occurring. Could this be where my problem is?

Answer 1

Hi There,

I believe evalScripts will only work if your response headers have a "text/javascript" content type. This is what tells the AJAX library that what you're getting from the server is a script..

Additionally, you would not need the mark up: <script type="text/javascript"><!--, and: --></script>

I hope this helps.