Does ajax need a form to function?

JavaScript
1

Hi,
hope this is in the correct section and is not too stupid a question. Ive googled it but haven’t got an answer so here goes.

Iam trying to build a small gallery where users click on a picture and it brings back a panel with more info. Rather than preloading 20 panels worth of info i thought i’d ajax it.

Ive only just started with ajax and have a working script which will submit and return results but it only goes from a single form. I don’t want forms everywhere and would prefer something like

<a href=“#?id=4” onClick=‘ajaxFunction()’><img src=“1.jpgetc”></a>

for each pictures link. Is this even possible? this is the page that iam building and is as far as ive got. The ajax and panel functions are completely separate scripts so iam not sure if iam missing a trick by not combining them somehow. http://www.mcsuk.org/seaandme/

The first 2 images are linked and have separate forms but only return the same information despite having different values?!

Anyone have any suggestions how to do this or if iam going about this the wrong way or even a link to a good article on the subject.

hopefully ive explained this ok.
thanks

2

Thanks for the replies ive had a bit of play with the jquery api and have got a bit further. Ive managed to remove my original ajax script and work it in to the jquery function although i still have a way to go.

this is a simple page just to get everything working. When a link is clicked it returns the ajax data. This bit works fine except i can’t change the variables that iam sending to the query page.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../jquery.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
</head>

<body>
<a href="?age=perch#" onclick="ajaxFunction()" id="age" rel="perch">click me for perch</a>
<a href="?age=cod#" onclick="ajaxFunction()" id="age" rel="cod">click me for cod</a>

<div id="ajaxDiv">
test should appear here
</div>
</body>
</html>

this is the function iam trying to write

function ajaxFunction(){ 


var age = document.getElementById('age').rel;


$.get("../seaandme_query.php", { sex: "com", age: age },
   function(data){
    
	 var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = data;
   });


}

It works but its looking for the id by element and iam assuming is always finding the first id and using the rel=“” value so its not changing when i click the second link, just returns the same data.

How do i pass a unique value to the function? is there a way of using variables from a link eg href="?age=tuna#

heres the test page iam working on http://www.mcsuk.org/seaandme/ajax/ajax.php

thanks for your help

3

Since you’re already using jquery i’d highly recommend you use their ajax api.

But no, AJAX doesn’t require a form. If you look a bit more at jquery I think it will have the solutions to these issues.

4

You can store teh variable in the html tags and attrieve them using the attr() function

5

You don’t need a form to make an ajax request.

Ajax is just a particular technique of using javascript.

What doesn’t look right to me in your code, assuming that when an image is clicked, a panel with info for that image is returned by your ajax function - but you ajax function ajaxFunction() doesn’t have any paramaters passed to it so how does the ajax function know which image to return information for?

6

Hi
thanks for the responses. Ive had a look at the attr() function on this page http://api.jquery.com/attr/

It look like i would have the same problem as ive had before that it will pick up the first element on the page not the one thats being clicked on

ie

<a href=“#” title=“one”></a>
<a href=“#” title=“two”></a>
<a href=“#” title=“three”></a>

if i click on the second link it will find the first link and just return ‘one’ and never get to two or three.

What ive tried so far instead is picking up the anchor name from the url but iam getting a weird problem.

this is the code

$(document).ready(function(){

$(".btn-slide").click(function(){

var name = document.location.hash.substring(1);

$("#slide-panel").slideToggle("slow");




$.get("seaandme_query.php", { name: name },
   function(data){
     //alert("Data Loaded: " + data);
	 var ajaxDisplay = document.getElementById('ajaxDiv2');
			ajaxDisplay.innerHTML = data;
   });


});
		 
});

i was assuming that it should pick up the variable from #whatever which it seems to do but only after i close the panel.

If you look at this page http://www.mcsuk.org/seaandme you will see what i mean. If you click on one of the first two images in the block a panel will slide down and should using ajax return name and id number from the variable specified in the anchor link ie #alan. when you click to close the panel you will see the query is actually returned?? but not when you first click to open the panel.

Any ideas about how to get the variable to the script to execute when the panel opens? iam not understanding as in the code above i was thinking iam asking it to pick up the anchor name first.

Am i going about this all wrong. All i want to do is pass a unique variable to my php/ajax script

as always any help is appreciated.