Title: Innerhtml text replacement
Last modified: August 30, 2016

---

# Innerhtml text replacement

 *  [donnersm](https://wordpress.org/support/users/donnersm/)
 * (@donnersm)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/)
 * CAn’t get my template to work.
    In het header.php i included the following script:
   <script> function showUser(str)) { if (str == “”) { document.getElementById(naam).
   innerHTML = “”; return; } else { if (window.XMLHttpRequest) { // code for IE7
   +, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { //
   code for IE6, IE5 xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); } xmlhttp.
   onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status
   == 200) { document.getElementById(replaceMe).innerHTML = xmlhttp.responseText;}}
   xmlhttp.open(“GET”,”getuser.php?q=”+str,true); xmlhttp.send(); } } </script>
 * In the template.php file i have this:
    .. .. <div id=”replaceMe” class=”retourtxt”
   ><b>Kies hierboven de eerste inleiding van de les</b></div> ..
 * At some point in the template , I call the script ..te script will get some more
   data from a database and replaces the innertext from replaceMe
 * By testing i know that:
    – the script routine is called when needed, the call
   to the getuser.php is also excecuted…it gives back the data.. for some reason
   i cant get the replaceing to work.. what is their with this innerhtml that i 
   am missing. FYI, if i code it into simple HTML as standalone, it works ( [http://www.judoles.nl/lesformulier](http://www.judoles.nl/lesformulier))
   perfectly..just not as a wp template.. What am i missing here?

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [yorman](https://wordpress.org/support/users/yorman/)
 * (@yorman)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208865)
 * It would be better if you link to the current page that is having the issues 
   as you did with the external page at the end of your comment. Right now I do 
   not see any problem with that code, but assuming that it is the exact same text
   that you are using in your actual site then I believe the problems is that _“
   replaceMe”_ is not an argument in the function.
 * In the example page the function is defined like this [1], but in the code that
   you mentioned in your original comment you changed _“naam”_ to _“replaceMe”_ 
   and did not defined correctly in the header of the function [2], and also you
   have a double closing parenthesis there.
 * Anyway, this is just assuming that the code shown in your comment is an exact
   copy of the code that is in the _“template.php”_ file, if it is not the exact
   same thing that you have there then it is difficult to say where the error is,
   so try this [3].
 * [1] _function showUser(str, naam) { … }_
    [2] _function showUser(str) { … }_ [
   3] [http://cixtor.com/pastio/0jc52x](http://cixtor.com/pastio/0jc52x)
 *  [nazzilla](https://wordpress.org/support/users/nazzilla/)
 * (@nazzilla)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208870)
 * Try to use WP AJAX API and with jquery
 * in function.php of your theme add
 *     ```
       add_action( 'admin_footer', 'my_action_javascript' ); // this need to print <script> in footer, add  my_action_javascript function to wp_footer
   
       function my_action_javascript() { ?>
       	<script type="text/javascript" >
       	jQuery(document).ready(function($) {
       		var data = {
       			'action': 'my_action', // name of php function
       			'userid': 1234 // var to send
       		};
   
       		$.post(ajaxurl, data, function(response) {
       if(data){
             $('#replaceMe').html(data);
       }
       		});
       	});
       	</script> <?php
       }
   
       add_action( 'wp_ajax_my_action', 'my_action_callback' ); // for logged user
       add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' ); //for every user
       function my_action_callback() {
   
       	$userid = intval( $_POST['userid'] ); // receive var form ajax call
               // put here your function
       	$user = get_post($userid);
               if($user){
                    $html = '<h3>'.$user->post_title.'</h3>';
                    $html .= '<p>'.$user->post_content.'</p>';
       }
               echo $html;
   
       	wp_die(); // this is required to terminate immediately and return a proper response
       }
       ```
   
 * You can try full documentation here
 * [http://codex.wordpress.org/AJAX_in_Plugins](http://codex.wordpress.org/AJAX_in_Plugins)
 *  Thread Starter [donnersm](https://wordpress.org/support/users/donnersm/)
 * (@donnersm)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208881)
 * [@yorman](https://wordpress.org/support/users/yorman/) first of all thanks for
   looking into this ( also thanks to nazzilla) Actually, you are right, the code
   between the wp site and the stand alone site is the same. In the post above i
   simplyfied it to save everyone a lot of reading….I guess keeping it simple makes
   it more difficule to analyse 🙂
 * I took all the code from [http://www.judoles.nl/lesformulier](http://www.judoles.nl/lesformulier)
   and try to migratie it to wp. ( Dont mind the way i approach the database, i 
   know i can do it with wp also but i am concentrating on the innerhtml replacement
   this time)
 * in the header i put this:
 *     ```
       <head>
       <script>
       function showUser(str,naam) {
           if (str == "") {
               document.getElementById(naam).innerHTML = "";
               return;
            } else {
               if (window.XMLHttpRequest) {
                   // code for IE7+, Firefox, Chrome, Opera, Safari
                   xmlhttp = new XMLHttpRequest();
               } else {
                   // code for IE6, IE5
                   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
               xmlhttp.onreadystatechange = function() {
                   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                       document.getElementById(naam).innerHTML = xmlhttp.responseText;
                    }
               }
               xmlhttp.open("GET","getuser.php?q="+str,true);
               xmlhttp.send();
           }
       }
       </script>
       </head>
       <body>
       ```
   
 * Then, in the template file i put this code:
 *     ```
       <table width="100%" border="1"  id="maintable">
         <tr>
           <th colspan="4" scope="col"><div align="left">Lesvoorbereidingsformulier      ---         gemaakt met de lesplanner van www.judoles.nl</div></th>
         </tr>
         <tr>
           <td width="18%">Datum:</td>
           <td width="42%"><input type="date" id="Lesdatum" style=' border: hidden'> </td>
           <td width="8%">Doelgroep:</td>
           <td width="32%"><textarea cols="40" rows="1" style='border: hidden; overflow:hidden; resize: none'>Text1 form 1</textarea></td>
         </tr>
         <tr>
           <td>Beginsituatie</td>
           <td colspan="3" ><textarea cols="90" rows="2" style=' border: hidden; overflow:hidden; resize: none'>Text1 form 1</textarea></td>
         </tr>
         <tr>
           <td>Lesdoel(en)</td>
           <td colspan="3"><textarea cols="90" rows="2" style=' border: hidden; overflow:hidden; resize: none'>Text1 form 1</textarea></td>
         </tr>
       </table>
   
       <table width='100%' border='1' id="maintable2">
         <tr>
           <td width='7%'><strong>Tijd</strong></td>
           <td width='10%'><strong>Opbouw</strong></td>
           <td width='38%'><strong>Oefeningen</strong></td>
           <td width='28%'><strong>Organisatie</strong></td>
           <td width='17%'><strong>Aanwijzingen</strong></td>
         </tr>
        </table>
       <table width="100%" border="0" id="maintable3" class="middentabel">
         <tr>
           <th colspan="4" scope="col"><div align="left"><form>
   
        <select name="users" onChange="showUser(this.value,'txtHint')"  class="kleineletters">
          <option value="" title="mark was hier">Kies inleiding 1</option>
          <?php
       do {
       ?>
          <option value="<?php echo $row_Recordset1['ID']?>" title="<?php echo $row_Recordset1['_txtFld_2']?>"><?php echo $row_Recordset1['_txtFld_1']?></option>
          <?php
       } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
         $rows = mysql_num_rows($Recordset1);
         if($rows > 0) {
             mysql_data_seek($Recordset1, 0);
       	  $row_Recordset1 = mysql_fetch_assoc($Recordset1);
         }
       ?>
        </select>
       </form> </div></th>
   
         </tr>
       </table>
   
       <div id="txtHint" class="retourtxt" ><b>Kies hierboven de eerste inleiding van de les</b></div
       </boby>
       ```
   
 *  Thread Starter [donnersm](https://wordpress.org/support/users/donnersm/)
 * (@donnersm)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208888)
 * just a post for testing….as i cant seem to reply to this with long text???
 *  Thread Starter [donnersm](https://wordpress.org/support/users/donnersm/)
 * (@donnersm)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208889)
 * Actually the code is the same on wp and [http://www.judoles.nl/lesformulier](http://www.judoles.nl/lesformulier).
   
   I just chorten the number of tables on the form to keep the code to minimum. 
   Still cant get the innerhtml text replacement to work
 * header.php
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
       <head profile="http://gmpg.org/xfn/11">
                       <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
   
                       <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
   
                       <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
                       <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
   
                       <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
                       <!--[if IE]><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" media="screen" /><![endif]-->
   
                       <?php wp_head(); ?>
       <script>
       function showUser(str,naam) {
           if (str == "") {
               document.getElementById(naam).innerHTML = "";
               return;
            } else {
               if (window.XMLHttpRequest) {
                   // code for IE7+, Firefox, Chrome, Opera, Safari
                   xmlhttp = new XMLHttpRequest();
               } else {
                   // code for IE6, IE5
                   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
               xmlhttp.onreadystatechange = function() {
                   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                       document.getElementById(txtHint).innerHTML = xmlhttp.responseText;
                    }
               }
               xmlhttp.open("GET","getuser.php?q="+str,true);
               xmlhttp.send();
           }
       document.getElementById(txtHint).innerHTML = xmlhttp.responseText;
       }
       </script>
       <style>
       table {
           width: 100%;
           border-collapse: collapse;
       }
       th {text-align: left;}
       .kleineletters {
                       font-family: Verdana, Geneva, sans-serif;
                       font-size: xx-small;
                       font-style: italic;
                       color:#CCC;
                       border-style:none;
   
           }
       #opmerking {border: 0px solid black;}
       #maintable {border: 1px solid black;}
       #maintable2 {border: 1px solid black;}
       .middentabel {
                                      border-top-width: 1px;
                       border-right-width: 1px;
                       border-bottom-width: 1px;
                       border-left-width: 1px;
                       border-top-style: none;
                       border-right-style: solid;
                       border-bottom-style: none;
                       border-left-style: solid;
                       border-top-color: black;
                       border-right-color: black;
                       border-bottom-color: black;
                       border-left-color: black;
           }
       .retourtxt{
                       border-top-width: 1px;
                       border-right-width: 1px;
                       border-bottom-width: 1px;
                       border-left-width: 1px;
                       border-top-style: none;
                       border-right-style: solid;
                       border-bottom-style: none;
                       border-left-style: solid;
                       border-top-color: black;
                       border-right-color: black;
                       border-bottom-color: black;
                       border-left-color: black;
       }
       </style>
       </head>
       <body>
                       <div id="header">
                                      <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
                       <h2><span><?php bloginfo('description'); ?></span></h2>
                     <div id="nav">
                                      <ul>
       <li <?php if ( (!is_page()) && (!is_category()) )echo 'class="current_page_item"'; ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
       <li <?php if(is_category(4)) echo 'class="current_page_item"'; ?>><a href="?cat=4">Judospel</a></li>
       <li <?php if(is_category(5)) echo 'class="current_page_item"'; ?>><a href="?cat=5">Ander Spel</a></li>
       <li <?php if(is_category(3)) echo 'class="current_page_item"'; ?>><a href="?cat=3">Methodieken</a></li>
       <li <?php if(is_category(6)) echo 'class="current_page_item"'; ?>><a href="?cat=6">Themales</a></li>
       <li <?php if(is_category(7)) echo 'class="current_page_item"'; ?>><a href="?cat=7">Anders</a></li>
                                                      <?php wp_list_pages('title_li='); ?>
                                      </ul>
   
                             </div>
   
                       </div>
   
                       <div id="wrapper">
       ```
   
 * page_template.php
 *     ```
       <?php
       /*
       Template Name: lesformulier test
       */
       ?>
       <?php get_header(); ?>
   
                       <div id="content">
       <?php
       global $wpdb;
       $table_name = $wpdb->prefix . "extrafieldValue";
       $retrieve_data = $wpdb->get_results( "SELECT * FROM $table_name" );
       ?>
       <ul>
       <table width="100%" border="1"  id="maintable">
         <tr>
           <th colspan="4" scope="col"><div align="left">Lesvoorbereidingsformulier      ---         gemaakt met de lesplanner van www.judoles.nl</div></th>
         </tr>
         <tr>
           <td width="18%">Datum:</td>
           <td width="42%"><input type="date" id="Lesdatum" style=' border: hidden'> </td>
           <td width="8%">Doelgroep:</td>
           <td width="32%"><textarea cols="40" rows="1" style='border: hidden; overflow:hidden; resize: none'>Text1 form 1</textarea></td>
         </tr>
         <tr>
           <td>Beginsituatie</td>
           <td colspan="3" ><textarea cols="90" rows="2" style=' border: hidden; overflow:hidden; resize: none'>Text1 form 1</textarea></td>
         </tr>
         <tr>
           <td>Lesdoel(en)</td>
           <td colspan="3"><textarea cols="90" rows="2" style=' border: hidden; overflow:hidden; resize: none'>Text1 form 1</textarea></td>
         </tr>
       </table>
       <br>
       <table width='100%' border='1' id="maintable2">
         <tr>
           <td width='7%'><strong>Tijd</strong></td>
           <td width='10%'><strong>Opbouw</strong></td>
           <td width='38%'><strong>Oefeningen</strong></td>
           <td width='28%'><strong>Organisatie</strong></td>
           <td width='17%'><strong>Aanwijzingen</strong></td>
         </tr>
       </table>
       <table width="100%" border="0" id="maintable3" class="middentabel">
         <tr>
           <th colspan="4" scope="col">
       <div align="left"><form>
       <select name="users" onChange="showUser(this.value,'txtHint')"  class="kleineletters">
          <option value="" title="mark was hier">Kies inleiding 1</option>
   
       <?php
       foreach ($retrieve_data as $retrieved_data){ ?>
       <option value="<?php echo $retrieved_data->ID;?>" title="<?php echo $retrieved_data->_txtFld_2;?>"><?php echo $retrieved_data->_txtFld_1;?></option>
   
       <?php
       }
       ?>
       </select>
       </form> </div></th>
         </tr>
       </table>
       <div id="txtHint" class="retourtxt" ><b>Kies hierboven de eerste inleiding van de les</b></div>
   
       </ul>
   
                       </div>
   
       <?php get_sidebar(); ?>
       <?php get_footer(); ?>
       ```
   
 * footer.php
 *     ```
       </div>
                       <div id="footer">
                    <div class="rss">
       <a href="<?php bloginfo('rss2_url'); ?>" id="feed"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.jpg" alt="rss" /></a>
       <a href="http://twitter.com/#!/MarkDonners"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/twit.jpg" alt="twitter" /></a>
       </div>
               <div id="footer-inner">
                                      <p>
                                                      <?php bloginfo('name'); ?> is powered by
                                                      <a href="http://wordpress.org/">WordPress</a> |
                                                      <a href="<?php bloginfo('rss2_url'); ?>">Entries RSS</a>
                                                      and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments RSS</a>
   
                                      </p>
                                      <p>Copyright &copy; 2008. All right reserved. Theme Design by <a href="http://blog.gooddesignweb.com">Good Design Web</a></p>
                                      <p><a href="http://www.annotatie.nl/disclaimer.html">Disclaimer</a> </p>
                       </div></div>
       </body>
       </html>
       ```
   
 *  Thread Starter [donnersm](https://wordpress.org/support/users/donnersm/)
 * (@donnersm)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208890)
 * Actually the code is the same on wp and [http://www.judoles.nl/lesformulier](http://www.judoles.nl/lesformulier).
   
   I just chorten the number of tables on the form to keep the code to minimum. 
   Still cant get the innerhtml text replacement to work
 * cant reply to this topic with all code..
    See the header.php, template.phh and
   footer.php here: [http://www.judoles.nl/code.zip](http://www.judoles.nl/code.zip)
 *  Thread Starter [donnersm](https://wordpress.org/support/users/donnersm/)
 * (@donnersm)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208895)
 * o my …sorry for the spamming….seems to be a bit delay between posting and seeing
   it online….

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Innerhtml text replacement’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 7 replies
 * 3 participants
 * Last reply from: [donnersm](https://wordpress.org/support/users/donnersm/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/innerhtml-text-replacement/#post-6208895)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics