Jump to content
rcwombat

Help with a dynamic loading page?

Recommended Posts

Hi all. I have recently used a HTML5 template to create my website with, I am happy with the results, and have found changing the code around to suit has been working fine. It is practically finished, apart from one part... I would like to have my products listing page to be dynamically loaded so that categories can be split up, but without a complete page refresh when changing category. What would be the best way to go about this? I havent been doing to much with web development (other than the editing of this template), so not sure what would be the best way to do this, javascript, AJAX, or is there another way? I can provide parts of code for the page if needed to clarify the page, but here is a picture of the said page as it currently stands, with some text added to explain what I would like done... Page_zps8310deb0.jpg

Share this post


Link to post
Share on other sites

Thanks niche, very informative link. I'm sure I would be able to get somewhere given me putting a bit of time in. My problem is time though, not sure I can put the time in to fully understand how it needs to work to be able to implement it correctly. Anyone wililng to assist in getting the foundation right that I can build on?

Share this post


Link to post
Share on other sites

We hear that a lot though you'll like knowing that the scripts are much easier than you might think. We've spent more than a day to get this far. I'll bet you can complete a successful script in just a few days given that you have minimal knowledge of js and php since most the of work's already done in the tutorial. Do you have a few days to learn how?

Share this post


Link to post
Share on other sites

Yeah well I pretty much have to, my business keeps me busy, and I am a full-time Uni student too, so time is just stupidly non-existant to me. But, I do realise that the time it will take for me to explain the usage etc to someone I probably would have been able to work it out myself. The most difficult part for me is working out how it will be "inserted" into the code thats already there.

Share this post


Link to post
Share on other sites

That's a good attitude. When you understand the parts of the code, it's pretty easy. Other people will explain this process differently though I generally think about the button that triggers the javascript that makes the ajax call that sends data to a php script, that sends output back to the same javascript, that makes the change on the user's screen. Viola! Where do you want to start in this process?

Share this post


Link to post
Share on other sites

Thanks for the assistance niche. The part that needs to trigger the reloading of the products description is this: <ul id="product-list" class="product-nav-list"><li><a href="#">Package Deals</a></li><li><a href="#">Touchscreen Terminals</a></li><li><a href="#">Touchscreen Monitors</a></li><li><a href="#">Receipt/Kitchen Printers</a></li>...... So if someone clicks on "Package Deals" then it needs to load those products, if they click on "Touchscreen Terminals" then the package deals are replaced with touchscreen terminals. The examples I have seen around the web seem to have the "loaded" part within the reference, which doesn't really make much sense and also makes the products.html rather large (with all products and images loaded on the first load and "hidden" until called). I would rather have seperate pages that would contain the info for each category, so a "product_package_deals.html" and "product_touchscreen_terminals.html" and so on. I am a little confused as to how to call the html and have it displayed where I want it to also, not sure it would retain the same style that is already there. The other problem is how to apply the "Filter" bar at the top, so that its content changes with each "page"

Share this post


Link to post
Share on other sites

Hey rcwombat, Instead of having many separate html pages for each product basically, what you can do is insert all your product information into a database via tables within the database. Then on the main product page of your site, you can query the database to get certain information about a product based on what the user clicked on to get information for. All of this can happen on one (same)page without even using ajax actually. Or you can have it set up where you show the product details on a separate page all together, just the details info about the product and even open it in a separate window so that the main product page is still up so that the user can go back to it.This would require you to understand/learn a server side language like PHP and databases, ie MySQL.

Share this post


Link to post
Share on other sites

Hi Don, When I re-write the whole site late next year I am planning on using full php/MySQL with shopping cart and everything more polished, but for now, I just need a page system, rather than a database system. I am not looking at anything to do with the database at the moment, its purely a web presence with basic information of products and services. I am not planning to need to greatly update products and services until I create a whole new site later. Also, I don't need to break it down to single components, so creating a database at the moment is not really necessary. There are too many products to have on a single page so they have to be broken up in some form, and if it is too difficult/awkward to have the "filter bar" there then I can take that out. I just need the pages to be seperate for each header that is on the nav bar on the left, and for them to display without re-loading the entire page. Thanks for the input though, and it will be the way the site goes eventually, but at the moment I just don't have the time (or money) to invest into the full php/MySQL way.

Share this post


Link to post
Share on other sites

Then, the code will be even easier since you just need to render the buttons for the available pages instead of the pages themselves.. Right?

Share this post


Link to post
Share on other sites

Yes, it should be relatively simple, but I have no idea where to start with integrating this within the code that is already there. I don't need help with organsing the structure of the products, simply assistance with the loading of a seperate page within the current page when clicking on one of the links in the left hand navigation bar. Simple way of explaining what I want to do is the site you directed me to, that works in EXACTLY the way I want mine to, when a user clicks on any of the links, the main body of the page is reloaded as per the direction of the link, and the rest of the page remains static.

Edited by rcwombat

Share this post


Link to post
Share on other sites

You'll need a database. do you know mysql or something like it?

Share this post


Link to post
Share on other sites

Then I suppose you'll have to hard code what you need. The next step is to understand what you meant in your OP by your use of the word dynamic. Please provide a specific example of what you meant. How many potential pages do you have?

Edited by niche

Share this post


Link to post
Share on other sites

Hmm, well, what I mean by dynamic web page can be described as from wikipedia, "generated at the time of access by a user or change as a result of interaction with the user." Thus, the "user" interacts by clicking on a link, in turn that causes a change in the displayed text and images within the main body of text/images in the page. A specific example is the website you directed me to, by clicking on the links the main body of the page changes to reflect the content of that link. The amount of pages is directly related to how many categories I have. Which, from the screenshot provided above, there are 12 hardware pages and further to what was on the screen shot, a total of 3 software pages and 4 services pages. A grand total of 19 seperate pages, which then can be easily added or changed by me by adding in a new link and a corresponding new page created to match it.

