Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ajax how to load some scripts

I have the following code, that loads to an unerdored list content, depending on how much span there is with information:

$(document).on('click','#addplaylisttolist',function(){
    myPlaylist.pause();
    myPlaylist.remove();
    $("#playlist_selected_songs").empty();
    $.each($(this).find("span"),function(){
            $("#playlist_individual_li").load('listen_playlist_section_content_item_add',{musicId:$(this).attr('data-id-music'),musicTitle:$(this).attr('data-title'),musicArtist:$(this).attr('data-artist'),musicFile:$(this).attr('data-mp3'),musicPoster:$(this).attr('data-poster'),musicTime:$(this).attr('data-time-music')},function(){
                $("#playlist_selected_songs").append($("#playlist_individual_li").html());
            });
        });
    myPlaylist.play();
});

The code where the playlist will be build:

    <div class="m-t-n-xxs item pos-rlt">
        <div class="top text-right">
            <span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                <span class="bar1 a3 lter"></span>
                <span class="bar2 a5 lt"></span>
                <span class="bar3 a1 bg"></span>
                <span class="bar4 a4 dk"></span>
                <span class="bar5 a2 dker"></span>
            </span>
        </div>

        <div id="playlist_owner_info" class="bottom gd bg-info wrapper-lg">
            <span id="playlist_owner_info_followers" class="pull-right text-sm">
                            {$item.profile_jrFollower_item_count}
                            <br>
                            Followers
            </span>
            <span id="playlist_owner_info_name" class="h2 font-thin">
                            {$item.profile_name}
            </span>
        </div>
        {jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" id="playlist_owner_img" class="img-full halfwidth" item_id=$item.profile_id size="medium" alt="..." crop="height"}
    </div>
    <ul id="playlist_selected_songs" class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
        {$playlist = json_decode($item.playlist_list,true)}
        {foreach $playlist as $id => $position}
            {foreach $position as $id1 => $position1}
                {jrCore_list module="jrAudio" search="_item_id in `$id1`" template="listen_playlist_section_content_item.tpl"}
            {/foreach}
        {/foreach}
    </ul>
    <li id="playlist_individual_li" style="display: none;"></li>

The code of the midle div, where there is the list of playlists and where there is the anchor with the id "addplaylisttolist" that the top script uses:

{jrCore_module_url module="jrPlaylist" assign="purl"}
{if isset($_items)}
    {foreach from=$_items key="module" item="item"}
        <li class="list-group-item clearfix">
            <a id="addplaylisttolist" class="jp-play-me pull-right m-t-sm m-l text-md">
                {$playlist = json_decode($item.playlist_list,true)}
                {foreach $playlist as $id => $position}
                    {foreach $position as $id1 => $position1}
                            {jrCore_list module="jrAudio" search="_item_id in `$id1`" template="listen_playlist_item.tpl"}
                    {/foreach}
                {/foreach}
                <i class="icon-control-play text" style="cursor:pointer;"></i>
            </a>
                <script>
                    $(document).ready(function(){
                        $(document).on('click','#addplaylisttolist',function(){
                                $("#playlist_owner_img").attr('src','http://site.fm/profile/image/profile_image/{$item.profile_id}/medium/crop=height/_v=1456534488');
                                $("#playlist_owner_info_followers").html("{$item.profile_jrFollower_item_count}<br>Followers");
                                $("#playlist_owner_info_name").html("{$item.profile_name}");
                            });
                        });
                </script>

         ...
        </li>
    {/foreach}
{/if}

And that anchor with the id "addplaylisttolist" will have has much span's with info as much musics the playlist in question has:

{jrCore_module_url module="jrAudio" assign="murl"}
{if isset($_items)}
    {foreach $_items as $item}
        <span id="artistitem" data-id-music="{$item._item_id}" data-time-music="{$item.audio_file_length}" data-title="{$item.audio_title}" data-artist="{$item.audio_file_artist}" data-mp3="{$jamroom_url}/{$murl}/stream/audio_file/{$item._item_id}/key=[jrCore_media_play_key]/file.mp3" data-poster="{$jamroom_url}/{$murl}/image/audio_image/{$item._item_id}/large" data-path="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">
        </span>
    {/foreach}
{/if}

Finnaly, the problem is that the template i use to construct each individual li (used by the script at the top), is the following:

<li class="list-group-item">
    <div class="pull-right m-l">
        <span class="addtolistbutton">
            {jrCore_module_function function='jrPlaylist_button' playlist_for='jrAudio' item_id=$musicId class='circleplus_icon_playlist' title='Add To Playlist'}
        </span>
        {if jrUser_is_logged_in()}
            <a href="" id="listen_playlist_delete_item" title="delete music"><i class="icon-close"></i></a>
        {/if}
        {literal}
            <script type="text/javascript">$(function() {var switchTo5x=true;});</script>
            <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
            <script type="text/javascript">$(function() {stLight.options({ publisher: "123456789-91211-121314-121617-181920212223242526", doNotHash: false, doNotCopy: false, hashAddressBar: false});});</script>

            <span class='st_sharethis_large' displayText='ShareThis'></span>

        {/literal}
    </div>
    <a href="" class="addplaylistmusic jp-play-me m-r-sm pull-left" data-title="{$musicTitle}" data-artist="{$musicArtist}" data-mp3="{$musicFile}" data-m4a="{$musicFile}" data-poster="{$musicPoster}">
        <i class="icon-control-play text"></i>
        <i class="icon-control-pause text-active"></i>
    </a>
    <div class="clear text-ellipsis">
        <a href="$(this).attr('data-path')"><span>
                {$musicTitle}
                </span></a>
        <span class="text-muted"> --
            {$musicTime}
                </span>
    </div></li>

As can be seen, there is scripts there. Using ajax with that scripts don't work. Does anyone knows a way i can make it work? Thanks.

image 1 image 2

A concrete example:

<a id="addplaylisttolist" class="jp-play-me pull-right m-t-sm m-l text-md">


                            <!-- BEGIN wmMusic/listen_playlist_item.tpl -->

            <span id="artistitem" data-id-music="50" data-time-music="00:02:48" data-title="09   Skin To Bone" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/50/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/50/large" data-path="http://site.fm/userdemo1/audio/50/09-skin-to-bone">
        </span>

<!-- END wmMusic/listen_playlist_item.tpl -->


                            <!-- BEGIN wmMusic/listen_playlist_item.tpl -->

            <span id="artistitem" data-id-music="49" data-time-music="00:01:51" data-title="07   Victimized" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/49/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/49/large" data-path="http://site.fm/userdemo1/audio/49/07-victimized">
        </span>

<!-- END wmMusic/listen_playlist_item.tpl -->


                                                    <i class="icon-control-play text" style="cursor:pointer;"></i>
            </a>

And at the left side appears:

<ul id="playlist_selected_songs" class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto"><!-- BEGIN wmMusic/listen_playlist_section_content_item_add.tpl -->
<li class="list-group-item">
    <div class="pull-right m-l">
        <span class="addtolistbutton">
            <!-- BEGIN jrPlaylist/playlist_button.tpl -->
<div style="display: inline-block;" id="playlist_button_jrAudio_50">    
    <a onclick="jrPlaylist_select('50','jrAudio',null)" title="add to playlist"><link rel="stylesheet" property="stylesheet" href="http://site.fm/core/icon_css/32?_v=1462732449"><span class="sprite_icon sprite_icon_32"><span class="sprite_icon_32 sprite_icon_32_img sprite_icon_32_music">&nbsp;</span></span></a>
    <div id="playlist_jrAudio_50" class="overlay playlist_box" style="position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;"><!-- playlist loads here --></div>
</div>
<!-- END jrPlaylist/playlist_button.tpl -->
        </span>
                    <a href="" id="listen_playlist_delete_item" title="delete music"><i class="icon-close"></i></a>

        <div id="test"></div>

    </div>
    <a href="" class="addplaylistmusic jp-play-me m-r-sm pull-left" data-title="09   Skin To Bone" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/50/key=1/file.mp3" data-m4a="http://site.fm/audio/stream/audio_file/50/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/50/large">
        <i class="icon-control-play text"></i>
        <i class="icon-control-pause text-active"></i>
    </a>
    <div class="clear text-ellipsis">
        <a href="$(this).attr('data-path')"><span>   
                09   Skin To Bone
                </span></a>
        <span class="text-muted"> --
            00:02:48
                </span>
    </div></li>

<!-- END wmMusic/listen_playlist_section_content_item_add.tpl --><!-- BEGIN wmMusic/listen_playlist_section_content_item_add.tpl -->
<li class="list-group-item active">
    <div class="pull-right m-l">

        <span class="addtolistbutton">
            <!-- BEGIN jrPlaylist/playlist_button.tpl -->

<div style="display: inline-block;" id="playlist_button_jrAudio_49">

    <a onclick="jrPlaylist_select('49','jrAudio',null)" title="add to playlist"><link rel="stylesheet" property="stylesheet" href="http://site.fm/core/icon_css/32?_v=1462732449"><span class="sprite_icon sprite_icon_32"><span class="sprite_icon_32 sprite_icon_32_img sprite_icon_32_music">&nbsp;</span></span></a>
    <div id="playlist_jrAudio_49" class="overlay playlist_box" style="position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    right: 0px;"><!-- playlist loads here --></div>
</div>
<!-- END jrPlaylist/playlist_button.tpl -->
        </span>
                    <a href="" id="listen_playlist_delete_item" title="delete music"><i class="icon-close"></i></a>            
        <div id="test"></div>

    </div>
    <a href="" class="addplaylistmusic jp-play-me m-r-sm pull-left active" data-title="07   Victimized" data-artist="L㏌k㏌ ㎩rk" data-mp3="http://site.fm/audio/stream/audio_file/49/key=1/file.mp3" data-m4a="http://site.fm/audio/stream/audio_file/49/key=1/file.mp3" data-poster="http://site.fm/audio/image/audio_image/49/large">
        <i class="icon-control-play text"></i>
        <i class="icon-control-pause text-active"></i>
    </a>
    <div class="clear text-ellipsis">
        <a href="$(this).attr('data-path')"><span>

                07   Victimized
                </span></a>
        <span class="text-muted"> --
            00:01:51
                </span>
    </div></li>

<!-- END wmMusic/listen_playlist_section_content_item_add.tpl --></ul>
like image 386
Nmaster88 Avatar asked May 02 '16 19:05

Nmaster88


People also ask

How can I load a page in AJAX?

$(selector).load(URL,data,callback); The required URL parameter specifies the URL you wish to load. The optional data parameter specifies a set of querystring key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed.

Where do I put AJAX script?

Place all your scripts at the bottom of the <body> so that the loading of non-JS resources, such as images, is not delayed. Combine your scripts into a single file, so that the server has to make fewer requests for resources (you'll see this referred to as "minimizing HTTP requests")

How do you load data into JavaScript?

In order to do that, you will need to: send an AJAX request in your javascript code. parse the request and send back the file via PHP. do your logic in Javascript when the request is responded.


2 Answers

After adding the content (in your ajax success callback function definition), call :

stButtons.locateElements();

See :

  • How to dynamically create "Share This buttons" with a custom URLs with a javascript function?
  • Sharethis button does not work on pages loaded via ajax
like image 165
Sky Voyager Avatar answered Oct 16 '22 23:10

Sky Voyager


I think you want to be able to call the script functions that are within the dynamically added script tags. Correct?

Here are some things you can try:

  • A) Try using global script functions and invoking them in the script tags (I am not sure what $function() does).
  • B) Within the functions, try to invoke a debug alert('debug'). This may help you to see if the function is being invoked or not.
  • C) When are the script functions invoked? It could be possible that the app is trying to invoke the functions Before the scripts have been fully loaded (using option A will help solve this). Another way is to somehow ensure that the scripts are loaded before invoking what's in them.
  • D) For the script containing http://w.sharethis.com/button/buttons.js, can't you just load this at the top of the page rather than dynamically like this?
like image 45
AlvinfromDiaspar Avatar answered Oct 16 '22 23:10

AlvinfromDiaspar