Why does moving the start of the comment down one line of whitespace break compilation of this JavaScript code in WordPress?

2 Views

I’m having to use WordPress for this particular page, and I wouldn’t put it past WordPress to have a bug here, but maybe it is just the JavaScript. Why does this compile: 

    var pData = jQuery.parseJSON(pData);
    var strInnerHTML = "";
    /*
    for (var i = 0; true; i++) {
        var obj = pData[i.toString()];
        if (obj) {
            strInnerHTML += '<option value="' + obj.key + '">' + obj.value + '</option>n';
        } else {
            break;
        }
    }
    alert(strInnerHTML.slice(0, strInnerHTML.length - 2));
    document.getElementById("selectNations").innerHTML = strInnerHTML.slice(0, strInnerHTML.length - 2);*/

and yet this doesn’t:

Read More
    var pData = jQuery.parseJSON(pData);
    var strInnerHTML = "";

    /*for (var i = 0; true; i++) {
        var obj = pData[i.toString()];
        if (obj) {
            strInnerHTML += '<option value="' + obj.key + '">' + obj.value + '</option>n';
        } else {
            break;
        }
    }
    alert(strInnerHTML.slice(0, strInnerHTML.length - 2));
    document.getElementById("selectNations").innerHTML = strInnerHTML.slice(0, strInnerHTML.length - 2);*/

EDIT

This is the first example in its full form. In the first example, I’m able to see alert("spam"); getting executed when I load the page, but not in the second example: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    // A text file had to be used, since WordPress wouldn't let me upload a JSON file.
alert("spam");
    jQuery.get("someJSONFileInTheFormOfATextFile", function(pData) {
        var pData = jQuery.parseJSON(pData);
        var strInnerHTML = "";
/*
        for (var i = 0; true; i++) {
            var obj = pData[i.toString()];
            if (obj) {
                strInnerHTML += '<option value="' + obj.key + '">' + obj.value + '</option>n';
            } else {
                break;
            }
        }
        alert(strInnerHTML.slice(0, strInnerHTML.length - 2));
        document.getElementById("selectNations").innerHTML = strInnerHTML.slice(0, strInnerHTML.length - 2);*/
    });
</script>
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Found out what happened. When I first started playing with WordPress the other night, I noticed that its Text/HTML tag on a page’s editing screen tries to find newline characters in your code and add its own code around them behind your back. They think this is “convenient and simple”. Well, this principle apparently extends to JavaScript inside of script tags. If you do this in JavaScript:

    var x = 0;
var y = 0;

for (var i = 0; i < 50; i++) {

    then WordPress will try to insert extra characters on and around that blank line on the finished page without telling you. This will break your JavaScript code. One way to work around it though is to just insert // everywhere you plan for a line to be blank:

    var x = 0;
var y = 0;
//
for (var i = 0; i < 50; i++) {

    This will get WordPress to more-or-less stay out of your way. In the second example in the question, there was a blank line which was not existent in the first example.

  2. You can disable autop in the post editor for all posts/pages so WP doesn’t add paragraph breaks.

    Use these filters in your theme’s functins.php file to disable for the_content or the_excerpt, or use both:

    remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

    From http://codex.wordpress.org/Function_Reference/wpautop

    Or, do the following, which leaves autop enabled globally, but lets you disable it with <!-- noformat on --> and <!-- noformat off --> tags in individual posts and pages.

    After you add the function below to your theme’s functions.php file, use can use the two tags

    <!-- noformat on --> and <!-- noformat off -->

    in your page/post editor, i.e.

        text will be rendered *with* autop

    <!-- noformat on -->

    text will be rendered *without* autop

    <!-- noformat off -->

    text will be rendered *with* autop

    Content outside of the two format tags will have autop enabled, as noted.

    Add to functions.php of your theme:

    // <!-- noformat on --> and <!-- noformat off --> functions

function newautop($text)
{
    $newtext = "";
    $pos = 0;

    $tags = array('<!-- noformat on -->', '<!-- noformat off -->');
    $status = 0;

    while (!(($newpos = strpos($text, $tags[$status], $pos)) === FALSE))
    {
        $sub = substr($text, $pos, $newpos-$pos);

        if ($status)
            $newtext .= $sub;
        else
            $newtext .= convert_chars(wptexturize(wpautop($sub)));      //Apply both functions (faster)

        $pos = $newpos+strlen($tags[$status]);

        $status = $status?0:1;
    }

    $sub = substr($text, $pos, strlen($text)-$pos);

    if ($status)
        $newtext .= $sub;
    else
        $newtext .= convert_chars(wptexturize(wpautop($sub)));      //Apply both functions (faster)

    //To remove the tags
    $newtext = str_replace($tags[0], "", $newtext);
    $newtext = str_replace($tags[1], "", $newtext);

    return $newtext;
}

function newtexturize($text)
{
    return $text;   
}

function new_convert_chars($text)
{
    return $text;   
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'newautop');

remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'newtexturize');

remove_filter('the_content', 'convert_chars');
add_filter('the_content', 'new_convert_chars');