mamelepera mamelepera - 4 months ago 9
PHP Question

Outputting result of PHP function to specific HTML location with jQuery

I have this in my

index.php
:

<?php
require_once '/myFunctions.php';

output_layoutHead();
output_layoutHeader();
output_layoutHome();
output_layoutFooter();


These 4 functions basically generate my HTML, which looks similar to this:

<head>
//Metatags, title, CSS links, etc.
</head>
<body>
<div id="navbar">
<ul class="nav">
<li class="active"><a href="//call JS function">Home</a></li>
<li><a href="//call JS function">Contact</a></li>
<li><a href="//call JS function">Help</a></li>
</ul>
</div>

<div class="container" id="contentContainer">
<div id="content">
Homepage content
</div>
</div>

//JS script links, etc.
</body>


Function
output_layoutHome()
generates the entirety of
#contentContainer
. I also have functions for other pages called
output_layoutContact()
and
output_layoutHelp()
.

I basically want the content generated by the
output_layoutHome()
to disappear completely when Contact or Help button is clicked and instead the other function like
output_layoutContact()
or
output_layoutHelp()
to output content in it's place.

I realize I can remove entirety of
#contentContainer
with
$("#contentContainer").remove();
but I'm not sure how to output the result of an another function in it's place.

Can I get some pointers?

Answer

You can do a second file beside index.php and name it contact.php something like that:

<?php
require_once '/myFunctions.php';
output_layoutContact();

and then add an onclick handler to the contact button with something like that:

$( "#content" ).remove();
$( "#contentContainer" ).load( "contact.php" );

you could also specify the layout identifier as data in load-call and then conditionally output all content by index.php.