Share this post


Link to post
Share on other sites

You just need navigation. Navigation, by itself, probably isn't considered dynamic by most coders. So, going back to your OP, why not list the filters under each product range? I think that would be awkward, but anything more would probably require php as a minimum.

Share this post


Link to post
Share on other sites

Because I don't believe that doing what I want to do would be in any way complicated to put together by someone that knows how to write javascript. I can't imagine it would take long at all as it is merely re-directing the body of the page to an .html page. I have been extremely surprised by the answers I have received from this question (and to be honest, the responses here have been the most informative! Which, despite the perhaps negative tone here, I am actually grateful for), I have posted this same question on many different sites and the responses I have received have at best been, "well, you should do this instead", or "If it were me I'd just use an e-commerce site" or "convert your website to Wordpress". These types of comments are indicative of the lack of understanding of the question and a persons' unreasonably high perspective of their knowledge of this subject. (Again, not pointing fingers at anyone here) I am, to be perfectly honest, completely stunned by the responses for this request for help, I have received little more than opinions of what someone else would do. Not one person would have any understanding of the position that I am in with getting my website up. The website is, and always has been from the initial design perspective, a means of displaying my business on the web in a professional manner. It is not to be an easy to manage system, such as joomla or wordpress, nor is it needed to be a database of my products to be sold online. I have spent the time necessary to have a fully working site apart from the products page that I believe to maintain the professional feel of the rest of the site would need to be loaded as per category without the need to refresh the entire page. The idea behind posting for assistance was two-fold: One reason was that I like to understand as much about what I am doing as possible, and engaging with developers directly would yield me a greater understanding of what was happening as a whole. The second was that I believe that the online community can be very helpful and far less open for shady deals and hidden agendas when in an open and publicly visible environment such as this. To elaborate, the whole reason I am doing the website myself is that I had actually paid a deposit to a person whom which I participated in the same business course with and that apparently was operating a business as a website developer. But, once paying the deposit he decided that giving me false deadlines and avoiding my attempts at contact was better than actually doing the job. I was actually hoping for a developer that had some knowledge and experience in exactly this type of coding that would be able to assist me with some straight answers. I know it can be done, as I have seen many examples all around the web. I have now requested pricing from website developers to see how much they would do it for, but, again it really isn't going to be as beneficial to me than if I had of been able to put it together myself with a little bit of assistance. Paying someone was never an issue, and if someone had of posted and said they could help me for a fee I would have not hesitated in paying for their help.

Share this post


Link to post
Share on other sites

Wow. We're trying to work with you on the basis that you probably need more familiarity with code. Post your complete code, be prepared to be sent to the tutorials when you need more context, and we'll help you get the answer you need. With very very few exceptions, you shouldn't expect that code will be given without demonstrating that you're very close to being able to write it yourself. That's how forums work. So, please post your code, show us where (on your code) you need to make the change, show us the change you tried to make, and viola!, you'll be directed to the appropriate tutorial or you'll get assistance with your code.

Edited by niche

Share this post


Link to post
Share on other sites

Ok, so I went off and followed up and found a out few things and got it working, but it works fine on Firefox, and IE (once allowing scripts to run), but it doesn't work on Opera.... Below are the parts of the code that I added in to get the effect I needed, is anyone able to enlighten me as to why it won't work in Opera? Below is the javascript that I placed at the top of the code, I got this from http://www.coursesweb.net/jquery/ajax-load <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script><script type="text/javascript"><!--$(document).ready(function() { // select all the links with class="lnk", when one of them is clicked, get its "href" value // load the content from that URL and place it into the tag with id="content" $('a.lnk').click(function() { var url = $(this).attr('href'); $('#content').load(url); return false; });});--></script> Below is the part of code that calls the page that has the html for that product category: <!-- Left Sidebar --><aside id="sidebar" class="left-sidebar"> <section class="panel"> <h2><strong>PRODUCT RANGE</strong></h2> <div class="columns"> <h4><strong>Hardware</strong></h4> <ul id="product-list" class="product-nav-list"> <li><a href="#">Package Deals</a></li> <li><a href="product_touchscreen_terminals.html" title="Touchscreen Terminals" class="lnk">Touchscreen Terminals</a></li> <li><a href="product_touchscreen_monitors.html" title="Touchscreen Monitors" class="lnk">Touchscreen Monitors</a></li> <li><a href="product_receipt_kitchen_printers.html" title="Receipt Printers" class="lnk">Receipt & Kitchen Printers</a></li> And this is the part of the code that places the contents of "content" into the page. <div id="content">Click on links to the left to see each each category</div> This works exactly how I want it to for the loading of each category, but obviously there is something I have missed in relation to it not working in Opera.... Opera basically ignores the action of clicking the link, it does nothing... If however, I right-click and "Open in background tab" it will then display the linked to page, as a standard page (not part of the formating of the rest of the site, just the content of the .html file)I know that having it working in IE and Firefox is a major percentage of browsers, but I am an Opera user and really want it to work in Opera. (I haven't tested in Chome or Safari yet) Any ideas?

Share this post


Link to post
Share on other sites

There's nothing better than an apology to smooth the way. Post #19 doesn't sound very apologetic after your number #17. You'll always catch more bees with honey. http://w3schools.inv...uncement=9&f=50

Edited by niche

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...