Popolare un livello dinamicamente

**bibuz** · 04-05-2011, 15:04

Buon pomeriggio.

Tramite YUI library sto cercando di costruire un sito sullo stile di iGoogle.

L'esempio di base riporta all'interno dei livelli dei feed mentre io avrei la necessità di inserisci del contenuto mio:
Vi posto il codice del Javascript:
Qui vengono create le variabili dei livelli.

codice:

YUI(yuiConfig).use('dd', 'anim', 'io', 'cookie', 'json', function(Y) {
    //Make this an Event Target so we can bubble to it
    var Portal = function() {
        Portal.superclass.constructor.apply(this, arguments);
    };
    Portal.NAME = 'portal';
    Y.extend(Portal, Y.Base);
    //This is our new bubble target..
    Y.Portal = new Portal();


    //Setup some private variables..
    var goingUp = false, lastY = 0, trans = {};

    //The list of feeds that we are going to use
    var feeds = {
        'ynews': {
            id: 'ynews',
            title:'Yahoo! US News',
            //url: 'rss.news.yahoo.com/rss/us',
			article: 'Contenuti di Yahoo Us News'
        },
        'yui': {
            id: 'yui',
            title: 'YUI Blog',
            //url: 'feeds.yuiblog.com/YahooUserInterfaceBlog',
			article: 'Contenuti di YUI Blog'
        },
        'slashdot': {
            id: 'slashdot',
            title: 'Slashdot',
            //url: 'rss.slashdot.org/Slashdot/slashdot',
			article: 'Contenuti di Slashdot'
        },
        'ajaxian': {
            id: 'ajaxian',
            title: 'Ajaxian',
            //url: 'feeds.feedburner.com/ajaxian',
			article: 'Contenuti di Ajaxian'
        },
        'daringfireball': {
            id: 'daringfireball',
            title: 'Daring Fireball',
            //url: 'daringfireball.net/index.xml',
			article: 'Contenuti di Daring Fireball'
        },
        'wiredtech': {
            id: 'wiredtech',
            title: 'Wire: Tech Biz',
            //url: 'www.wired.com/rss/techbiz.xml',
			article: 'Contenuti di Wire: Tech Biz'
        },
        'techcrunch': {
            id: 'techcrunch',
            title: 'TechCrunch',
            //url: 'feedproxy.google.com/Techcrunch',
			article: 'Contenuti di TechCrinch'
        },
        'smashing': {
            id: 'smashing',
            title: 'Smashing Magazine',
            //url: 'www.smashingmagazine.com/wp-rss.php',
			article: 'Contenuti di Smashing Magazine'
        }
    };

Con questo codice invece vengono popolati.

codice:

on: { 
                success: function(id, data) {
                    //On success get the feed data
                    var d = feeds[trans[id]]
					
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    //html = '<ul>[*]Feed failed to load..[/list]';
					html = 'Prova' + feeds.title;
					
					// Inizio popolazione livello
					
	
	// Fine popolazione livello
					
                    //Set the innerHTML of the module
                    inner.set('innerHTML', '<ul>' + html + '[/list]');
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', '<ul>' + html + '[/list]');
                        
                    }
                },
                failure: function(id, data) {
                    //Something failed..
                    var d = feeds[trans[id]],
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    html = '<ul>[*]Feed failed to load..[/list]';

                    inner.set('innerHTML', html);
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', html);
                        
                    }
                }
            }
        });
        //Keep track of the transaction
        feeds[data.id].trans = id;
        feeds[data.id].mod = mod;
        trans[id.id] = data.id;
    };

"inner" è il nome del livello che contiene i dati

Vorrei fare in modo che a seconda del livello trascinato mi mostri il suo contenuto.

Per ora sono solo riuscito ad inserire del codice HTML uguale per tutti.

Avete qualche suggerimento per cortesia?

**bibuz** · 04-05-2011, 16:46

Da ragionamento dovrei recuperare i seguenti dati:

var feeds = {
'ynews': {
id: 'ynews',
title:'Yahoo! US News',
//url: 'rss.news.yahoo.com/rss/us',
article: 'Contenuti di Yahoo Us News'

e filtrarli in base in base al valore dell' id.

Il mio problema è che io non riesco a recuperare neanche i dati sotto "var feeds".

**bibuz** · 05-05-2011, 14:39

Ho provato a modificare una parte del codice in questo modo:

codice:

var url = data.url;
        //Start the XDR request
        var id = Y.io(url, {

            on: { 
                  success: function(id) {
                    //On success get the feed data
                    var d = feeds[trans[id]]
                    //Node reference
                    //inner = d.mod.one('div.inner'),
                    //Parse the JSON data
					//oRSS = Y.JSON.parse(data.responseText),
					var oRSS = feeds.url
					
                    
					html = 'Test';
                    
                    //Did we get data?
                      Y.each(oRSS, function(v) {					
                               html += '[*]' + v.title + '';
                        });
                    //Set the innerHTML of the module
                    inner.set('innerHTML', '<ul>' + html + '[/list]');
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', '<ul>' + html + '[/list]');
                    }
                },
                failure: function(id, data) {
                    //Something failed..
                    var d = feeds[trans[id]],
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    html = '<ul>[*]Feed failed to load..[/list]';

                    inner.set('innerHTML', html);
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', html);
                        
                    }
                }
            }
        });

