how to create an function using jquery live? [Solved]

Question

Hey all

i am trying to create a function that well keep the user in lightbox images while he adds to cart, for a demo you can visit

secure.sabayafrah.com username: mahmud password: mahmud

when you click at any image it well enlarge using lightbox v2, so when the user clicks at the image add, it well refresh the page, when i asked about it at jcart support form they informed me to use jquery live, but i dont know how to do it but as far as i tried this code which i used but still nothing is happening

        jQuery(function($) {

$('#button') 
    .livequery(eventType, function(event) { 
        alert('clicked'); // to check if it works or not
        return false; 
    }); 
 });

i also used

jQuery(function($) {

$('input=[name=addto') 
    .livequery(eventType, function(event) { 
        alert('clicked'); // to check if it works or not
        return false; 
    }); 
 });

yet nothing worked

for code to create those images

http://pasite.org/code/572

Update 1:

i have done this

function adding(form){
$( "form.jcart" ).livequery('submit', function() {var b=$(this).find('input[name=<?php echo $jcart['item_id']?>]').val();var c=$(this).find('input[name=<?php echo $jcart['item_price']?>]').val();var d=$(this).find('input[name=<?php echo $jcart['item_name']?>]').val();var e=$(this).find('input[name=<?php echo $jcart['item_qty']?>]').val();var f=$(this).find('input[name=<?php echo $jcart['item_add']?>]').val();$.post('<?php echo $jcart['path'];?>jcart-relay.php',{"<?php echo $jcart['item_id']?>":b,"<?php echo $jcart['item_price']?>":c,"<?php echo $jcart['item_name']?>":d,"<?php echo $jcart['item_qty']?>":e,"<?php echo $jcart['item_add']?>":f}                                        
});
 return false;                                          
}

and it seems to add to jcart but yet it still refreshes

Answer 1

.live() is to assign handlers to future creating elements. On your site, however, you are re-loading the page so .live would have no bearing. (you are submitting a form)

It sounds like you want to make an ajax request to add the item to the cart and update that display on the site? That would be in the submit of the form and if jcart is dynamically created then yes, live is the answer.

$('.jcart').live('submit', function() {
    // aggregate form elements into object and send via ajax
    // update the cart on the page, since we haven't reloaded the page the light box is still displayed
});

Regarding comment:

When you send an ajax request, jquery takes an object as an argument. Such as $.post('urlToPostTo.php', { title: 'title of whatever', id: 5 } );

The server sees this the same as:

<form id="myForm" action="uroToPostTo.php" method="POST" >
    <input type="text" name="title" value="title of whatever" />
    <input type="hidden" name="id" value="5" />
    <input type="submit" name="submit" value="submit" />
</form>

So if you were to aggregate the form inputs into an object, there's a few ways (even some jquery plugins to help you out). The primitive way would be:

var $form = $('#myForm'); // instead of finding myForm over and over, cache it as a variable to use
var objToSend = {};
objToSend.title = $form.find('input[name=title]').val();
objTosend.id =    $form.find('input[name=id]').val();
$.post( 'urlToPostTo.php', objToSend );

A more Elegant solution is to have something loop through all form elements and put them into an object for you. Plugins like http://docs.jquery.com/Plugins:Forms make that a bit easier.

The end result is the form elements are stuffed into an object to send to your script.