Problem using jquery-jcarousel

Hello experts.
I'm trying to make some changes using the jcarousel plugin:http://sorgalla.com/projects/jcarousel/

I want to use this case:
Carousel with dynamic content loading via Ajax from a PHP script
The default function is working fine:
xml like:
<data><total>10</total><image>http://static.flickr.com/75/199481072_b4a0d09597_s.jpg</image><image>http://static.flickr.com/57/199481087_33ae73a8de_s.jpg</image></data>
and js like:
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

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

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<img src="' + url + '" width="75" height="75" alt="" />';
};


The changes i want to make are the following:
Using a  xml file like:
<data><total>8</total><image><img width="120" height="90" alt="blablabla" class="ccontent_img" src="/images/small/C39B0EDC-F8F2-884F-EC74DCD08F86C174.jpg"/></image></image></data>
and a js:
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

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

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
    return '<div>' + url + '</div>';
};
I don't get any errors but i don't get the images in the carousel.
I assume i have to change this jQuery(this).text() .
Any help?
LVL 2
PanosAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dushyant SharmaCommented:
not sure, but you may have to reinitialize the carousel after adding the new elements.  
0
leakim971PluritechnicianCommented:
try this :
function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('img', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).attr("src")));
    });
};

Open in new window

0
PanosAuthor Commented:
Hi.
The script is looping the content of each image xml element.
I have in mind to create a more complex parent image element adding a tags ,text ,img,....
And after that getting the content like the data function,but in this case i have to handle this in a different way.
That's why i tried to get the data and paste it inside a div.l hope you understand
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Dushyant SharmaCommented:
you may also try html() method instead of text() method as text method appends the values just as text and does not parse it as html value.
0
PanosAuthor Commented:
Hi
I just saw your comment.
I tried html() allready but i get an error:
this[0].innerHTML is undefined:

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

    jQuery('image', xml).each(function(i) {
        carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).html()));
    });
};
0
PanosAuthor Commented:
I think i can't do what i want.
Looking into the jcarousel plugin i read that the plugin is passing  the innerhtml code.
0
Dushyant SharmaCommented:
try debugging it with the smallest entity. it will bring you close to the problem.

like alert or console.log(for firefox and chrome) and try different element values. for example

alert(i);
alert(jQuery(this).html());

this will give you a clear picture on what is happening in background. May be this can lead you to the solution.
0
PanosAuthor Commented:
alert(i); is showing  values  0      1       2
using alert(jQuery(this).html());  i get the same error this[0].innerHTML is undefined:
 
0
Dushyant SharmaCommented:
it should find the element. anyway, you can try again the answer above at 37343979. Their you can try adding other parameters explicitly to the newly created element.
0
PanosAuthor Commented:
ddsh79
The "atrr"  way does not help.
I post all the test files for help.
test.zip
0
Dushyant SharmaCommented:
that was more helpful to solve the problem.

try the xml data in cdata as below and use .text() like carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));

<image><![CDATA[<a href="#" target="_blank"><img width="120" height="90" alt="blablabla" class="ccontent_img" src="images/small/C39B0EDC-F8F2-884F-EC74DCD08F86C174.jpg"/><span>Test 1</span></a>
]]></image>
 
<image><![CDATA[<a href="#" target="_blank"><img width="120" height="90" alt="blablabla" class="ccontent_img" src="images/small/151F502B-9F23-1A88-821C7B41852BBDB6.jpg"/><span>Test 2</span></a>
]]></image>
 
<image><![CDATA[<a href="#" target="_blank"><img width="120" height="90" alt="blablabla" class="ccontent_img" src="images/small/01C94AE7-DC57-7446-19058A02881D7C82.jpg"/><span>Test 3</span></a>
]]></image>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
ddsh79
It is working perfect.
Thank you very much. Can you post any link why do i have to use <![CDATA[ ?
0
PanosAuthor Commented:
Thank you again
regards
panos
0
Dushyant SharmaCommented:
see if you are using html code then it will treat all the tags as nodes so you can not get nodes using .text() method. To get the nodes as text we use cdata and it makes everything wrapped available as text. more you can refer on w3schools for cdata.

and thanks for the points :)
0
PanosAuthor Commented:
Thank you for the explanation
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.