2

Tenho o seguinte código em JavaScript ao qual pretendo passar parâmetros a partir de um evento onClick, mas os mesmos não são reconhecidos:

HTML

<a id="addplaylist" href="javascript:void(0);" onclick="Addplayer(true,'', '', '', 'public/playlist/playlist2.xml')" class="ouvir_album btn defaut" ><i class="fa fa-plus-square-o"></i> Incluir todas no player</a>

JS

$(document).ready(function () {

    var url = '<?php echo base_url();?>';

    function Addplayer(album, titulo, artista, capa, urlfile) {

        if (album == false) {

            myPlaylist.add({
                title: titulo,
                artist: artista,
                poster: capa,
                mp3: encodeURI(urlfile)
            });
            myPlaylist.play()

        } else {

            alert(urlfile);

            $.ajax({
                type: "GET",
                url: url + urlfile,
                dataType: "xml",
                success: function (xml) {

                    $(xml).find('track').each(function () {
                        var self = $(this),
                            titulo = self.find('title').text(),
                            artista = self.find('artist').text(),
                            urlfile = self.find('mp3').text(),
                            capa = self.find('poster').text(),
                            playlist = JSON.stringify({
                                title: titulo,
                                artist: artista,
                                mp3: urlfile,
                                poster: capa
                            }),
                            playlistObject = $.parseJSON(playlist);

                        myPlaylist.add(playlistObject);
                    });
                }
            });

        }

    }


    var cssSelector = {
        jPlayer: "#player_thumbs",
        cssSelectorAncestor: "#jp_container_N"
    };

    var playlist = [

    ];
    var options = {
        swfPath: url + "public/js/Jplayer.swf",
        supplied: "webmv, mp3",
        keyEnabled: true,

        volumechange: function (event) {
            if (event.jPlayer.options.muted) {
                $(".jp-volume-bar").slider("value", 0);
            } else {
                $(".jp-volume-bar").slider("value", event.jPlayer.options.volume);
            }
        },

        timeupdate: function (event) {
            $(".jp-progress").slider("value", event.jPlayer.status.currentPercentAbsolute);
        },

        playlistOptions: {
            enableRemoveControls: true
        },

        play: function (event) {
            $(".equalize span").addClass("active");
        },
        pause: function (event) {
            $(".equalize span").removeClass("active");
        }
    };

    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
    var PlayerData = $(cssSelector.jPlayer).data("jPlayer");

    // Create the volume slider control
    $(".jp-volume-bar").slider({
        animate: "fast",
        max: 1,
        range: "min",
        step: 0.01,
        value: $.jPlayer.prototype.options.volume,
        slide: function (event, ui) {
            $(cssSelector.jPlayer).jPlayer("option", "muted", false);
            $(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
        }
    });

    // Create the progress slider control
    $(".jp-progress").slider({
        animate: "fast",
        max: 100,
        range: "min",
        step: 0.1,
        value: 0,
        slide: function (event, ui) {
            var sp = PlayerData.status.seekPercent;
            if (sp > 0) {
                // Move the play-head to the value and factor in the seek percent.
                $(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
            } else {
                // Create a timeout to reset this slider to zero.
                setTimeout(function () {
                    $(".jp-progress").slider("value", 0);
                }, 0);
            }
        }
    });


    $(".title_music").hover(function () {
        $('.jp-title').toggleClass('marquee');
    });

});

O que estou a fazer de errado para não conseguir passar os parâmetros para a função?

1
  • Me responde uma dúvida. O que é jQuery para você?
    – Maniero
    21/12/2014 às 2:30

1 Resposta 1

4

O teu problema está no escopo da função e algumas variáveis que precisam ficar declaradas globalmente.

Como tens tudo dentro da função $(document).ready(function() { /**/ }); o teu evento onClick não reconhece a tua função Addplayer() e consequentemente também a tua variável playlist.

Assim sendo, essa parte do código deve ficar fora para que possa estar declarado globalmente.

O código na pergunta devidamente retificado:

var url = '<?php echo base_url();?>';

function Addplayer(album, titulo, artista, capa, urlfile) {

    if (album == false) {

        myPlaylist.add({
            title  : titulo,
            artist : artista,
            poster : capa,
            mp3    : encodeURI(urlfile)
        });

        myPlaylist.play();

    } else {

        alert(urlfile);

        $.ajax({
            type: "GET",
            url: url + urlfile,
            dataType: "xml",
            success: function(xml) {

                $(xml).find('track').each(function() {

                    var self           = $(this),
                        titulo         = self.find('title').text(),
                        artista        = self.find('artist').text(),
                        urlfile        = self.find('mp3').text(),
                        capa           = self.find('poster').text(),
                        playlist       = JSON.stringify({ title: titulo, artist : artista, mp3 : urlfile, poster : capa }),
                        playlistObject = $.parseJSON(playlist);

                    myPlaylist.add(playlistObject);
                });
            }
        });

    }
}

var cssSelector = {
    jPlayer: "#player_thumbs",
    cssSelectorAncestor: "#jp_container_N"
};

var playlist = [];


// Documento pronto e com jQuery, bora lá
$(document).ready(function(){

    var options = {
        swfPath: url + "public/js/Jplayer.swf",
        supplied: "webmv, mp3",
        keyEnabled: true,
        volumechange: function(event) {
            if (event.jPlayer.options.muted) {
                $( ".jp-volume-bar" ).slider("value", 0);
            } else {
                $( ".jp-volume-bar" ).slider("value", event.jPlayer.options.volume);
            }
        },
        timeupdate: function(event) {
            $( ".jp-progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
        },
        playlistOptions: {
            enableRemoveControls: true
        },
        play: function (event) {
            $(".equalize span").addClass("active");
        },
        pause: function (event) {
            $(".equalize span").removeClass("active");
        }
    };

    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
    var PlayerData = $(cssSelector.jPlayer).data("jPlayer");

    // Create the volume slider control
    $( ".jp-volume-bar" ).slider({
        animate: "fast",
        max: 1,
        range: "min",
        step: 0.01,
        value : $.jPlayer.prototype.options.volume,
        slide: function(event, ui) {
            $(cssSelector.jPlayer).jPlayer("option", "muted", false);
            $(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
        }
    });

    // Create the progress slider control
    $( ".jp-progress" ).slider({
        animate: "fast",
        max: 100,
        range: "min",
        step: 0.1,
        value : 0,
        slide: function(event, ui) {
            var sp = PlayerData.status.seekPercent;
            if (sp > 0) {
                // Move the play-head to the value and factor in the seek percent.
                $(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
            } else {
                // Create a timeout to reset this slider to zero.
                setTimeout(function() {
                    $( ".jp-progress" ).slider("value", 0);
                }, 0);
            }
        }
    });

    $(".title_music").hover(function(){
        $('.jp-title').toggleClass('marquee');
    });

});

Após conversa no chat em http://chat.stackexchange.com/rooms/19642/discussion-between-sergio-and-uellington-palma ficou concluído que o problema estava na forma como o código estava a ser colocado na página.
Ver o chat ou a edição feita na pergunta e nesta resposta para um melhor entendimento da mudança feita em ambas.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .