Ajax Add Selected Item To Array

dariussutherlan · 04-10-2012, 01:06 PM

Hi all

I hope someone can help/point me in the right direction of examples/tutorials/code.

I am displaying a list of items, each item will have an icon the user can click to add it's id to a session/cookie. I also want the icon to change when it's clicked.

Here is some code I've found I've edited for you all to laugh at :

Code:

<html>
<head>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>


<style type="text/css">
.contact-checkbox {
	position: absolute;
	top: 50px;
	right: 170px;
	width: 20px;
	cursor: pointer;
}
.contact-checkbox-checked {
	position: absolute;
	top: 50px;
	right: 170px;
	width: 20px;
	cursor: pointer;
}

</style>

</head>

<body>

<script type="text/javascript">	
    	//add to short list when check box clicked.
    	$("img.contact-checkbox").click(function () { 
        	var id = $(this).attr("id");
			$.post("contact_ids_create_session.php",{id_to_add:id},function(data) {
  			$('.result').html(data);
		});
			$("#"+id+"added").fadeIn(400);
    	});
    	$("img.contact-checkbox-checked").click(function () { 
       		var id = $(this).attr("id").replace('added', '');
       		$.post("contact_ids_delete.php",{idsToDelete:id});
			$("#"+id+"added").fadeOut(400);
			$("#"+id+"shortlist").fadeOut(700);
    	});
    

</script>

<img src="add-tog.jpg" class="contact-checkbox" id="100" alt="Add Item"/>
<img src="tog-added.jpg" class="contact-checkbox-checked" style="display:none" id="100added"  alt="Remove Item"/>
	

</body>
</html>

PHP TEST CODE : contact_ids_create_session.php & contact_ids_delete.php

PHP Code:


			
<?php

    $id = $_POST["id_to_add"];
    $idd = $_GET["id_to_add"];


?>

Nothing happens tho :-)

devnull69 · 04-10-2012, 01:40 PM

Your script code is above the elements that you want to access. Therefore you either have to move the code below those elements OR you'd have to use $(document).ready() to make sure the DOM has been loaded prior to accessing its elements

Code:

$(document).ready(function() {
   $('img.contact-checkbox').click(function () { 
      ...
   });
});

dariussutherlan · 04-10-2012, 02:06 PM

Absolutely Wonderful.

Seems fine now and returning ID.

Will build on that.

I am very very grateful. One of those simple things and I've been sat here for hours.