fiddle works, but html doesn't

[Q695]

fiddle:

http://jsfiddle.net/v9s6d/

 

on page:

//js (javscripts.js) page:
<script TYPE='text/javascript'>
    function whitespace() {
        var new_html = document.getElementById('new_html').value;
        document.getElementById('bubble').innerHTML = new_html;
    }
</script>



//header stuff:
<script type='text/javascript' src='javascripts.php'></script>

//body stuff:
<p>Welcome to the site <b ID='bubble'>dude</b>
</p>
<INPUT TYPE='text' ID='new_html' VALUE='Enter Text Here' />
<INPUT TYPE='button' ONCLICK='whitespace()' VALUE='Change Text' />

Problem:

When I run the fiddle it works, but when I run the javascript, the dynamic changing doesn't work.

 

Goal:

make a function that can change the bubble data when I click the corresponding link

[kicken]

Off hand I see that your script tag references javascripts.php but your comment says the code is in javascripts.js. Make sure you have the correct filename. The external script file should not have any <script> tags either.

[Q695]

Stripping the <script> from the js solved it .

[Q695]

Now I need to get it to load various HTML into the javascript to produce in the "bubble".

[Q695]

Think similar to iframe for this example:

viewing: a.php

click to load: b.php

loads: b.php

text chancges: a.php goes away, then b.php is the only one visible

Edited March 27, 2014 by Q695

[kicken]

Do an ajax request to grab the HTML you want, then just stick it into the element with innerHTML. jQuery makes this easy with their .load method:

$('#bubble').load('b.php');

[Q695]

I was at a node.js (MNjs) meet up tonight, and the keynote speaker recommended doing a PJAX function to load the page, because I'm thinking a 1 page architecture with different pages that can be ran in, and out on an onclick..

 

 

Do an ajax request to grab the HTML you want, then just stick it into the element with innerHTML. jQuery makes this easy with their .load method:

$('#bubble').load('b.php');

The above won't load the whole page at once?  I'll have to try the code.

[Q695]

I figured out this code is compliant, but it shows nothing on the browser window:

<script type='text/plain' src='applets/b.php'></script>

Edited March 28, 2014 by Q695

[Q695]

The JS for this would be something like:

//http://www.tizag.com/javascriptT/javascript-innerHTML.php
    function whitespace() {
        var new_html=('#bubble').load('new_html');
//        var new_html = document.getElementById('new_html').value;
        document.getElementById('bubble').innerHTML = new_html;
    }

the menu would be like this:

echo"<div align='left'>
    <ul>
        <li>menu      tester<ul>
            <li><a href='?'>Home</a></li>
            <li><a href='?'>Tools</a>
                <ul>";
                switch(isset($_SESSION['id'])){
                    case TRUE: echo"<li><a href id='new_html' onclick='whitespace()' value='?action=logout'>log out</a></li>"; break;
                    case FALSE: echo"<li><a href id='new_html' onclick='whitespace()' value='?action=login'>log in</a></li>"; break;
                }
                    echo"
                    <li><a href id='new_html' onclick='whitespace()' value='?page=calendar'>calender</a></li>
                    <li><a href id='new_html' onclick='whitespace()' value='?page=batch_mailer'>batch mailer</a></li>
                    <li><a href id='new_html' onclick='whitespace()' value='?page=directory'>directory</a></li>
                </ul>
            </li>
        </ul></li>
    </ul>
</div>
";