Search code examples
csswebgalleryhelpercatalog

noobie web-builder, about building html gallery

i asked couple days ago and i realised my question wasnt clear enough. so ill ask it again more clearly. i'm about to finish a website for local business,my website is based on bootstrap 3,and a little bit of jquery.im now working on the web catalog.Im searching for dynamic way to show 20 products each time,,without making new html page for each 20 product.im not looking for the code for it, im just looking for a direction from you guys, cuz it seems that i cant find any good idea, and i have to finish it until thursday. thank you guys. ! (:

Solution

  • OK, there are two files that you need to move to your server.

    The first is the .html file that does the "work" - it is below. The salient points are:

    1. Standard HTML file with the typical header containing the usual styling, title, and links to the Google CDN library.

    2. Button inside a div - the div allows the button to be moved around.

    3. A div to contain the data (.putmehere).

    4. The javascript at the bottom - "ready function" that all pages should have, ".on('click' " to start the ajax call, and the ajax call.

    The presidents.txt file is just a list of all the presidents I found on the internet. You'll have to make something more organized and you'll have to figure out a way of parsing it.

    Both of the files should be moved to your server in the same subdirectory. Then from your browser, just put in the name of the html file, hit enter and you're ready to go!

    JS

    <!DOCTYPE html>
<html>
<head>

<title>text file read</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<style>

.buttonholder {
          width: 150px;
          height: 40px;
          margin: 10px auto;
}
.putmehere {
  width: 400px;
  background-color: lightblue;
  margin: 10px auto;
}
</style>

</head>
<body>

<div class='buttonholder'>
  <button id='clickme'>CLICK ME</button>
</div>

<div class='putmehere'></div>

<script>
$(document).ready(function(){
      $('#clickme').on('click', function(){
                                           $.ajax({
                                                   url: "presidents.txt",
                                              dataType: "text"
                                                   })
                                                     .done(function(data){
                                                                          console.log( data );
                                                                          $('.putmehere').html( data );
                                                                          });
                                                    });//end ajax
                             });//end ready function

</script>
</body>
</html>