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:

 

@{
    Script.Require("jquery");
}
<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">
                Search</button>
        </fieldset>
        </form>
    </article>
</div>

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

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

        $('#q').focusout(function ()
        {
            if ($(this).val() == '')
            {
                $(this).val('Search...');
            }
        });
    });
//]]>
</script>
}

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?

Coordinator
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!