[SOLVED] innerHTML Help

[tushar707]

Hello,

I decided to start a new post because it was not related to the other topic.  I am having trouble using innerHTML. How do I use php include command within innerHTML?  How do i use HTML within innerHTML?  Whenever I just copy and paste the html, it doesn't work!  Any help will be appreciated. 

 

Like can I do this

   <li><a href="#" onclick="document.getElementById('content').innerHTML = '<?php include("test.php"); ?>';">Home</a>  </li>

 

Or this?

<li><a href="#" onclick="document.getElementById('content').innerHTML = '<strong><em>This is a test</em></strong>';">Home</a>  </li>[

 

Because when I do it doesn't work.

 

[taith]

the first one... prolly wont work... as php is server side it would empty the contents of that file, into that string, if anything is even the teenyest bit out of place... errors... now the second one is much less complex, and prolly will work... however for both... you need onclick="javascript:document...;"

[tushar707]

If I just type in text, and nothing else it works perfectly the way I want to.  However, whenever I have html imbeded in the innerhtml command nothing works.  Am I using the quotations right?

 

For example this works:

<li><a href="#" onclick="document.getElementById('content').innerHTML = 'This is a test';">Home</a>  </li>[

 

But this does NOT:

 

<li><a href="#" onclick="document.getElementById('content').innerHTML = '<strong><em>This is a test</em></strong>';">Home</a>  </li>[

[marmite]

have you tried setting the code you want as innerhtml to a variable, and then using that?

 

e.g.

 

var newHTML = "<a href='/bulkview.php?id=champagne' title='greetings card'><img src='/images/homepage/1.jpg' width='100' height='100' border='0' alt='view greetings card' /></a>";
document.getElementById('area1').innerHTML = newHTML;

[xenophobia]

But this does NOT:

 

<li><a href="#" onclick="document.getElementById('content').innerHTML = '<strong><em>This is a test</em></strong>';">Home</a>  </li>[

I copied exactly what you do and implement the content id to a DIV element.

It's work perfectly. Try look for other factors. Your code is ok.

[tushar707]

okay.  That works fine.  However, can I attached php include within?  Also, I am having another problem.  I cannot attach a style within it.  What should I do.  I am looking for total flexibility.  If innerHTML cannot give me that, do you have any other recommendations?

[mainewoods]

if you inject a style using innerHTML, ie will only obey it if the style is last:

will work

<span class="somestyle">HELLO</span>
<style>
.somestyle {color:red;}
</style>

will not work

<style>
.somestyle {color:red;}
</style>
<span class="somestyle">HELLO</span>

 

if you use an include with innerHTML, the include will have to echo out the values and use urlencode() or htmlentities() with it:

include file:

$myhtml = '<span style="color:red;">hello</span>';
echo htmlentities($myhtml); 

[taith]

if you inject a style using innerHTML, ie will only obey it if the style is last:

will work

<span class="somestyle">HELLO</span>
<style>
.somestyle {color:red;}
</style>

will not work

<style>
.somestyle {color:red;}
</style>
<span class="somestyle">HELLO</span>

 

 

uuh... other way around... styles first ;-)

[tushar707]

is there any way I can do a php include command within innerhtml, because I am sort of new to this include command and am not sure what you mean by urlencode() or htmlentities()

[tushar707]

okay.  I dont think that innerHTML is going to work anymore, Because my menu is a little different.  innerHTML is not working anymore.  Is there a doOnClick thing for javascript that I can use to change the content.  There is an example of this at my-prana.com.  I really hope you can help me out with that.  Also, using javascript, can I put phpinclude within it?  Here is my menu.php

 

<dl id="menu">

	<dt onclick="javascript:montre('smenu1');"><a href="#">Home</a></dt>

	<dt onclick="javascript:montre('smenu2');"><a href="#">Our Programs</a></dt>
		<dd id="smenu2">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>

				<li><a href="#">Sous-Menu 2.3</a></li>
			</ul>
		</dd>	

	<dt onclick="javascript:montre('smenu3');"><a href="#">Resources</a></dt>
		<dd id="smenu3">
			<ul>
				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.1</a></li>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.1</a></li>
			</ul>
		</dd>

	<dt onclick="javascript:montre('smenu4');"><a href="#">Upcoming Events</a></dt>
		<dd id="smenu4">
			<ul>
				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.1</a></li>
			</ul>
		</dd>
<dt onclick="javascript:montre('smenu5');"><a href="#">Testimonials</a></dt>
  <dt onclick="javascript:montre('smenu6);"><a href="#">About Me</a></dt>
		<dt onclick="javascript:montre('smenu7');"><a href="#">Contact Us</a></dt>


</dl>

[mainewoods]

no actually taith, if you inject something into an element using innerHTML and what you inject also contains a style tag, the style tag has to be last or ie will not render it.  I know that for a fact because of experiments I have done before.  Just another one of those ridiculuos ie things.

 

tushar707 , If you want to transfer values from server side to client side to be used to change the contents of an item later by user action, start with just writing the server side value into a javascript variable, like this:

<script>
    var clientvar = "<?php echo $servervar; ?>";
</script>

clientvar will now contain a value written from the server side and can be innerHTML'ed at any time into a html tag.  Only one thing wrong with that, $servervar may contain characters that might break the javascript code, namely quote characters.  use the php function addslashes() to fix that problem:

<script>
    var clientvar = "<?php echo addslashes($servervar); ?>";
</script>

using the strategy above, you can transfer as much info from server side script to client side script as you want:

<script>
    var clientvar = "<?php echo addslashes($servervar); ?>";
    var clientvar2 = "<?php echo addslashes($servervar2); ?>";
    var clientvar3 = "<?php echo addslashes($servervar3); ?>";
</script>

 

[tushar707]

I am a little confused.  if you check out my-prana.com/test  you will see that there is a menu on the left and space for content on the right.  the content will be on different pages, but when someone click on the menu, on the content should be loaded again.  I am little confused how to use what you told me mainewoods.  Can you tell me exactly what to do on my menu.php file which I have included below. The php include command i want to use for the content is: <?php include("content.php"); ?>   

 

if this is the link

 

<dt onclick="javascript:montre('smenu1');"><a href="#">Home</a></dt>

 

What do I need to do to it exactly.  i am new to this, so all the help is appreciated. 

[mainewoods]

if you want to click on a link and have new content load into an area in the page without the page reloading, then you need ajax. make a post on the ajax board and bone up on ajax.