Replace default content in div with detailed content

PHP
1

I have a page where I would like to display the menu of a restaurant using different categories e.a. Soup, Starters etc. By default there is a text coming from the database table content. This content should be replaced with content from the table menu depending on what link was clicked. I have a div called content

<div id="content"></div>

I load the content dynamically


<script type="text/javascript">
$(document).ready(function(){
  $("#content").load( "menu.php" );	
});
</script>

In have the following links on the page:


<div class="sidebar">
  <ul id="menu">
    <li><a href='?category_id=1'>Soepen/Soups</a></li>
    <li><a href='?category_id=2'>Voorgerechten/Appetizers</a></li>
    <li><a href='?category_id=3'>Hoofdgerechten/Main Courses</a></li>
    <li><a href='?category_id=4'>Menu's/Menus</a></li>
    <li><a href='?category_id=5'>Bijgerechten/Side Dishes</a></li>	
  </ul>
</div>

and I have the following queries on menu.php


<?php
  $i_page_id = 3;
  $qryContent = " SELECT title, content FROM content WHERE page_id = $i_page_id";	
					
  $category_id = filter_input(INPUT_GET, 'category_id', FILTER_SANITIZE_NUMBER_INT); 
  $qryMenu = " SELECT menu_item_id, menu_item, item_description FROM menu_items WHERE category_id = category_id";

  if ( ){
    while ($row = $result->fetch_assoc()) {
      echo "";
    }
  }
?>

But I have no idea how to echo this?

So to resume When landing on the page, by default the content from the query qryContent should be displayed. When one of the links is clicked the content from the query qryMenu should display.

Any help would be appreciated

2

I thought to be smart so I placed an extra if elseif around the existing if block:


<?php
$qryContent = " SELECT title, content FROM content WHERE page_id = $i_page";
$category_id = filter_input(INPUT_GET, 'category_id', FILTER_SANITIZE_NUMBER_INT);
$qryMenu = " SELECT menu_item_id, menu_item, item_description FROM menu_items WHERE category_id = category_id";

if (! $category_id) {
  if ($result = $mysqli->query($qryContent)) {
    while ($row = $result->fetch_assoc()) {
      echo "<h1>{$row['title']}</h1>
           {$row['content']}";
    }
  }
} elseif ($category_id) {	
    if ($result = $mysqli->query($qryMenu)) {
      while ($row = $result->fetch_assoc()) {
        echo "<h1>{$row['menu_item']}</h1>";
     }
  }
}
?>

and in the load function:


$(document).ready(function(){
  $("#content").load( "modules/site/menu_items.php" );	
  $("#menu").on("click", "a", function(e) {
    e.preventDefault();
    $("#content").load(this.href); 	
  });
});

But it wasn’t that smart after all because it isn’t working :frowning:

3

Well, this thread really has nothing to do with PHP and everything to do with jQuery.

I still dont think .load() does what people think it does. Based on this, it would appear that your event doesn’t get triggered. Are you perhaps looking for [URL=“http://api.jquery.com/click/”].click() instead?

4

Ok I got it using two files instead of one. So by default I load the text content for this page and when I click one of the links I load the menu.php with the right category_id


<div class="sidebar">
  <ul id="menu">
    <li><a href='menu.php?category_id=1'>Soepen/Soups</a></li>
    <li><a href='menu.php?category_id=2'>Voorgerechten/Appetizers</a></li>
    <li><a href='menu.php?category_id=3'>Hoofdgerechten/Main Courses</a></li>
    <li><a href='menu.php?category_id=4'>Menu's/Menus</a></li>
    <li><a href='menu.php?category_id=5'>Bijgerechten/Side Dishes</a></li>	
  </ul>
</div>

and for the load function as before:


$(document).ready(function(){
	$(".content").load( "modules/site/content.php" );	
  $("#menu").on("click", "a", function(e) {
    e.preventDefault();
    $(".content").load(this.href); 	
  });
});

:

It is probably possible with two queries in one file but I am happy with the result :slight_smile:

5

Hey donboe, I was just thinking about what you’re asking here (and the thread I helped you with yesterday)… are you actually generating the page with some default content? Relying on JS to load in your default content is not good practice, as your site is going to be broken for users who have JS disabled.

6

Hi fretburner. Thanks for the reply. :slight_smile: I should have thought about that indeed. I have adjusted it