SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replace default content in div with detailed content

    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
    HTML Code:
    <div id="content"></div>
    I load the content dynamically
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
      $("#content").load( "menu.php" );	
    });
    </script>
    In have the following links on the page:
    HTML Code:
    <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
    Code:
    <?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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought to be smart so I placed an extra if elseif around the existing if block:
    Code:
    <?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:
    Code:
    $(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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    73 Post(s)
    Tagged
    0 Thread(s)
    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 .click() instead?
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <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:
    Code:
    $(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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,436
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    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. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fretburner. Thanks for the reply. I should have thought about that indeed. I have adjusted it
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •