Stop Wordpress processing Javascript as text

Question

I'm currently developing a bus route planner, using Wordpress as my CMS. I've added some JQuery code to add support for ajax (so visitors can use the route planner and load the route without having to go to another page), but it's not working.

On closer inspection using Chrome's Inspect Element, Wordpress appears to be adding paragraphs to the Javascript code, although the Javascript code is properly configured and is recognised as such:

Another member on the project also has the same issue:

Why is Wordpress doing this, and how can I stop Wordpress from adding paragraphs to the code? I am adding the code through the raw text editor for the page, so it's not like I'm adding the code via the Visual mode.

Answer 1

The post editor is really not meant for inserting functional code like JavaScript into the page.

Anything you put through the post editor will get run through wpautop() before output, which is what adds the paragraph tags -- even if you enter it via the Text mode. I'd suggest outputting your JavaScript via a hook on the page instead of via the post editor.

Something like this:

/**
 * Output JS to the page head.
 */
function output_head_js() {
    ?>
    <script type=“text/javascript”>
        $( ‘#gosearch’ ).click( function() {
        …
    });
    </script>
    <?php
}
add_action( 'wp_head', 'output_head_js' );

Answer 2

You could also remove all the breaks in your code. For example of:

Instead of:

function() doSomething() {
//code goes here
}

Do something like this:

function() doSomething() {//code goes here}

Its annoying but it will allow you to still use WordPress' text editor.