On Thu, Nov 18, 2010 at 2:38 PM, Aldo Martinez Selleras aldo@caonao.cu wrote:

Hello everybody, I'm developing a module that implements the jcarousel plugin from jQuery, and I need the item list is updated by changing the option of a select, without full page reload.

You need to use AJAX. jCarousel is built for that. Read here http://sorgalla.com/projects/jcarousel/

F

Sorry. Re read this and realized that it ended up very views centric. But that may not be what you want. Still, the same principles apply in other cases. Your module might provide a menu callback that generates a new list and returns it in json.

On 11/18/2010 08:09 AM, Christopher M. Jones wrote:

You haven't said much about your use case. What content are you outputing? Is it a view, or something else? From what you've said so far, it sounds like you're building your dom structure and javascript completely from scratch. So you've got a lot of choices to make about how you build the carousel. Have a look at the documentation for jcarousel:

http://sorgalla.com/projects/jcarousel/

In particular, check out the section on dynamic content loading:

http://sorgalla.com/projects/jcarousel/#Dynamic-Content-Loading

And the examples of dynamic content loading:

http://sorgalla.com/projects/jcarousel/#Examples

Depending on how much content we're talking about, it may be good to load it all up in a view and output it into the DOM as normal. This keeps the content indexable. Use your jquery to read in the elements from the DOM and put them into the carousel. Your select list would then become an external control which you use to add and remove items from the carousel. But all of those items are already in dom for jcarousel to grab.

Again, depending on the complexity and amount of content we're talking about you may need to write logic to conditionally load and unload items from the carousel. If you've got too much loaded up then you may have performance issues.

If you wanted to get all ninja on this then you might create your view and expose a filter, then use ajax to rebuild the view with the selected filter and return results in JSON. There are ways to output a view in JSON. Template your view and use drupal_to_js to return the view object, or find a json display plugin. So, maybe your view has a page display, which is used to output the view as normal (for seo and for degradability). Add a second display which would output json. This is the one you GET in your ajax call with the filter parameters coming from the select list.

Once you've got the newly built view then you can add and remove nodes as needed.

On 11/18/2010 07:38 AM, Aldo Martinez Selleras wrote:

...

Hello everybody, I'm developing a module that implements the jcarousel plugin from jQuery, and I need the item list is updated by changing the option of a select, without full page reload.

Some idea of how can do this ?

Thks in advanced

This really looks like it could be accomplished using existing tools, unless there's other functionality that isn't represented here.

If your carousel is just displaying a list of images then you'd be best off attaching those images to a node. Then you would build a view of the nodes using imagecache and all the other goodness that comes from that approach. Your select list would be, as said in previous posts, an exposed views filter.

As an aside, you should be using url() to build your URLs and you may want to consider theme('item_list', $awards) to output your ULs. Put your styles in an external stylesheet (not inline) so they can be aggregated, compressed, and cached, and to keep your dom clean. Also, your JQuery should look like this:

Drupal.behaviors.mymethod = function (context) { $('#profile-carousel').jcarousel({ vertical: true }); }

On 11/18/2010 08:30 AM, Aldo Martinez Selleras wrote:

I have create my modulo completly from scratch!

This code, generate the li objects

for ( $x = 0; $x< $numero; $x++) { $output .= "\t<li><img src="$base_url/sites/default/files/backgrounds/" . $awards[$x]['background'] . "" width="75" height="75" alt="". $awards[$x]['background'] ."" /></li>\n\r"; }

And I'm loading the carousel like

jQuery(document).ready(function() { jQuery('#profile-carousel').jcarousel({ vertical: true }); });

$output .= "<select id="award-type-filter" onchange="javascript:refresh_carousel()">\n\r"; $output .= "<option value="0"> -- ALL --</option>\n\r"; foreach ( $atype as $key=>$value ) { $output .= "\t<option value="" . $key . "">" . $value . "</option>\n\r"; } $output .= "</select>\n\r";

So, I need the function refresh_carousel() regenerate the ul> li objects and recall de carousel function.

