Problem passing parameters to function

2

I have the following JavaScript code to which I want to pass parameters from a onClick event, but they are not recognized:

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');
    });

});

What am I doing wrong to not be able to pass the parameters to the function?

    
asked by anonymous 21.12.2014 / 00:07

1 answer

4

Your problem is in the scope of the function and some variables that need to be declared globally.

As you have everything inside the function $(document).ready(function() { /**/ }); your event onClick does not recognize your Addplayer() function and consequently also your playlist variable.

So that part of the code should be left out so it can be declared globally.

The code in the question duly rectified:

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');
    });

});

After chatting in link is completed that the problem was in the way the code was being placed on the page. See the chat or the edit made in the question and in this answer for a better understanding of the change made in both.

    
21.12.2014 / 00:23