Q:

Pass value from view to another view

I have an MVC application, which want to hide and show divs on one of the Controller view.
So I have a parent View,
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

and a js code,
$(document).ready(function () {
$.ajax({
    type: 'GET',
    url : '@Url.Action(actionName: "Action1", controllerName: "Controller1")',
    dataType: "html",
    async:true,
    success: function (result) { $("#div1").html(result); }
    });
$.ajax({
    type: 'GET',
    url : '@Url.Action(actionName: "Action2", controllerName: "Controller2")',
    dataType: "html",
    async:true,
    success: function (result) { $("#div2").html(result); }
    });

$.ajax({
    type: 'GET',
    url : '@Url.Action(actionName: "Action3", controllerName: "Controller3")',
    dataType: "html",
    async:true,
    success: function (result) { $("#div3").html(result); }
    });

});

This loads the div with the controller views.But I want to show one div at a time. And each divs staying for 10sec.
Also is there a better way to write the $(document).ready(function ()?
Thanks in advance

A:

$(function() {
  var divs = $(".myDiv");
  var sampleImageList = ["animals", "arch", "nature"];

  // make your ajax calls and insert it into respective div
  var request = function(action, controller, div) {
    var url = "@Url.Action(actionName: " + action + "," + "controllerName: " + controller + ")";
    var index = $(divs).index(div);
    var sampleImage = "<img src=\"https://placeimg.com/640/480/" + sampleImageList[index] + "\">";
    $(div).html(sampleImage);

    /* use ur Ajax call  
    $.ajax({
        type: 'GET',
        url: url,
        dataType: "html",
        success: function(result) {
          $(div).html(result);
        },
        error: function(xhr, status) {
          $(div).html(status); // handle error here 
        }
      }); */

  };

  var swap = function() {
    var $active = $("#myGallery .active");
    var $next = ($("#myGallery .active").next().length > 0) ? $("#myGallery .active").next() : $("#myGallery div:first");

    $active.fadeOut(function() {
      $active.removeClass("active");
      $next.fadeIn().addClass("active");
    });
  }; // swap end

  divs.each(function(index, div) {
    var action = $(div).attr("data-action");
    var controller = $(div).attr("data-controller");
    request(action, controller, div);
  }); // divs end
  
  $("#myGallery .active").fadeIn(); // show first div
  setInterval(swap, 10000);

});
#myGallery .myDiv{
  display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myGallery">
  <div id="div1" class="myDiv active" data-action="first" data-controller="home"> </div>
  <div id="div2" class="myDiv" data-action="second" data-controller="home"></div>
  <div id="div3" class="myDiv" data-action="third" data-controller="home"></div>
</div>



We use CSS to hide all our div's.
Right away we will make all the AJAX requests and save it into respective div. Then we use our swap function to show or hide div's. In case of an AJAX error, you could append a placeholder image or show an error message, it is up to you.
https://jsfiddle.net/r958njhq/

