Calling a view through jquery and parsing html - php

Question

I have a page in php home.php and it has views something like this
home.php
<?php
?>
<div id="showView">
Show User
Show Car
</div>
<div id="userView">
<p>This is view where user profile is shown</p>
</div>
<div id="carView">
<p>This is view where user car is shown</p>
</div>
<script>
$(document).ready(function()
{
$("#user").click(function(e)
{
//This where I am confused
var car = $("#carView").html();
$("#showView").append(car);
});
});
</script>
Now I am confused that how to pick userView and append to showView I tried a bit of coding but it didn't help and it didn't show result. Moreover is there any way that when that userView is appended then its html is shown when I view-source a page?

Answer 1

You have two options:
1) you generate the html on the fly using jquery (Not recommended)
<div id="showView">
Show User
Show Car
<div id="view_content"></div>
</div>
<script>
$(document).ready(function()
{
$('.view_trigger').click(function () {
var viewHTML = '';
if ($(this).attr('id') == 'user') {
viewHTML = '<div id="userView"><p>This is view where user profile is shown</p></div>';
} else if ($(this).attr('id') == 'car') {
viewHTML = '<div id="userView"><p>This is view where user car is shown</p></div>';
}
$("#view_content").html(viewHTML);
});
});
</script>
2) show/hide the container on trigger
<div id="showView">
Show User
Show Car
</div>
<div id="userView" class="view_content" style="display:none">
<p>This is view where user profile is shown</p>
</div>
<div id="carView" class="view_content" style="display:none">
<p>This is view where user car is shown</p>
</div>
<script>
$(document).ready(function()
{
$('.view_trigger').click(function () {
var viewHTML = '';
$('[class=view_content]').hide();
if ($(this).attr('id') == 'user') {
$('#userView').show();
} else if ($(this).attr('id') == 'car') {
$('#carView').show();
}
});
});
</script>
I don't recommend any of these solutions, you should use MVC for a better code.