How to delete Modal Bootstrap data the second time - ASP.NET MVC 5

Question

How to delete Modal Bootstrap data the second time - ASP.NET MVC 5

Navigation

#1 by (0 votes)

1

When I open Modal the second time, the audio element remains the same.

I've uploaded new audio and still continues the old audio.

Please follow my code below.

    <div class="col-xs-6">
        @Html.LabelFor(model => model.Voice )
        <br />
        @Html.TextBoxFor(model => model.Voice, new { @class = "form-control", @type = "file" })
    </div>

Html5 Audio:

    <audio controls style="width: 400px;">
        <source src="@Url.Action("StreamUploadedSong")" type="audio/mp3" />
        Your browser does not support the audio element.
    </audio>

Javascript:

    $(function () {

        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {
            //hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
            //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    //backdrop: 'static',
                    keyboard: true
                }, 'show');

                //bindForm(this);
            });
            return false;
        });
    });

The problem is:

public FileStreamResult StreamUploadedSong() // não entra aqui na segunda vez com modal bootstrap
{
}

On the second time, it should enter Public StreamUploadedSong ()

Why are not you working right?

asp.net-mvc bootstrap-3 html5-audio

asked by anonymous 05.10.2016 / 21:33

1 answer

How to call an ajax inside another? Open link in another tab when clicking button

score 0 · Accepted Answer

This happens because the src you set url has already been loaded, when you open the modal again, you are not reloading the player object or its content, just displaying it again on the user's screen.

Assign an identifier to your Audio elm:

 <audio id="audioPlayer" controls style="width: 400px;">
    <source src="@Url.Action("StreamUploadedSong")" type="audio/mp3" />
    Your browser does not support the audio element.
</audio>

And after opening the modal execute the load () method, this should help:

   $(function () {

    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {
        //hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
        //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                //backdrop: 'static',
                keyboard: true
            }, 'show');

            $("#audioPlayer").load();

            //bindForm(this);
        });
        return false;
    });
});