Hide or Show Div based on media from Ajax.ActionLink[Answered] RSS

• • Reply
  indyitman

  Member

  58 Points

  216 Posts

  Hide or Show Div based on media from Ajax.ActionLink

  Jan 29, 2014 04:58 PM|indyitman|LINK

  When an audio or video "currentMedia" starts, I want a div ".next" to be hidden, and when the media is done playing, I want the div ".next" to show.

  The trick is, "currentMedia" div containing the audio or video media content is replaced on clicking ".next" using @Ajax.ActionLink, so I am trying to figure out how to get jQuery to recognize it and run the function to show ".next" each time media ends, and hide it when the next media is loaded via Ajax.

  Here is some of my jQuery - both of these work fine by themselves.

  $(document).ready(function () {
      $(".next").hide();
  });
  
  $(document).ready(function () {
      $("#currentMedia").on("ended", function () {
          $(".next").show();
      });
  });

  Here is the View code:

      <div class="next">
          @Ajax.ActionLink("NEXT >>", "NextPmc", "Home",
          new AjaxOptions
                   {
                       HttpMethod = "GET",
                       InsertionMode = InsertionMode.Replace,
                       UpdateTargetId = "user-component-wrapper",
                   })
      </div>
  
  
  <img src="@Html.DisplayFor(m => m.ComponentUrl1)" />
  <audio id="currentMedia" autoplay="autoplay">
      <source src="@Html.DisplayFor(m => m.ComponentUrl2)" />
  </audio>

  "currentMedia" is in a PartialView.

  Any help please?

• • Reply
  galeny

  Participant

  960 Points

  288 Posts

  Re: Hide or Show Div based on media from Ajax.ActionLink

  Jan 30, 2014 08:19 AM|galeny|LINK

  i suggest you try to set the style 'display:none'.
  you also can post the issue on MVC forum for support better.
  If you think one reply solves your problem, please mark it as An Answer.
• • Reply
  indyitman

  Member

  58 Points

  216 Posts

  Re: Hide or Show Div based on media from Ajax.ActionLink

  Jan 30, 2014 10:33 AM|indyitman|LINK

  Thanks - setting the CSS style did help some -  the first div needed to start out as hidden, so 'display:none' was a better solution.

  I will post in the MVC forum.

  See answer here: http://forums.asp.net/post/5616480.aspx