Mi restituisce il messaggio: Feed failed to load..

Vi posto il link dove sto facendo le prove:
Link demo

**Vindav** · 05-05-2011, 15:08

l'url che passi al plugin viene appeso all'url della pagina questo comporta la creazione di una url non valida e di conseguenza un errore di tipo 404 pagina non trovata. Prova a inserire un url completo con http:// ecc...

**bibuz** · 05-05-2011, 15:34

Ho provato ma nulla una volta trascinati i livelli poi mi visualizza solo il titolo.

In origine la variabile URL viene richiamata in questo modo:

codice:

var url = 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/' + data.url;

In questo modo aggancia i feed e li replica.

**Vindav** · 05-05-2011, 15:44

chiariscimi un po le idee ma il contenuto che ci devi inserire è statico o devi andare a recuperarlo da un altro sito?
se statico la chiamata get non ti serve a nulla basta che recuperi l'id dell'oggetto trascianto e con innerHtml ci piazzi il tuo testo

Inoltre ora io nella tua pagina demo oltre il titolo vedo la scritta "operazione effettuata con successo"

**bibuz** · 05-05-2011, 16:14

No ci devo inserire del mio contenuto. L'esempio originale si basa sui feed esterni.
Ho provato a modificare il codice in questo modo:

codice:

var idLiv = data.id
        //Start the XDR request
        var id = Y.io(id, {
            //method: 'GET',
            //x//dr: { 
               // use:'flash'
            //},
            on: { 
                  success: function(id) {
                    //On success get the feed data
                    var d = feeds[trans[id]],
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    html = 'Operazione effettuata con successo';

                    inner.set('innerHTML', html);
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', html);
                    }
                },

Posto anche il codice che costruisce il modulo con il titolo e contenuti.

codice:

var createMod = function(feed) {
		var virgolette = "'"
        var str = '<li class="item">' +
                    '<div class="mod" id="' + feed.id + 'LD">' + 
                        '<h2>' + feed.title + ' ' +
                        '</h2>' +
                        '<div class="inner"></div>' +
                    '</div>' +
                '';
        return Y.Node.create(str);
    };

Il livello contenitore del testo di "article" è inner.

Solo che nn sapre recuperare l'id del livello e associargli il testo che all'inizio ho messo sotto "article".

codice:

var feeds = {
        'ynews': {
            id: 'ynews',
            title:'Yahoo! US News',
            //url: 'rss.news.yahoo.com/rss/us',
			article: 'Contenuti di Yahoo Us News'
        },
        'yui': {
            id: 'yui',
            title: 'YUI Blog',
            //url: 'feeds.yuiblog.com/YahooUserInterfaceBlog',
			article: 'Contenuti di YUI Blog'
.
.
.
.

La demo cambia perchè sto facendo delle prove.

**Vindav** · 05-05-2011, 16:32

prova a sostituire questa riga di codice:

html = 'Operazione effettuata con successo';

con

html = data.article;

**bibuz** · 05-05-2011, 16:43

Ho provato ma mi restituisce il messaggio di errato caricamento:

"Feed failed to load.."

codice:

        var idLiv = data.id
		 //Start the XDR request
        var id = Y.io(id, {
            //method: 'GET',
            //x//dr: { 
               // use:'flash'
            //},
            on: { 
                  success: function(id) {
                    //On success get the feed data
                    var d = feeds[trans[id]]
					
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    html = data.article;

                    inner.set('innerHTML', html);
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', html);
                    }
                },
                failure: function(id, data) {
                    //Something failed..
                    var d = feeds[trans[id]],
                    //Node reference
                    inner = d.mod.one('div.inner'),
                    html = '<ul>[*]Feed failed to load..[/list]';

                    inner.set('innerHTML', html);
                    if (Y.DD.DDM.activeDrag) {
                        //If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get('dragNode').one('div.inner');
                        proxy_inner.set('innerHTML', html);
                        
                    }
                }
            }
        });
        //Keep track of the transaction
        feeds[data.id].trans = id;
        feeds[data.id].mod = mod;
        trans[id.id] = data.id;

**Vindav** · 05-05-2011, 16:49

rimetti l'url che hai preso dall'esempio per ora, almeno vedi se la soluzione è quella corretta... se funziona poi dovresti rimuovere tutta la chiamata ajax che viene effettuata per recuperare i feed rss, pero procedi un passo alla volta

Discussione: Popolare un livello dinamicamente

Strumenti discussione

Ricerca discussione

Visualizza

Popolare un livello dinamicamente

Permessi di invio