JCarousel and PHP help

[borillion]

Im trying to implement JCarousel in my site and have some confusion about what to do, two files, one called similar_products_stack which contains the query:

<?php

$similar_items = array();

$category_in_now = zen_get_products_category_id($_GET['products_id']);

for($i=0;$i<4;$i++) {
		$products_query_raw = "SELECT p.products_id, p.products_type, pd.products_name, p.products_image, p.products_price, p.products_model, p.manufacturers_id,
		                       p.master_categories_id
		                       FROM " . TABLE_PRODUCTS . " p
		                       LEFT JOIN " . TABLE_MANUFACTURERS . " m
		                       ON (p.manufacturers_id = m.manufacturers_id), " . TABLE_PRODUCTS_DESCRIPTION . " pd
		                       WHERE p.products_status = 1 
		                       AND p.products_id = pd.products_id
		                       AND p.master_categories_id = :catInNow  ORDER BY rand() LIMIT 0,4";
		
		$products_query_raw = $db->bindVars($products_query_raw, ':catInNow', $category_in_now, 'integer');
		$result = $db->Execute($products_query_raw);
		
	
		if ($result->RecordCount() > 0) {
			$item =  '<li class=itemProduct">'
			. '<div id="itemBox">'
			. '<a href="' . zen_href_link('product_info', 'cPath=' . $cPath .  '&products_id=' . $result->fields['products_id']) . '">'
			. zen_image(DIR_WS_IMAGES . $result->fields['products_image'], $result->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT)
			. '</a>'
			. '<span class="prodManufact">'
			. zen_get_products_manufacturers_name($result->fields['products_id'])
			. '</span>'
			. '<span class="prodModel">'
			. $result->fields['products_model']
			. '</span>'
			. '<span class="curPrice">'
			. zen_get_products_display_price($result->fields['products_id'])
			. '</span>'
			. '</div>'
			. '</li>';
			array_push($similar_items,$item);
		}
	
}

echo $similar_items;

?>

I have another page in which I call this file and the carousel functions, but this is where I run into issues, Im unsure about how to correctly change the sample I have below to get all the contents of the divs I have stacked into the array $similar_items, Im only getting the images inside and nothing else:

function mycarousel_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.get(
        'tpl_similar_products_stack.php',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('item', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return 'item';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.

        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});

</script>

  <div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      <!-- The content will be dynamically loaded in here -->
    </ul>
  </div>

[Airshow]

Borillion,

Try applying id="mycarousel" class="jcarousel-skin-ie7" to the UL element rather than its containing div.

Airshow

[borillion]

That doesn't seem to make a difference, I think where its going wrong is in the callback functions somewhere.

[Airshow]

Can you post an example of your XML please.

[borillion]

I figured out the problem, I cant use the browser to get these files and JavaScript can only work on what it can fetch.

[Airshow]

Borillion,

I figured out the problem, I cant use the browser to get these files and JavaScript can only work on what it can fetch.

There's nothing in the code to indicate that it shouldn't work. If it's an XML issue, then you could try JSON instead.

However, if AJAX is a genuine dead-end, you should be able to use php to write a "database" of javascript (array(s) or object(s) containing data) into the page when it is initially served, then draw on that data dynamically to populate the carousel instead of going back to the server.

Airshow