Results 1 to 7 of 7

Thread: Dynamic Ajax Content - Update Parent Div from Child

  1. #1
    Join Date
    Nov 2015
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content - Update Parent Div from Child

    1) Script Title: Dynamic Ajax Content

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    3) Describe problem:

    Hi
    I am trying to update a parent element dynamically from child.

    Click image for larger version. 

Name:	EX.jpg 
Views:	848 
Size:	20.8 KB 
ID:	5737

    From http://www.dynamicdrive.com/dynamici...jaxcontent.htm I clicked "Ferrari Page" from the left navigation menu and opened the page titled "Ferrari Testarossa"
    Now I want to click on the Car Image and on click a <div> in parent window should display how many times the image was clicked. (attached screenshot)

    Could you please help?

    Regards
    Roy

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It sounds like you're looking for a click counter so maybe try Googling for that term and look for something that stores hits in an SQL database or flat file (text file)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    sroy (11-15-2015)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,818
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    Do you want total_clicked to be stored (remembered after you shutdown the computer)?

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    If you need further help with the setup, please post back with details of your chosen script and somebody can take a look.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,818
    Thanks
    49
    Thanked 237 Times in 230 Posts
    Blog Entries
    56

    Default

    Sroy, the Dynamic Ajax Content script is very old. You're better served with modern jquery. I use it in the lines below. Put the following files in the same folder. They do what you want (I think):

    index.html (main page)
    Code:
    <!doctype html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--<meta name="viewport" content="user-scalable=no">-->
    
    <title>Cars</title>
    
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
    <style>
    body {margin:0; padding:10%; padding-top:30px; padding-bottom: 10px; font-family: arial; font-size: 14px; line-height: 25px }
    hr {border-top: 0}
    </style>
    
    <script>
    var porsche=0, ferrari=0, aston=0
    </script>
    
    </head>
    
    <body>
    
    <div id="leftcolumn" style="display: inline-block; vertical-align: top; width: 47%; text-align: left; border: 1px solid black; padding: 10px">
    <a href="javascript: void(0)" onclick="$('#rightcolumn').load('porsche.html'); return false">Porsche Page</a><hr>
    <a href="javascript: void(0)" onclick="$('#rightcolumn').load('ferrari.html'); return false">Ferrari Page</a><hr>
    <a href="javascript: void(0)" onclick="$('#rightcolumn').load('aston.html'); return false">Aston Martin Page</a><hr><br>
    
    <div id="porsche_clicked">Total Porsche clicked: <span style="font-weight: bold" id="porsche_clicked_total">0</span></div>
    <div id="ferrari_clicked">Total Ferrari clicked: <span style="font-weight: bold" id="ferrari_clicked_total">0</span></div>
    <div id="aston_clicked">Total Aston Martin clicked: <span style="font-weight: bold" id="aston_clicked_total">0</span></div>
    
    </div>
    
    
    <div id="rightcolumn" style="display: inline-block; vertical-align: top; width: 47%; text-align: left; border: 1px solid black; padding: 10px">
    <h3 style="margin-top: 0">Choose a page to load.</h3>
    </div>
    
    <script>
    function height_right()
    {
    document.getElementById('rightcolumn').style.minHeight=document.getElementById('leftcolumn').clientHeight-20+'px'
    }
    height_right()
    </script>
    
    </body>
    
    </html>
    porsche.html:
    Code:
    <!doctype html>
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--<meta name="viewport" content="user-scalable=no">-->
    
    <title>Porsche</title>
    
    </head>
    
    <body>
    
    <img style="border:0; width: 100%" alt="" src="http://www.dynamicdrive.com/dynamicindex17/ajaxfiles/porschegt.jpg" onclick="porsche=porsche+1; document.getElementById('porsche_clicked_total').innerHTML=porsche">
    <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
    <p style="line-height: 17px">The Carrera GT has a 5.7 litre V10 internal combustion engine that produces 
      605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100 
      km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph). 
      With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only 
      offered with a six-speed manual transmission, in contrast to its rival the 
      Ferrari Enzo that is only offered with sequential manual transmission. Also 
      the Carrera GT is significantly less expensive than the Ferrari Enzo. The 
      Ferrari Enzo is priced around €660,000 to the Carrera GT's €440,000. The 
      Carrera GT is known for its high quality and reliability which makes it one of 
      the best supercars ever. [<a href="http://en.wikipedia.org/wiki/Porsche_Carrera_GT">source</a>]</p>
    
    </body>
    
    </html>
    ferrari.html:
    Code:
    <!doctype html>
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--<meta name="viewport" content="user-scalable=no">-->
    
    <title>Ferrari</title>
    
    </head>
    
    <body>
    
    <img style="border:0; width: 100%" alt="" src="http://www.dynamicdrive.com/dynamicindex17/ajaxfiles/ferrari.jpg" onclick="ferrari=ferrari+1; document.getElementById('ferrari_clicked_total').innerHTML=ferrari">
    <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
    <p style="line-height: 17px">The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari. 
      The name, which means &quot;red head&quot;, comes from the red painted cylinder heads on 
      the flat-12 engine. The engine was technically a 180 V engine since it shared 
      flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291 
      kW), and the car won many comparison tests and admirers - it was featured on 
      the cover of Road &amp; Track magazine nine times in just five years. Almost 
      10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the 
      most common Ferrari models despite its high price and exotic design. [<a href="http://en.wikipedia.org/wiki/Ferrari_Testarossa#Testarossa">source</a>]</p>
    
    </body>
    
    </html>
    aston.html:
    Code:
    <!doctype html>
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!--<meta name="viewport" content="user-scalable=no">-->
    
    <title>Aston</title>
    
    </head>
    
    <body>
    
    <img style="border:0; width: 100%" alt=""  src="http://www.dynamicdrive.com/dynamicindex17/ajaxfiles/aston.jpg" onclick="aston=aston+1; document.getElementById('aston_clicked_total').innerHTML=aston">
    <h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Aston Martin V8</h3>
    <p style="line-height: 17px">The new Aston Martin V8 Vantage was first seen at the Geneva Motor Show in 
    2005. The two seat, two door coupe has a bonded aluminium structure for strength 
    and lightness. The car is powered by a 4.3 L quad-cam 32-valve V8 which produces 
    380 hp (283 kW) at 7000 rpm and 302 ft.lbf (409 N.m) at 5000 rpm. This engine is 
    unique to Aston Martin and features race-style dry-sump lubrication, which 
    enables it to be mounted low to lower the centre of gravity. The car can 
    accelerate to 60 mph (97 km/h) in 4.9 seconds.<p>The V8 Vantage will cost 
    79,000 or €104,000 when it goes on sale towards the end of summer 2005 and is 
    intended to compete with the Porsche 911. [<a href="http://en.wikipedia.org/wiki/Aston_Martin_V8_Vantage_(2005)">source</a>]</p>
    
    </body>
    
    </html>
    I can put a demo on my server if you want. The values for total clicked only hold for one session. Tell me if you want them to be stored for multiple sessions.
    Last edited by molendijk; 11-16-2015 at 02:10 PM.

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Your post inspired me to write a Click Counter. Counts are incremented on the page in real time and stored in a text file on the server: http://www.dynamicdrive.com/forums/e...)-AJAX-amp-PHP
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    Jun 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,
    I registered here just to thank you for the counter code, the best!

    There was an issue with a PHP Notice: Undefined offset: 1, I presume because of the new line at the bottom of the txt file, but I fixed it with a short line.
    In the counter.php I replaced "$line = explode('||', fgets($fh));" with "var $maxValues = 2; $line = array_pad(explode('||', fgets($fh), $maxValues ), $maxValues, null);", to get only the lines with values. I'm not a coder and I'm not sure if this is a bulletproof solution, but it works great for me.

    Anyway, thanks again. Awesome code! A fan of Dynamic Drive since 2007.
    Levi

Similar Threads

  1. Replies: 2
    Last Post: 01-23-2010, 01:25 AM
  2. PHP Form - Need selection from child to update parent
    By lelyea in forum Looking for such a script or service
    Replies: 0
    Last Post: 02-11-2009, 03:48 PM
  3. Dynamic Ajax Content - loading content in parent page DIV - How???
    By artguy101 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-10-2008, 02:06 AM
  4. Child Iframe resizing another Child Iframe window in a parent.
    By Adonias_d in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-16-2007, 12:11 AM
  5. Replies: 0
    Last Post: 02-28-2007, 07:26 PM

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
  •