Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation click div, update another, js, jquery or ajax?

    Hi all,

    I'm currently working on a website where it has a left and right column. the left column shows 4 products in divs and the id of the div contains the id of the product which is pulled from the mysql.

    I am just wondering what language or method i need to learn/use so that when someone clicks on one of the products in the left column it then updates the column on the right with more of the product details such as a description which will be pulled from the database, price, sizes etc?

    Here is the code for the left column for the products:

    Code:
    <div class="leisure-kit" id="leisure-kit-24">
    		<img src="../images/button-polo-small.png" alt="Test Shirt" width="190" ><br>
    		<p class="title">Test Shirt</p>
    		</div><div class="leisure-kit" id="leisure-kit-25">
    		<img src="../images/tracksuit-small.png" alt="Test Tracksuit" width="190" ><br>
    		<p class="title">Test Tracksuit</p>
    		</div><div class="leisure-kit" id="leisure-kit-26">
    		<img src="../images/tracksuit-small.png" alt="Test Tracksuit" width="190" ><br>
    		<p class="title">Test Tracksuit</p>
    		</div><div class="leisure-kit" id="leisure-kit-27">
    		<img src="../images/button-polo-small.png" alt="Test Shirt" width="190" ><br>
    		<p class="title">Test Shirt</p>
    		</div>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    This would normally be done (e.g for a shopping cart) by javascript running an ajax call to your database, and updating the right column. You could run this with 'pure' javascript, or with jQuery. The ajax call would typically call a PHP script to retrieve the data from your db.

    The above approach won't work if the user has js disabled, of course. This may not be a concern, and most shopping cart products these days rely solely on javascript for this 'add to cart' process.

    If you are concerned about the js disabled case, then you would write the page in a way that works if js is disabled, a form is submitted and the page would refresh with the right column populated. If js is enabled, the ajax process runs, the js stops the whole page refreshing, and just updates the right column.

    Hope that helps.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    tim967 (04-19-2013)


  •  

    Posting Permissions

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