As I work on developing a photo sharing website with a layout similar to Pinterest, I am facing an issue. When I click on a category in the menu, the old content disappears but the new content does not show up. Interestingly, upon inspecting the elements using Chrome browser, I can see that the fetched contents are there.
I'm puzzled as to why the fetched content is not appearing in the specified div on the webpage.
Below is a snippet of the HTML code:
<div id="container">
<div class="main" id="main">
<ul id="tiles">
<li><img src="asd/12994.jpeg" /></li>
<li><img src="asd/12995.jpeg" /></li>
.
.
.
</ul>
</div>
</div>
To address this issue, I have implemented an ajax function to replace all contents within the div with the id "main". Here's the relevant ajax code:
$.ajax({
type:'POST',
url:'strip_all.php',
data: 'asa='+aq,
cache:false,
success:function(res) {
$('#cat_on_oven_popping').css('display','none');
$('#main').html(res);
}
});