Innerhtml text replacement

donnersm
(@donnersm)

10 years, 11 months ago

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 )perfectly..just not as a wp template..
What am i missing here?

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

(@yorman)

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

nazzilla

(@nazzilla)

10 years, 11 months ago

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

Thread Starter

donnersm

(@donnersm)

10 years, 11 months ago

@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 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

(@donnersm)

10 years, 11 months ago

just a post for testing….as i cant seem to reply to this with long text???

Thread Starter

donnersm

(@donnersm)

10 years, 11 months ago

Actually the code is the same on wp and 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

(@donnersm)

10 years, 11 months ago

cant reply to this topic with all code..
See the header.php, template.phh and footer.php here:
http://www.judoles.nl/code.zip

Thread Starter

donnersm

(@donnersm)

10 years, 11 months ago

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.

Innerhtml text replacement

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics