0

I'm working on a JavaScript/jQuery draggable widget manager. Currently, this is working great on manually moving the containers and saving the sort value to a DB (via PHP). I'm putting this together for a simple way to position various ad zones for a client.

The problem is now, when I'm trying to move my zones, jQuery breaks down when there is JavaScript ad code within the zone. The point of failure is when I'm trying to select the class container to get the id of the zone.

 var items=[];  
  $('.column').each(function(){  
      var columnId=$(this).attr('id');  
      $('.dragbox', this).each(function(i){ 
          var item={  
              id: $(this).attr('id'),  
              collapsed: 0,  
              order : i,  
              column: columnId  
          };  
          //Push item object into items array  
          items.push(item);  
      });  
  }); 

After creating this array, it's passed via JSON to my update script. The problem is that nothing is getting created into the array when I have ad server code. Here is the example of what it would look like (HTML)

<div class="dragbox" id="item1">
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 1</h2>
<div class="dragbox-content" >
    <!-- Panel Content Here -->
    <script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://ads.mytestsite.com/_ads/delivery/ajs.php':'http://ads.mytestsite.com/_ads/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=24");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://ads.mytestsite.com/_ads/delivery/ck.php?n=a7d957c0&cb=&n=a7d957c0' border='0' alt='' /></a></noscript>

</div>
</div>

If I remove the '<script type='text/javascript'>' things seem to work better. I've done some testing with < / > ' " ! -- [ chars and those all seem to be fine.

As you can see, I'm only trying to grab the id of the class container and pass that to JSON, but the content is within this container, and I think it's borking things up. I also tested with Error Console in Firefox and it's not reporting any errors.

Any suggestions are greatly appreciated!

hanji

hanji
  • 315
  • 2
  • 20
  • 1
    umm how about you concatenate the string first and when you are done, you use document.write once – Ibu Jul 25 '12 at 20:01
  • I'm not following.. can you explain? Concatenate then entire ad code portion after $('.dragbox', this).each(function(i){ ? – hanji Jul 25 '12 at 20:37
  • Looks like the point of failure is with the document.write() within the ad code. Removing those, the application works properly posting to the DB. – hanji Jul 25 '12 at 21:57

1 Answers1

1

Whenever the browser encounters a </script> during javascript interpretation, even if it is in a string, it treats it as a closing tag.

Related question: Script tag in JavaScript string

A commonly used technique is to use the concatenation operator:

var test = '...... </scr'+'ipt>......';

Community
  • 1
  • 1
jbabey
  • 45,965
  • 12
  • 71
  • 94
  • The other problem is that I need that included javascript to render within that box. So the ad shows properly, and giving the user to drag the container. Changing it to ' would break that unless I do some document.write stuff. I was hoping for an easy solution to either exclude the 'content' piece and just use the id, or to somehow use a encoding, etc at the point of referencing that class container. – hanji Jul 25 '12 at 20:36