Ajax prototype.js query

@DoppleFeb 22.2007

Hi There. I have a quick question. Can someone explain to me (I have been through the documentation at ~~[url]~~http://www.prototypejs.org/learn/introduction-to-ajax[/url] and am stuill no further forward)
Where should I place the following code on my page?

[CODE]new Ajax.Updater(‘products’, ‘testquery.php’, { method: ‘get’, insertion: Insertion.Top }); [/CODE]

Below is my page and I wonder if someone could tell me where to place it
testdiv is where I want the info to be fed into.

[code=html]<?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head> <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /> <link href=”includes/initial.css” rel=”stylesheet” type=”text/css” /> <link href=”includes/style.css” rel=”stylesheet” type=”text/css” /> <script src=”javascripts/prototype.js” type=”text/javascript”></script> <script src=”javascripts/scriptaculous.js” type=”text/javascript”></script> <title></title>

</head>

<body>

<div id=”wrapper”> <h1>MoggerBlogger V0.01 BETA</h1> <ul> <li><a href=”gallery.php”>Gallery</a></li> <li><a href=”forum.php”>Forum</a></li> </ul>

<div id=”testdiv”>

</div>

</div> </body> </html>[/code]

to post a comment

JavaScript

6 Comments(s) _↴

@A1ien51Feb 22.2007 — #new Ajax.Updater('products', 'testquery.php', { method: 'get', insertion: Insertion.Top });

products is the id of the div you want to update so you would want to change that to testDiv.

You want to call this onload of the page.

Eric

@DoppleauthorFeb 22.2007 — #You want to call this onload of the page.
[/QUOTE]
That's what I needed.

Yeah I do actually have it as testdiv on my server but I copied that quickly from the prototype.js page before I left work.

Thank you so much Eric.

@DoppleauthorFeb 23.2007 — #I must be missing something here. I tried calling Ajax.PeriodicalUpdater (not Ajax.Updater like I originally said.) in <body onload=""> which didn't work so then I created a function "testit" which also doesn't work. Below is everything I have.

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
  <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
   <title>Ajax test script</title>
   <script type="text/javascript">
   function testit(){
   new Ajax.PeriodicalUpdater('testdiv', 'ajax.php', 
   {
   method: 'get',
   insertion: Insertion.Top,
   frequency: 1,
   decay: 2 
   });
   }
 
   </script>
  </head>
 
  <body onload="javascript:testit()">
 
   <div id="wrapper">
   <h1>MoggerBlogger V0.01 BETA</h1>
   <ul>
   <li><a href="gallery.php">Gallery</a></li>
   <li><a href="forum.php">Forum</a></li>
   </ul>
 
   <div id="testdiv">
 
   </div>
 
   </div>
  </body>
 </html>[/CODE]

@DoppleauthorFeb 23.2007 — #I suppose I could always link to prototype.js in my head tags. That might work.

Doy!

:rolleyes:

@DoppleauthorFeb 23.2007 — #Ok, even after linking to prototype.js it wasn't working. I though, ok I'll get the most recent copy to see if there is a problem with the js file. went to delete my old version and lo and behold, the file wasn't there. I had uploaded scriptaculous instead.

What a ninny. Anyway. All is working fine now so if anyone cares here is my code.

It's surprising how easy it is if you just spend a few hours on it.

test.php

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
  <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <link href="includes/initial.css" rel="stylesheet" type="text/css" />
   <link href="includes/style.css" rel="stylesheet" type="text/css" />
   <script src="includes/prototype.js" type="text/javascript"></script>
   <script src="includes/scriptaculous.js" type="text/javascript"></script>
   <title>Ajax test script</title>
   <script type="text/javascript">
   testit = function (id,url){
   url  = '/ajax.php?BogusVariable=' + new Date;
   new Ajax.PeriodicalUpdater(id, url, 
   {
   method: 'get',
   frequency: 1,
   decay: 2 
   });
   }
 
   </script>
  </head>
 
  <body onload="javascript:testit('testdiv','/ajax.php')">
 
   <div id="wrapper">
   <h1>MoggerBlogger V0.01 BETA</h1>
   <ul>
   <li><a href="gallery.php">Gallery</a></li>
   <li><a href="forum.php">Forum</a></li>
   </ul>
 
   <div id="testdiv">
 
   </div>
   </div>
  </body>
 </html>
 [/code]

ajax.php

[CODE]<?php
 include( "includes/functions.php" );
 connectDB();
 $sql = 'SELECT cat_id,cat_name FROM a_gallery_categories order by cat_id asc';
 $result = mysql_query($sql);
 while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
 echo "<a href='gallerycategory.php?id={$row['cat_id']}'>{$row['cat_name']}</a><br />n
 ";
 }
 ?>[/CODE]

[Edit] - bogus variable added on Bokeh's advice.

Bokeh - the loadXMLDoc(url) function stopped the fetching completely.

Thanks. [end edit]

@DoppleauthorFeb 23.2007 — #Argh. Ok, although the script works in as much as it retreives data from a sql query in a php script, if the data is updated on the database, the results don't update in the div being fed by Ajax. Even if I refreshed the test.php page.

What I had to do was bring up ajax.php (source of data with sql query) into a seperate browser window and then refresh the page. Once the extra data appeared on ajax.php then it automatically updated. What I am wondering though is why wouldn't it bring in the new data until I physically went in and refreshed the page with the sql query on it. Kind of defeats the purpose.

Also in #JavaScript _↴

alert box changing dynamic url into static url understanding some Javascript

Success!

Help @Dopple spread the word by sharing this article on Twitter...

Tweet This

Ajax prototype.js query

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Ajax prototype.js query

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