Help?
On Jun 2, 10:43 am, dennis <[EMAIL PROTECTED]> wrote:
> MY GOAL:
> I'm modifying the Interface 1.2 Shopping Cart to become
> a photo picker to create photo albums. I have the basic
> drag/drop working. I need to add these using ajax:
> -- 'Search photos by tag'
> -- 'send photo id to server on drop'
> -- 'remove photo id from server on remove'
>
> THE PROBLEM:
> I have the separate pieces working, but I'm not sure how
> to weave them together (still very new to jQuery). For
> example, when I add my 'Search photos by tag' ajax function
> to the drag and drop page search works fine, but drag/drop
> stops working.
>
> THE CODE:
>
> This is kinda long, hope that's ok. I'll just show
> the search function, ask later about the other functions
> if I'm still stuck.
>
> My ajax search form and code are in
> <div id="searchAlbumPhotos">.
>
> Thumbnails matching the search tag show up in
> <div id="theSearchResultImages">.
>
> ////////////////////////////////////////////
> <script type="text/javascript">
> $(document).ready(
> function()
> {
> $('#theSearchResultImages a')
> .bind(
> 'click',
> function() {
> $(this.parentNode)
> .TransferTo(
> {
> to:addImageToCart(this.parentNode),
> className:'transferImage',
> duration: 400
> }
> );
> return false;
> }
> );
> $('div.image').Draggable({revert: true, fx: 300, ghosting: true,
> opacity: 0.4});
> $('#cart').Droppable(
> {
> accept : 'image',
> activeclass: 'activeCart',
> hoverclass: 'hoverCart',
> tolerance: 'intersect',
> onActivate: function(dragged)
> {
> if (!this.shakedFirstTime) {
> $(this).Shake(3);
> this.shakedFirstTime = true;
> }
> },
> onDrop: addImageToCart
> }
> );
> }
> );
> var addImageToCart = function(dragged)
> {
> var cartItem;
> var imageName = $('h2', dragged).html();
> var photoID = parseFloat($('span', dragged).html());
> var imageId = $(dragged).attr('id');
> var imageSrc = $('img',dragged).attr('src');
> var isInCart = $('#' + imageId + '_cart');
> if (isInCart.size() == 1) {
> var quantity = parseInt(isInCart.find('span.quantity').html()) +
> 0;
> isInCart.find('span.quantity').html(quantity
> +'').end().Pulsate(300, 2);
> cartItem = isInCart.get(0);
> } else {
> $('#cartImages')
> .append('<div class="imageCart" id="' + imageId + '_cart">' +
> imageName + '<br />' + '<img src="' + imageSrc + '">' + '<br /><a
> href="#">remove</a><br />qty: <span class="quantity">1</span><br />Photo ID:
> <span class="price">' + photoID + '</span></div>')
>
> .find('div.imageCart:last')
> .fadeIn(400)
> .find('a')
> .bind(
> 'click',
> function(){
> $(this.parentNode).DropOutDown(
> 400,
> function() {
> $(this).remove();
> calculateCartTotal();
> }
> );
> return false;
> }
> );
> cartItem = $('div.imageCart:last').get(0);
> }
> calculateCartTotal();
> return cartItem;};
>
> var calculateCartTotal = function()
> {
> var total = 0;
> $('#cartImages .imageCart').each(
> function()
> {
> var quantity = parseInt($('span.quantity', this).html());
> total += quantity;
> }
> );
> $('#cartTotal').html(total);
> $('#cart p').Highlight(500, '#ff0', function(){$
> (this).css('backgroundColor', 'transparent');});};
>
> </script>
> <div id="cart" class="cart">
> <h3>Image cart :: Total Images: <span id="cartTotal">0</span></h3>
> <div id="cartImages"></div>
> </div>
>
> <div id="theSearchResultImages">
> // thumbnails show up here, with id=someinteger and class=image
> </div>
>
> <div id="searchAlbumPhotos">
> <p><strong>Search Photos by Tags</strong> - space separated</p>
> <p><form action="/jsrpc/search_photos_by_tags"
> onsubmit='$.ajax({url: "/jsrpc/search_photos_by_tags",
> data: $(this.elements).serialize(),
> success: function(response){$
> ("#theSearchResultImages").html(response);},
> dataType: "html"});
> return false;' method="POST" >
> <br />
> <input type="text" name="tagname" value="" />
> <input type="submit" name="submit" value="+" />
> </form>
> </p>
> <p> </p>
> </div>
> <div style="overflow: hidden; position: absolute; display: none;
> cursor: move; list-style-type: none; list-style-image: none; list-
> style-position: outside;" id="dragHelper"></div>