What can I do with JSON data, I not found any way to format it :(

{"1":background1,"2":background2,"3":background3}

And how I wotk with this ?

... and how to integrate it into the carousel? Go back to the jcarousel examples using ajax dynamic loading. Something like this:

$.get(url, function(data){ $.each(data, function(){ carousel.add(data); }); });

But what you're getting back in the json below is just properties and values. carousel.add() needs markup. to make things easier you might put the actual markup into the array in your callback function:

$items = array(); foreach( $awards as $award ){ array_push($items, '<img src="...">'); }

print drupal_to_js($items);

That's it, apart from what else you might do to avoid duplicates the in the carousel, reordering items, and scrolling the user to the proper item. Again, see jcarousel docs for this.

But you realize that if you just use a view then you don't have to write the page callback.

On 11/18/2010 09:15 AM, Aldo Martinez Selleras wrote:

Thanks for all your advices!

What can I do with the JSON data?

If I have this?

[{"username":"skipper","background":"background_02.jpg","model":"trophy_001" ,"title":"The Best runner","category":"Default","date":"Tue, 15 Nov 2010","material":"silver"},{"username":"skipper","background":"background_01 .jpg","model":"trophy_002","title":"The Best Player","category":"Default","date":"Tue, 16 Nov 2010","material":"gold"}]

How I use this data for generate my carousel ?

Ahh... because it's not a function. I was slapping out that code off the top of my head, just to give you the gist. Guess I was thinking of JSON.parse and mixing it up with the php function json_decode(). Maybe Drupal.parseJson()? Check this out:

http://drupal.org/node/305747

Also, you gotta listen to me, brother. This code is bad:

global $base_url; ... $base_url/sites/default...

You've got to use the API for this stuff. Pick from any of the following:

$items, '<img src='.url('sites/default/files...').'>'; $items, theme('image', url(...)), $itmes, theme('imagecache', 'preset', $filename),

And check the api documentation for those functions before using them. Accuracy not guaranteed

On 11/18/2010 10:08 AM, Aldo Martinez Selleras wrote:

I have this function callback

function classification( $a = NULL ) { global $base_url; $awards = profile_award('1'); $n = count($awards); $items = array(); for ( $x = 0; $x< $n; $x++) { array_push($items, "<img src="$base_url/sites/default/files/viewer/objects/backgrounds/" . $awards[$x]['background'] . "" width="75" height="75/>"); } print drupal_json($items); }

And when the select option change, it call this function:

function refresh_award() { $.get('/classification/', function(data){ var node = JSON.decode(data); console.log( node ); // open firebug console to see the data }); };

But in firebug console I'm receiving this

JSON.decode is not a function var node = JSON.decode(data);

why?

Bind to the change event of the select element. In other words,

$("select my input element").change(function(){ ... do ajaxy stuff or call a function that does it for me ... });

Or something like that. Look up the events for selects in the jquery docs.

XML works. JSON can be tricky some times. Glad it worked out for you. You can send me a beer.

On 11/18/2010 03:39 PM, Aldo Martinez Selleras wrote:

Thanks very much for all

Christopher, I know the code is bad, but I'm creating the functionality first and later y I will "drupalize" my code. :D

I'm very glad of your help, right now, my carousel is rendering by jQuery, finally, I have use the XML version for collect the data, in my callback function return a xml data and this is what I read with $.get() function.

Still I have a dude.

How I can do the function re-execute when I change de select option??

1. The last example I sent binds a function to the onchange event of the select element. Use that instead of inline javascript. It's just cleaner.

2. Did you look at the dynamic loading examples at sorgella.com? Also in a previous example (look back. you'll find it) I mentioned carousel.add(mymarkup). You can see this at work in the examples. This is what loads an item into the carousel. If I got the method wrong then pardon my poor memory.

--edit-- Looks from your function names like you are reading the examples. Look back at this:

for (i = 0; i < items.length; i++) { carousel.add(i+1, mycarousel_getItemHTML(items[i])); }

And compare to the example with external controls.

From the below, it looks like your approach is wrong. You are trying to use the select onchange to hose the carousel and completely rebuild it from scratch. Of course, the dom structure is different now that the carousel has rewritten everything. So the selector you used to build the carousel, along with everything inside of it, is gone.

On 11/18/2010 04:34 PM, Aldo Martinez Selleras wrote:

Could be something like that ?

function mycarousel_itemLoadCallback(carousel, state, classification) { var classification = $('#award-type-filter').val(); jQuery.get( '/classification/' + classification, function(xml) { mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml); }, 'xml' ); };

function carousel() { jQuery(document).ready(function() { $('#profile-carousel').jcarousel({ vertical: true, itemLoadCallback: mycarousel_itemLoadCallback }); }); }

function trigger() { carousel(); }

In the select I declare onchange=javascript:trigger();

But, the carousel isn't regenerating :(

And the URL /classification/$val() it is generating and changing, instead the XML result are OK, but the carousel not render again :(

I'm headed off to dinner, now. So probably my last email of the day. This has turned into quite the saga, hasn't it?

I understand your frustration. I've been there myself. I can see you're reading the examples. I didn't know if maybe you hadn't read the one on external controls. The answers are all there. But I remember when it was greek to me, too, and I just wished that someone would tell me what to do. To some extent, this is how you earn your chops. So you have my kudos for soldiering through.

That said, here's what you need to do. This is quick, and sketchy.

Drupal.behaviors.mymodule = function (context) {

// Initialize jcarousel var carousel = $("#profile-carousel").jcarouse({ itemLoadCallback: mycarousel_itemLoadCallback, vertical: true }

// Now that the carousel is initialized and loaded, bind the // a function to the select element.

$("#award-type-filter").change(function(){

// Get the carousel. This is in the docs, but it's never // worked for me. If it doesn't work for you then I'm pretty // sure you can just use the var you set above. It should still // have scope here

// var carousel = jQuery('#profile-carousel').data('jcarousel');

// There is a method in there to clear the carousel of all its // its items. It may be .clear(). You can console.log(carousel) // above to inspect the methods there, or you can examine the // jcarousel js file to find it there. Anyway, clear it here.

carousel.clear();

// Now get the new items. This is your ajax stuff, and duplicates // some of what would be in your itemLoad callback. You can refactor // this duplicated code into a utility function, and call that // function both here and in your itemLoad callback.

var xml = $.get('/classification/' + $(this).val(), function(){ // Assuming xml is an array of items to add... $.each(xml, function(i, item){ carousel.add(i+1, item); // i in the function is an index, // counting from 0. but jcarousel // counts from 1. Grrr. });

// Now that the carousel is wiped and repopulated we can reload it // to make things actually happen on the screen.

carousel.reload();

// You may need to send the user back to the beginning.

carousel.scroll(carousel.first); });

});

}

You didn't copy over mycarousel_itemAddCallback. Whatever it does, you can probably just use it right there where I had the ajax stuff. The trick is to clear the carousel, then reload it using carousel.reload(); Use lots of console.log() calls on the variables and the objects you are using. If you console.log() the carousel object itself, you can see lots of cool methods for controling the carousel from your code. Just don't forget: if console is not open then console.log will generate errors. You can think your code is failing when it's not.

What I meant before by trying to rewrite the whole carousel is that it looked like your onchange event was triggering a function called trigger(). But trigger was just calling carousel(). Which is the function that selects an element in the dom and initializes the carousel. You should be doing that only once. Thereafter, you are loading and unloading items against an already initialized carousel.

I really really hope this helps. More than this I cannot do, apart from writing it for you. Let us know how it turns out. And hey. This stuff is hard. You have to crack your head on it. The last time I did a major project with jcarousel I thought I was going to rip my machine from the wall, tie the cable around my neck, and throw the thing out of the window.

See http://c-sgroup.com

On 11/18/2010 05:23 PM, Aldo Martinez Selleras wrote:

I have the examples, all of them, and I have looked all very slowly, but there is no one example like I want :( yours emails I readed slowly too

It's working, just no is it creating a new list of objects, only adding more of this.

I don't want create the complete carousel, only need the list of items!

Are you suggesting me in the onchange event only re-call the function it generate the list items????

Sorry, but my English is not very good!

I'm sorry. I don't know. Maybe there's something wrong with the indexing when you add elements. Maybe you're adding an element in second position without having one in the first, and jcarousel is filling the gap? I had a comment in there about how it indexes items from 1 rather than 0. Maybe I was wrong about that. You may also try seeing if you need to adjust any properties having to do with the number of items in the carousel.

On 11/19/2010 10:29 AM, Aldo Martinez Selleras wrote:

Hi, a new day, and I'm very happy with the last email u sent to me, really, really, thousands of thanks with this are working very GOOD, but the carousel add a<li> object with jcarouselindex="abort1", and put it at the first.

Christopher, u knows how to solve this issue?

In IE this phantom object do no create a problem, because IE not render it, but FF do it!

I didn't about his Drupal.behaviors.mymodule, really cool!!

At the end, I'll write all this in one page!

I don't know. You're on your own, now, unless someone else wants to pick it up.

On 11/19/2010 10:42 AM, Aldo Martinez Selleras wrote:

This only happened when the select change the first time, by default, are not rendering this element!!!

Could be because the itemLoadCallback is called twice, by default and when the select change?

By the way, the method isn't .clear(), the name is .reset() ;)

I see other thing here!, the scroll is not working!!! When I click the NextBtn is called the URL /classification/ $(select).val().

Why this ?

Initially:

1 needed to reload the list of objects within the carousel, to make a change in the options of a select.

2 then the list is regenerated, but was created a blank subject and this was in the first space

3 then when do it a scroll the item list was regenerated and did not move objects while retaining the total number unchanged, just change the images that showed

after be looking the sources of examples from sorgalla.com, in the " Carousel with dynamic content loading via Ajax" there is section like this!

if (state != 'init') return;

so, the final code is this

function mycarousel_itemLoadCallback(carousel, state){ if (state != 'init') return; var classification = $('#award-type-filter').val(); $.get( '/classification/' + classification, function(xml) { mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml); }, 'xml' ); };

function mycarousel_itemAddCallback(carousel, first, last, xml){ carousel.size(parseInt(jQuery('total', xml).text())); //alert(last); $('image', xml).each(function(i) { carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text())); }); };

function mycarousel_getItemHTML(url){ return '<img src="' + url + '" width="75" height="75" alt="' + url + '" />'; };

Drupal.behaviors.cupcake_profile = function (context) { var carousel = $("#profile-carousel").jcarousel({ itemLoadCallback: mycarousel_itemLoadCallback, vertical: true, //wrap: 'circular' })

console.log(carousel); $("#award-type-filter").change(function(){ var carousel = $('#profile-carousel').data('jcarousel'); carousel.reset();

var xml = $.get('/classification/' + $(this).val(), function(){ $.each(xml, function(i, item){ carousel.add(i+1, item); }); carousel.reload(); //carousel.scroll(carousel.first); }); }) } And my callback function return a XML data like "Carousel with dynamic content loading via Ajax from a PHP script"

PERFECT, thanks a lot to Christopher, u are my savior :D

I generate my XML data more ordered :D

echo '<image>'; echo '<username>'. $awards[$x]['username'] .'</username>'; echo '<background>' . $awards[$x]['background'] . '</background>'; echo '<model>' . $awards[$x]['model'] . '</model>'; echo '<title>' . $awards[$x]['title'] . '</title>'; echo '<category>' . $awards[$x]['category'] . '</category>'; echo '<date>' . $awards[$x]['date'] . '</date>'; echo '<material>' . $awards[$x]['material'] . '</material>'; echo '</image>';

Then, in my jQuery function!!!!

$(xml).find('image').each(function(i){ var username = $(this).find('username').text(); var background = $(this).find('background').text(); var model = $(this).find('model').text(); var title = $(this).find('title').text(); var category = $(this).find('category').text(); var date = $(this).find('date').text(); var material = $(this).find('material').text();

carousel.add(first + i, mycarousel_getItemHTML(username, background, model, title, category, date, material)); });

For me, all of this are OK.

Some suggest ??

Sorry, missed the last few questions. JSON stands for javascript object notation. You use it within your javascript code. So, let's say I have a menu callback on the php side like so:

function page_callback(){

$node = node_load( some node ); print drupal_to_js($node);

}

I could call it from javascript like so:

Drupal.behaviors.mymethod = function (context) {

$.get('http://mysite.com/page_callback', function(data){ var node = JSON.decode(data); console.log( node ); // open firebug console to see the data } }

This code may not be exactly right. But you get the idea.

On 11/18/2010 08:30 AM, Aldo Martinez Selleras wrote:

I have create my modulo completly from scratch!

This code, generate the li objects

for ( $x = 0; $x< $numero; $x++) { $output .= "\t<li><img src="$base_url/sites/default/files/backgrounds/" . $awards[$x]['background'] . "" width="75" height="75" alt="". $awards[$x]['background'] ."" /></li>\n\r"; }

And I'm loading the carousel like

jQuery(document).ready(function() { jQuery('#profile-carousel').jcarousel({ vertical: true }); });

$output .= "<select id="award-type-filter" onchange="javascript:refresh_carousel()">\n\r"; $output .= "<option value="0"> -- ALL --</option>\n\r"; foreach ( $atype as $key=>$value ) { $output .= "\t<option value="" . $key . "">" . $value . "</option>\n\r"; } $output .= "</select>\n\r";

So, I need the function refresh_carousel() regenerate the ul> li objects and recall de carousel function.

What can I do with JSON data, I not found any way to format it :(

{"1":background1,"2":background2,"3":background3}

And how I wotk with this ?

Have you tried Views Carousel module http://drupal.org/project/viewscarousel , with an exposed filter ... then the filter could be re-applied via Ajax, with theming it should be possible, I imagine.

Interesting to see how far that could take you,

Victor Kane http://awebfactory.com.ar

On Thu, Nov 18, 2010 at 9:38 AM, Aldo Martinez Selleras aldo@caonao.cuwrote:

Hello everybody, I'm developing a module that implements the jcarousel plugin from jQuery, and I need the item list is updated by changing the option of a select, without full page reload.

Some idea of how can do this ?

Thks in advanced

-- [ Drupal support list | http://lists.drupal.org/ ]