Simple javascript in page not working

  • Resolved cmercier

    (@cmercier)


    11 years, 5 months ago

    I’m trying to implement a simple javascript inside a particular page of my WordPress site. The code works perfectly in a standalone html file, but once I put the exact same code in the “text” section of my “edit page”, update and refresh my page, the script does not execute. Here is the code :

    <script type="text/javascript">
function dropdownSelected()
{
document.getElementById("myTable").innerHTML="";
// Some table manipulations depending on "mySelect" will happen here.
var newTable = new String("<h2>Fine.</h2>");
document.getElementById("myTable").innerHTML=newTable;
}
</script>

<select id="mySelect" onchange="dropdownSelected()">
  <option value="" disabled selected style="display:none;">Pick option</option>
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
</select>

<table id="myTable" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

    It can’t get any simpler, yet it doesn’t work in WP. What am I doing wrong? I noticed that removing the <h2></h2> tags in my newTable string lets the script execute. As far as I know, I should be able to put whatever I want in this string though!

    I simply want to adjust the content of an html table according the the user’s choice in a dropdown list. The easiest should be to work on a custom string containing the table’s html code and then put it in the table’s innerHTML… I just wish it worked in WP as it does in a normal html file.

Viewing 3 replies - 1 through 3 (of 3 total)
  • wpismypuppet

    (@wordpressismypuppet)

    The reason it won’t work in the “text” section of the “edit page” is because PHP is executed on that area to help “format” the content in proper HTML format. It doesn’t really like JavaScript (or can’t interpret it as well). Most likely the format that’s taking place is probably converting the quotes or something silly.

    Your best bet is to place your JavaScript in an external file. In your functions.php file, you should use wp_register_script() and wp_enqueue_script() to include your external JavaScript. Then, you can do a check:

    if( document.getElementById("myTable").length > 0 ) {
    dropdownSelected();
}

    This code will check to see if that table exists on the page, and then execute your function. This way you’ll only run the JavaScript on the page that contains the proper element.

    Thread Starter cmercier

    (@cmercier)

    Thanks for the tip, I think you were indeed right. It’s really a shame that WordPress doesn’t provide real HTML support out of the box.

    After messing around for a while, I finally found a simple and effective way to add the javascript to the right pages by using the nice plugin “CSS & Javascript Toolbox”.

    wpismypuppet

    (@wordpressismypuppet)

    Don’t be so hard on WordPress… think about what WordPress was developed to be: originally just a blog platform, and now a content management system, for the non-programmer. It’s suppose to be an easy way for anyone to update their website content without the need to know JavaScript, PHP, HTML or CSS. So technically the content editor is doing exactly what it should be doing.

    We as programmers/developers know a little more about the world wide web and it’s many languages, so WordPress developers have given us many “hooks” to tap into the power of WordPress. Hooks such as the wp_enqueue_script(). This way we can still do absolutely anything we can think of. But for the average Joe… the out-of-the box solution is simply perfect!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Simple javascript in page not working’ is closed to new replies.