Updated Apr 25, 2007 by andrej.okonetschnikow
Labels:	Help, Featured

DefiningJavaScript

This page explains how to define JS functions inside MB content correctly.

Introduction

Since I got a lot of feedback on this topic, I decided to write down some notes about correct JS-functions definitions inside content which is being loaded into ModalBox.

Details

First of all, please note this article: http://prototypejs.org/api/ajax/updater

It says regarding this problem:

If you use evalScripts: true, any <script> block will be evaluated. This does not mean it will get included in the page: they won't. Their content will simply be passed to the native eval() function. There are two consequences to this:

The local scope will be that of Prototype's internal processing function. Anything in your script declared with var will be discarded momentarily after evaluation, and at any rate will be invisible to the remainder of the page scripts. If you define functions in there, you need to actually create them, otherwise they won't be accessible to the remainder of the page scripts. That is, the following code won't work:

// This kind of script won't work if processed by Ajax.Updater:

function coolFunc() {

// Amazing stuff!

}

You will need to use the following syntax:

// This kind of script WILL work if processed by Ajax.Updater:

coolFunc = function() {

// Amazing stuff!

}

Secondly, the Modalbox itslefs is trying to get the right scope back to these scripts. It is using bind(window) method.

Comment by mickael.kurmann, Aug 09, 2007

I'm not sure to understand how to include <script> block, I tried to add something like that :

<script type="text/javascript">

//<![CDATA[ Sortable.create('order', {onUpdate:function(){new Ajax.Updater('ajax_feedback_success', '/frontend_dev.php/users/sortPreferedLanguages', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('indicator'); Element.show('ajax_feedback_success');new Effect.Highlight('ajax_feedback_success', {});}, onLoading:function(request, json){Element.show('indicator');}, parameters:Sortable.serialize('order')})}}) //]]>

</script>

It works well when not in a modalbox, but when in a modalbox, my script isn't included anymore...

Comment by mickael.kurmann, Aug 09, 2007

little update, this works... but not always, don't know why yet, but as soon as I found, I'd give a feedback

Comment by mauro.delromano, Aug 14, 2007

I've got a function like this:

function clean_input_4email($value, $check_all_patterns = true)
{
 $patterns[0] = '/content-type:/';
 $patterns[1] = '/to:/';
 $patterns[2] = '/cc:/';
 $patterns[3] = '/bcc:/';
 if ($check_all_patterns)
 {
  $patterns[4] = '/\r/';
  $patterns[5] = '/\n/';
  $patterns[6] = '/%0a/';
  $patterns[7] = '/%0d/';
 }

etc. etc.

how can it be written to work?

thank you!

Comment by addictivemedia, Nov 01, 2007

Sorry, but I am not sure if I understand the instructions correctly.

Let's say I have got a simple two line script that should be running in the modalbox:

var $myName = "John"; alert($myName);

Will it be at all possible to run this and if so, how? If I understand correctly the var will be immediately discarded. How do I get around this?

Comment by ajonessn, Nov 03, 2007

Am I missing something here:

<script>
var options = $$('#options input'); 
options.invoke('observe', 'click', function(){ 
   if (this.checked) { 
      $('main').checked = false; 
   } 
}) 

$('main').observe('click', function() { 
   if (this.checked) { 
      options.each(function(el){ el.checked = false; }) 
   } 
}) 
</script>

With the exception of defining the function like options = function(), I can't see why this doesn't work.

Any help?

Comment by robertmn, Dec 17, 2007

I have a question about modalbox that uses iframes :

How can I Modalbox.hide(); to work in an iframe? If I add it to a button on a page contained within the iframe I get this error: Error: this.windows[aWindow.SSi] has no properties Source File: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsSessionStore.js Line: 777

Comment by caioiglesias, May 28, 2008

where are the answers?

Comment by Justinasu, Jun 03, 2008

mickael.kurmann the scripts are included as ususal with <script> blocks. <script> your scripts </script> or including the js script file. Nothing magical about it.

ajonessn

well as written above the var variables are discarted after parsing scrips so thats why your var options will not work.

robertmn as you can see error accurs in nsSessionStore.js file witch is part of firefox not modalbox and is not related to modalbox in any way. this was reported to FF developers but as way pointed out the error is harmless, and doesn't couse any data loss ar smth like that this is a low priority bug as is nor fixed since 2.0.0.11 version i think.

Comment by dinaco1, Jun 09, 2008

If var (variables) are discarted, how can i use it so it would work with modalbox?

Example:

var RecaptchaState? = {

challenge : 'WwauWTs-9hZ_SGJl-HSUxEjPmRtd5IGs2t7cs0n9n9lQ5gsVhabKAwMD', timeout : 25000, server : 'http://api.recaptcha.net/', site : 'XXXXXXXXXXXXXXXXXXXXXXXXXX', error_message : '', programming_error : '', is_incorrect : false

};

document.write('<scr'+'ipt type="text/javascript" s'+'rc="' + RecaptchaState?.server + 'js/recaptcha.js"></scr'+'ipt>');

Comment by seosaimh, Jun 17, 2008

I'm trying Modalbox.show('http://www.mysite.com/splashpage.html') I have the following code in splashpage.html: <script language="JavaScript?" type="text/javascript"> ord = (typeof(ord)!='undefined') ? ord : Math.random()10000000000000000; document.write('<scr'+'ipt language="JavaScript?" src="http://ad.doubleclick.net/adj/P4995.ZAPPYBABY/INTRO-NL_SPLASH_CENTER_630x320;sz=630x320,1x1;tile=2;lang=nl;pos=center;pgl1=intro;kw=[KEYWORD];ord='+ord+'?" type="text/javascript"></scr'+'ipt>'); </script>

Result: I see the page http://www.mysite.com/splashpage.html but not within the Modalbox. Any idea what I'm doing wrong.