Weird JavaScript in a custom Zone .cshtml issue

Topics: Customizing Orchard, Writing themes
Aug 19, 2011 at 3:02 PM

I have a custom zone View that looks something like this:


<div id="navigation" class="inherit-bg">
    <article class="widget-search-form widget">
        <form action="/OrchardLocal/Search" class="search-form" method="get">
        <fieldset class="search">
            <input class="box" id="q" name="q" type="text" value="">
            <button type="submit" class="btn">

@using (Script.Foot()) { 
<script type="text/javascript">
    $(document).ready(function ()
        var searchText = 'Search...';

        $('#q').focus(function ()
            if ($(this).val() == searchText)

        $('#q').focusout(function ()
            if ($(this).val() == '')

But in doing that, I get an extremely weird rendering issue that looks like this:

Rendering Issue

To make the problem go away, I just need to add a code block below my JavaScript:

    // No idea why this mucks up if this is removed - need to ask
    if (true)
    { }

Any code appended will do, but if I remove that block, the data that's not supposed to render shows back up. Clearly, my "solution" is a hack. Can someone provide some insight into what's going on?

Aug 19, 2011 at 4:18 PM

I think you should disable Shape Tracing, there might be a conflict between this module and your javascript code.

Aug 19, 2011 at 4:34 PM

Nailed it. Totally forgot I had even enabled it, and now it all makes sense. Thanks!