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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    http://www.sussexweddingphotography.org.uk
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Ajax Add Selected Item To Array

    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 :-)
    Last edited by dariussutherlan; 04-10-2012 at 01:09 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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 () { 
          ...
       });
    });

  • Users who have thanked devnull69 for this post:

    dariussutherlan (04-10-2012)

  • #3
    New Coder
    Join Date
    Oct 2010
    Location
    http://www.sussexweddingphotography.org.uk
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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