Execute soundmanager2 after ajax response

问题:

I am trying to execute a script in an ajax response and can't seem to find any ways to do that. My scripts are loaded in the html - head tag, i also have a div with the id="browsemusic" where my ajax response goes to.

my php file which generates the page:

include('dbcon.php');
if(isset($_REQUEST['all']) && $_REQUEST['all'] != ''){
    //===============================Button "ALL"====================================
    unset($_REQUEST['kw']);
    unset($_REQUEST['genre']);
    $query = "select * from music";
    $result = mysqli_query($link, $query) or die (mysqli_error());
    echo '<ul id="sortable1" class="connected">';
    while($info = mysqli_fetch_array( $result )){
        echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button><a href="' . $info['path'] . '"> '.$info['artist'].' - '.$info['title'].' ('.$info['album'].') '.'</a></div><hr /></li>';
    };
    echo '</ul>';
}elseif (isset($_REQUEST['kw']) && $_REQUEST['kw'] != ''){
    //============================= Search for music ================================
    $kws = $_REQUEST['kw'];
    $kws = mysqli_real_escape_string($link, $kws);

    $query = "select * from music where title like '%".$kws."%' or artist like '%".$kws."%'";
    $result = mysqli_query($link, $query) or die (mysqli_error($link));
    echo '<ul id="sortable1" class="connected">';
    while($info = mysqli_fetch_array( $result )){
        echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button><a href="' . $info['path'] . '"> '.$info['artist'].' - '.$info['title'].' ('.$info['album'].') '.'</a></div><hr /></li>';
    };
    echo '</ul>';
}elseif(isset($_REQUEST['genre']) && $_REQUEST['genre'] != ''){
    //=====================================Browse By Genre ===========================================
    $genre = $_REQUEST['genre'];
    $genre = mysqli_real_escape_string($link, $genre);
    $gquery = "select music_id from musicgenre where genre_id = '$genre'";
    $results = mysqli_query($link, $gquery) or die (mysqli_error($link));
    $music=array();
    while($id_result = mysqli_fetch_array($results)){
        $music[] = $id_result['music_id'];
    };
    echo '<ul id="sortable1" class="connected">';
    foreach($music as $song){
        $query = "select * from music where music_id = '$song'";
        $result = mysqli_query($link, $query) or die (mysqli_error());;
        while($info = mysqli_fetch_array($result)){
        echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button><a href="' . $info['path'] . '"> '.$info['artist'].' - '.$info['title'].' ('.$info['album'].') '.'</a></div><hr /></li>';
        };
    };
    echo '</ul>';
}else{
// ================================ Default =========================================

    $query = "select * from music";
    $result = mysqli_query($link, $query) or die (mysqli_error());
    echo '<ul id="sortable1" class="connected">';
    while($info = mysqli_fetch_array( $result )){
        echo '<li><div class="ui360"><button type="button" class="addtoplaylist" >Add</button><a href="' . $info['path'] . '"> '.$info['artist'].' - '.$info['title'].' ('.$info['album'].') '.'</a></div><hr /></li>';
    };
    echo '</ul>';

};

and my ajax file:

$(document).ready(function(){
    $(".all").click(function()
    {
        var all = $(this).attr("id");
        if(all != '')
        {
            $.ajax
            ({
                type: "POST",
                url: "php/searchbrowselist.php",
                data: "all="+ all,
                success: function(option)
                {
                    var $this = $("#browsemusic")
                    $this.html(option);
                    function loadjscssfile(filename, filetype){
                         if (filetype=="js"){ //if filename is a external JavaScript file
                          var fileref=document.createElement('script')
                          fileref.setAttribute("type","text/javascript")
                          fileref.setAttribute("src", filename)
                         }
                         else if (filetype=="css"){ //if filename is an external CSS file
                          var fileref=document.createElement("link")
                          fileref.setAttribute("rel", "stylesheet")
                          fileref.setAttribute("type", "text/css")
                          fileref.setAttribute("href", filename)
                         }
                         if (typeof fileref!="undefined")
                          document.getElementsByTagName("head")[0].appendChild(fileref)
                        }

                        loadjscssfile("js/soundmanager2.js", "js") //dynamically load and add this .js file
                        loadjscssfile("js/360player.js", "js") 
                    $('#sortable1, #sortable2').sortable({
                        connectWith: ".connected"
                    }).disableSelection();
                }
            });
        }
        return true;
    });
});

the loadjscssfile() function is the only way i found that kind of works. The problem is that if i click on another genre which calls the same file, (or another button that has a similar file with the same function in it) it stops working. So it works only the first time.

回答1:

solved, i had to reboot() the script in my ajax response. (there is a reboot() function for soundmanager2), so the ajax file is now:

$(document).ready(function(){
        $(".all").click(function()
    {
        var all = $(this).attr("id");
        if(all != '')
        {
            $.ajax
            ({
                type: "POST",
                url: "php/searchbrowselist.php",
                data: "all="+ all,
                success: function(option)
                {
                    soundManager.reboot();
                    $("#browsemusic").html(option);
                    $('#sortable1, #sortable2').sortable({
                        connectWith: ".connected"
                    }).disableSelection();
                }
            });
        }
        return false;
    });
});