Correct syntax for innerHTML to change DIV content with php include statement

Question

I am working on a revamp of my companies website, a js vertical scrolling menu of buttons on the left are links to change the contents of the main div under the header. I have it set up with php include statements right now, which works, but every time it reloads the whole page, so the scrolling menu on the left resets to the top of the list, losing the visitors place.

You can see the prototype at http://www.nbtc.org/nv, click on 'Bicycling' or 'Carpool' to see it in action.

Instead of doing that I want to use js to change the contents of the div with innerHTML, I want one function where the link includes the variable, so the link would look like:

<a class="button" href="javascript:changecontent(bike)">Bicycling</a>

The following function would than run:

<script type="text/javascript">
function changecontent(var1)
{
document.getElementById('content').innerHTML="<?php include(" var1 .php"); ?>";
}
</script>

And the div with the id'content' would change to include bike.php. Clicking a different link would change the div to something else.

I am new to this, so please help me with the syntax of the script, I know I have to separate out the 'var1' in the function statement but I don't know how.

This seems like a straight solution, but if there is a better way I am all ears. The vertical scrolling menu already uses jquery, and I read about the 'load' function, maybe that would be better?

Thanks for your help! Brenden

Sampson · Accepted Answer · 2012-05-08 02:00:36Z

1

$.load would definitely be good here.

$(function(){
    $(".menutable").on("click", ".button", function(event){
        event.preventDefault();
        $("#content1").load(event.target.href);
    }); 
});

Then change all of your links to contain their actual destination in the href value:

<a class="button" href="bike.php">Bicycling</a>

Demo: http://jsbin.com/uyasux/edit#javascript,html

edited May 8, 2012 at 2:00

answered May 4, 2012 at 3:43

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brenden McDougal Over a year ago

I am implementing it just as you have it set up in the example, but it isn't working. It is up and live at the website in the first post with the 'Bicycling' as the test link. I only changed the class 'button' to 'button1' and 'menutable' to 'menutable1' so this function is separate from the classes that dress the menu. If that's not necessary I will change it back once we get it to work. Thanks in advance Jonathan for your help!

Sampson Over a year ago

@BrendenMcDougal You'll need to run it within $(document).ready() like your other JavaScript on the page. This is because the browser executes it before menutable1 and button1 even exist. I've updated my answer above with code that will work.

Brenden McDougal Over a year ago

Yes! That's all it needed. Fantastic. Thanks again for your help and the quick reply!

Collectives™ on Stack Overflow

Correct syntax for innerHTML to change DIV content with php include statement

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related